What rem actually means
rem stands for "root em." One 1rem equals the font size set on the <html> element. By default, every modern browser sets that to 16px, so 1rem = 16px, 0.5rem = 8px, 1.5rem = 24px. Change the root and every rem on the page scales with it — which is why rem is the unit designers use for accessible, responsive typography and spacing.
The formula is simply rem = px ÷ rootFontSize. That's the entire conversion; everything else on this page is just showing you the result.
Why 16px is the default root
Browsers shipped with 16px as the default font size long before CSS had a standard for it, and it has stuck. It's a safe default because it's large enough to read comfortably on a laptop, small enough to fit common layout widths, and it divides cleanly into common design scales (8px, 12px, 24px all map to fractions of a rem).
But 16px is not a requirement. If your design system uses a 14px or 18px baseline — or if you're scaling the entire page off a 20px root for large-format screens — set that as the root here and the conversion adjusts. The important thing is that the root you use in this tool matches the one in your CSS:
html { font-size: 16px; }
rem vs em vs px — which to use
- rem for global sizing: typography scale, spacing tokens, component paddings, anything that should scale with the user's browser settings. This is the modern default.
- em for size relative to the current element's context: button labels that scale with the button's font size, icon glyphs that should always be 1em wide, indentation that nests correctly.
- px when you need something that never scales: 1px borders, hairlines, sub-pixel values for design fidelity. Avoid it for anything the user reads.
Why accessibility matters here
If you set font-size: 16px in your CSS, the user's browser setting is ignored. A user who has set their default to 20px still gets 16px on your site, which fails a real accessibility need (older users, users on high-DPI displays, users who zoom). If you set font-size: 1rem, they get 20px. Same visual result at default zoom, but it respects the setting when it matters.
Quick reference
Common pixel values, expressed in rem at the two most common root sizes.
| px | rem @ 16px root | rem @ 20px root |
|---|---|---|
| 8px | 0.5rem | 0.4rem |
| 12px | 0.75rem | 0.6rem |
| 14px | 0.875rem | 0.7rem |
| 16px | 1rem | 0.8rem |
| 18px | 1.125rem | 0.9rem |
| 20px | 1.25rem | 1rem |
| 24px | 1.5rem | 1.2rem |
| 32px | 2rem | 1.6rem |
| 48px | 3rem | 2.4rem |
| 64px | 4rem | 3.2rem |
Questions
Why are em and % shown at all if they use the parent font size?
Because in practice, most developers convert a single value in isolation (a padding of 24px, a heading of 32px) and want to know the equivalent in every relative unit. When the parent font-size equals the root — which it does for the vast majority of top-level elements — em, rem, and %-of-root all produce the same number. The note under the output reminds you of the caveat.
What if my root font size is a percentage, like 62.5%?
The 62.5% trick sets the root to 10px (62.5% × the default 16px). That makes the mental math easier: 1.4rem is 14px, 2.4rem is 24px. Enter 10 as the root font size here to match. Some teams avoid the trick because it breaks assumptions inside third-party UI libraries that expect 16px; if you use it, do so deliberately.
How do I go the other direction (rem to px)?
The same formula, rearranged: px = rem × rootFontSize. If you need a dedicated tool for that, this page is px → rem focused; for one-off checks, just multiply. 1.5rem × 16 = 24px.
Does this handle decimal pixels?
Yes. 12.5px at a 16px root is 0.78125rem. In practice, rounding to 4 decimal places is safe — CSS accepts up to full precision but browsers render at subpixel levels anyway.