How do you convert rem to px?
Multiply the rem value by the root font size. In CSS, 1rem equals the computed font size of the root html element, which browsers set to 16px by default, so 1.5rem × 16 = 24px. To go the other way, divide pixels by the root size: 24px ÷ 16 = 1.5rem. This tool does either calculation with any base from 10 to 32px.
The rem unit (root em) is defined in CSS Values and Units Level 4 as equal to the computed font size of the root element. The 16px figure isn't part of that spec. It's the default size of the medium keyword browsers use for the root (MDN on font-size), and users can change it in their browser settings.
Using the converter
- Choose a Direction: REM → PX or PX → REM.
- Set Base font size (px) on the slider. Leave it at 16 unless your site changes the root font size.
- Enter a value, for example
1.5, and click Convert. - Copy the result, which includes its unit:
24px.
You can paste values straight from a stylesheet: 1.5rem and 24px work because the unit is ignored, and 1,5 works if your keyboard uses a decimal comma. Negative values convert too, so -1 rem gives -16px for a negative margin. Results are rounded to at most four decimal places, so a 12px value at an 18px base comes out as 0.6667rem.
Common sizes at a 16px base
| rem | px | Typical use |
|---|---|---|
| 0.75 | 12 | Small print, captions |
| 0.875 | 14 | Secondary text, labels |
| 1 | 16 | Body text |
| 1.125 | 18 | Large body text, lead paragraphs |
| 1.25 | 20 | Small headings |
| 1.5 | 24 | Section headings |
| 2 | 32 | Page headings |
| 3 | 48 | Hero text |
Going from a design file to CSS is usually the PX → REM direction: a 13px label is 0.8125rem and a 10px gap is 0.625rem.
Why use rem at all?
Rem sizes scale when a reader increases their browser's default font size, and px sizes don't. Someone who sets their default to 20px gets 1rem = 20px everywhere you used rem, while text set in px stays fixed. That matters for WCAG success criterion 1.4.4, Resize Text, which asks that text can be enlarged to 200% without loss of content.
The flip side: once you set html { font-size: 18px } in pixels, you've overridden the user's preference, and every rem on the site is now 18px. Set the converter's base to match whatever your root rule says.
The 62.5% trick
Some stylesheets set html { font-size: 62.5% }. With the usual 16px default, 62.5% is 10px, so 1.6rem is 16px and the mental maths becomes "divide by ten". Set the slider to 10 for those projects: 1.6 converts to 16px and 15 px converts to 1.5rem. Because the rule is a percentage, it still respects a user's larger default, although it does make every component that assumes 1rem = 16px look small.
rem versus em
Both are relative units, but they're relative to different things:
| Unit | Relative to | Compounds when nested? |
|---|---|---|
rem |
root html font size |
No |
em |
the element's own font size (for font-size, the parent's) |
Yes |
px |
a fixed reference pixel | No |
A list nested three deep with font-size: 0.8em shrinks to 0.8 × 0.8 × 0.8 of the original, roughly half. The same rule written in rem stays at 0.8 of the root at every level, which is why rem is the usual choice for font sizes and spacing scales. This converter covers rem only; for em, the base would be the parent's font size, which can differ for every element.
One more subtlety: inside media queries, rem and em refer to the browser's initial font size, not to your html rule (Media Queries Level 4). A 62.5% root doesn't change what @media (min-width: 40rem) means; it's still 640px at a 16px default.
Related pages
- The online CSS editor lets you try converted values in a live stylesheet.
- The CSS cheat sheet puts flexbox, grid, media query and
clamp()syntax on one page. - The CSS lessons include a units and values lesson that compares rem, em and px.
- The pixel ruler measures on-screen elements in px before you convert them.
Last updated