The formula
rem = px ÷ base font size. With the browser default of 16px, 24px is 1.5rem and 8px is 0.5rem. That's the entire trick — everything else is knowing when to use which unit.
Why rem beats px for font sizes
Users can raise their browser's default font size — and many people with low vision do. Sizes in rem scale with that preference; sizes in px ignore it. That's why accessibility guidelines and most design systems specify type in rem: your layout respects the reader's settings instead of overriding them. A good rule of thumb: rem for font sizes and spacing that should scale, px for things that shouldn't (borders, hairlines, shadows).
Quick reference (base 16px)
| px | rem | px | rem |
|---|---|---|---|
| 4 | 0.25 | 24 | 1.5 |
| 8 | 0.5 | 28 | 1.75 |
| 10 | 0.625 | 32 | 2 |
| 12 | 0.75 | 36 | 2.25 |
| 14 | 0.875 | 40 | 2.5 |
| 16 | 1 | 48 | 3 |
| 18 | 1.125 | 56 | 3.5 |
| 20 | 1.25 | 64 | 4 |
FAQ
What about the 62.5% hack?
Setting html{font-size:62.5%} makes 1rem equal 10px, so the math feels easier (1.6rem = 16px). It works, but it breaks assumptions in third-party components and design tokens, so most modern codebases skip it and just divide by 16. Change the base field above to 10 if your project uses it.
Rem vs em — which one?
Rem is relative to the root font size — predictable everywhere. Em is relative to the parent's font size — it compounds when nested, which is occasionally useful (icons that scale with their button's text) and usually a debugging session waiting to happen. Default to rem.
Should media query breakpoints use rem?
It's the safest choice: rem-based breakpoints respond when users zoom or raise their font size, keeping layouts usable. 48rem instead of 768px does the same job with better accessibility behavior.