Instantly convert pixel values to rem units (and vice versa) for responsive, accessible CSS typography.
| Pixels | REM | Typical Use |
|---|---|---|
| 10px | 0.625rem | Captions, fine print |
| 12px | 0.75rem | Small UI text |
| 14px | 0.875rem | Secondary text, labels |
| 16px | 1rem | Base body text |
| 18px | 1.125rem | Large body text |
| 20px | 1.25rem | Lead paragraphs |
| 24px | 1.5rem | H3 headings |
| 32px | 2rem | H2 headings |
| 48px | 3rem | H1 hero headings |
When you set font sizes in px, they are absolute — they don't scale when a user changes their browser's default font size for accessibility. A visually impaired user who sets their browser to 24px base will still see your 16px paragraph text at 16px, making it unreadable.
With rem, all your typography scales proportionally. If the user sets a 24px root size, your 1.5rem heading automatically becomes 36px. Your entire design respects the user's preferences without any extra work.
Divide the pixel value by the root font size (default 16px). For example, 24px ÷ 16 = 1.5rem.
rem units scale with the user's browser font size settings, making your typography accessible. px is fixed and ignores user preferences.
16px in all modern browsers. This means 1rem = 16px by default.
rem is relative to the root (html) font size. em is relative to the parent element's font size and can compound in nested elements, which makes it unpredictable. rem is the modern standard.