The formulas
rem = px ÷ root font size | px = rem × root font size
em = px ÷ parent element’s font size
With the default 16px root, 24px is 1.5rem and 14px is 0.875rem. Some projects set the root to 62.5% (10px) so 1.6rem = 16px; if yours does, set the base to 10.
| px | rem (16px base) | Typical use |
|---|---|---|
| 12 | 0.75 | Small print (use sparingly) |
| 14 | 0.875 | Captions, labels |
| 16 | 1 | Body text minimum on mobile |
| 18 | 1.125 | Comfortable body text |
| 24 | 1.5 | Subheadings |
| 32 | 2 | Section headings |
| 48 | 3 | Page headings |
rem or em?
- rem is relative to the root, so it is predictable everywhere. Use it for font sizes and most spacing.
- em is relative to the current element’s font size, so it compounds when nested. Useful for padding that should scale with a button’s text.
- px is still fine for borders and fine details that should not scale.
Rem-based text respects visitors’ browser text-size settings, which matters for accessibility. Pair it with sufficient colour contrast; check that with the Colour Contrast Checker.