PX to REM Converter
| Pixels | rem (16px root) | Typical use |
|---|---|---|
| 4 | 0.25 | Hairline gaps |
| 8 | 0.5 | Icon padding |
| 12 | 0.75 | Small labels |
| 16 | 1 | Body text default |
| 20 | 1.25 | Large body |
| 24 | 1.5 | H3 headings |
| 32 | 2 | H2 headings |
| 48 | 3 | Hero headings |
The conversion is one division: rem = px ÷ root font size. With the browser default of 16px, 24px is 1.5rem and 12px is 0.75rem - but the root size is a setting, not a constant, and users change it. The converter above takes any root size so you can verify a design against the accessibility setting your readers actually use.
Bottom line: rem is the right unit for anything typographic - font sizes, spacing around text, layout widths that should scale with reading comfort - because rem respects the user's browser font preference. Pixel typography ignores that setting entirely: a user who sets 20px base text gets your hardcoded 16px anyway, which is an accessibility failure dressed as a style choice.
The honest part: px still wins for hairline borders, box shadows, and 1px separators - cases where scaling with user preferences would distort the design. Teams mix them deliberately: borders in px, everything text-adjacent in rem. The table shows the standard conversions at the 16px default; check your own root size with the input above.
How to use
- Enter the pixel value and the root size (16px default) - the rem result updates live.
- Use the table for the standard scale at the default root: the 4-px steps map to clean quarter-rems.
- Copy the rem value into your stylesheet; keep the px value only for non-scaling details like hairline borders.
Frequently asked questions
How do I convert px to rem manually?
Divide by the root font size: rem = px ÷ root. At the 16px default, divide by 16 - 32px is 2rem, 8px is 0.5rem. The mental shortcut at 16px: every 4px is 0.25rem, so the standard spacing scale (4, 8, 12, 16) maps to quarter-rems. If the site changes its root (html { font-size: 62.5% } makes it 10px for easier math), every conversion shifts - which is why the converter takes the root as an input.
Why use rem instead of px for font sizes?
Respect for the user's settings. Browser font-size preferences and page zoom change the root size; text sized in rem scales with them, text sized in px does not. A low-vision user who sets a 24px base gets your rem-based paragraph at 24px - and your px-based label stuck at 14px, broken relative to everything around it. Modern browsers zoom whole pages by default, which masks the problem; text-only zoom and user stylesheets expose it.
When should I keep px?
For values that should NOT scale with the reader's text preference: 1px hairline borders and separators, box shadows, and sometimes media-query breakpoints (though em-based breakpoints have their own advantage - they track the user's setting). A 1px border at 200% text zoom is still exactly what the design wants at 1px. The discipline is intent: scaling units for things that read, fixed units for things that frame.
What is the difference between rem and em?
Both scale with font size - but rem is always relative to the ROOT (html) font size, while em is relative to the CURRENT element's computed font size. In a component whose font-size changes, em values cascade unpredictably (padding in em grows with the text); rem values stay predictable everywhere. The common convention: rem for spacing and sizes, em only when the scaling SHOULD compound - like the horizontal padding of a button that widens with its label.