1rem = 16 px. Browsers use 16 px unless your CSS sets the font size of html.
em is relative to the font size of the parent element. Empty uses the root size.
Everything runs in your browser: the CSS you paste is not sent anywhere.
Embed this tool on your site
Free and without an account: copy the code and paste it into your website, blog or docs.
About the PX to REM Converter
Turn pixel values into rem or em and back without doing the division by hand. Set the root font size your CSS uses, type a value in any field and the others follow; copy the one you need with its unit. To migrate a stylesheet, paste it and every px becomes rem at once. A table of common sizes for your base is always at hand.
How to use the PX to REM Converter
-
Set the root font size
Type the font size of your html element in Root font size. Leave 16 if your CSS does not change it: it is the default in every browser.
-
Convert a value
Type in Pixels, REM or EM and the other two update. For em, set Parent font size to the font size of the parent element; left empty, it uses the root size. The copy button next to each field copies the value with its unit.
-
Convert a whole stylesheet
Switch to Convert CSS, paste your CSS and choose px → rem or rem → px. "Keep 1px as px" and "Skip media queries" are on by default; copy the result when it looks right.
When to use it
Text that scales with the user
Sizes in rem grow with the text size people choose in their browser settings; px sizes do not. Convert a design’s pixel values to rem so the layout respects that choice.
From a design file to CSS
Figma and other design tools give sizes in pixels. Convert them to rem for your project’s root size, or keep the table of common sizes open while you write CSS.
Migrating an old stylesheet
Convert every px in a legacy stylesheet to rem in one go, keeping hairline borders in px and leaving media queries as they are.
Frequently asked questions
How do you convert px to rem?
Divide the pixels by the root font size: with the default 16 px, 24px ÷ 16 = 1.5rem. To go back, multiply: 1.5rem × 16 = 24px. If your CSS sets html { font-size: 62.5% }, the root size is 10 px, so 24px becomes 2.4rem.
What is the difference between rem and em?
rem is relative to the font size of the root element (html), so 1rem is the same size everywhere on the page. em is relative to the font size of the element, which for font-size means its parent, so it compounds when elements are nested: 1.2em inside another 1.2em is 1.44 times the base.
Why keep 1px values in pixels?
A 1px border is meant to be a hairline. In rem it scales with the user’s font size, so it can become thicker or a fraction of a pixel that browsers round unevenly. Keeping 1px and -1px in pixels keeps hairlines the same everywhere; turn the option off to convert them too.
Should media queries use rem?
They can, but in a media query rem and em always mean the browser’s default font size, not the size your CSS sets on html. That is why Skip media queries is on: with a 10 px root, 768px would become 76.8rem, which a media query reads as about 1229 px. With a 16 px root, 768px and 48rem match.
Is the conversion exact?
Results are rounded to 4 decimal places with trailing zeros removed, such as 0.9375rem or 0.0313rem; browsers work with fractions of a pixel, so the difference is invisible. Only px and rem values are converted: em, %, vw and other units stay as they are, and nothing inside comments, strings or url() changes.
Related tools
Browse all free online tools on Tooly — every one runs in your browser, with no account required.