PX to REM/EM Converter
Convert px to rem and em (and back) for any root font size. Live two-way conversion plus a quick px-to-rem reference table for responsive CSS.
Quick reference @ 16px base
| px | rem |
|---|---|
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 64px | 4rem |
px, rem and em
px is an absolute CSS unit — one device-independent pixel. rem (“root em”) is relative to the root <html> font size, while em is relative to the font size of the current element.
The conversion is simply rem = px / base and px = rem × base. Browsers default the base to 16px, so 16px = 1rem, 24px = 1.5rem, 8px = 0.5rem.
rem vs em — which to use
rem
Predictable: always the root size, no matter how deeply nested. Best for typography scale, spacing and layout — the safe default.em
Compounds with parent font size — powerful for component-relative spacing (padding that scales with its own text) but can cascade unexpectedly if nested.Why rem helps accessibility
When a user increases their browser's default font size for readability, every value declared in rem scales with it, because it's tied to the root. Hard-coded px ignores that preference. Sizing text and spacing in rem is one of the simplest wins for an accessible, zoom-friendly layout.
The 62.5% trick
Some developers set html { font-size: 62.5% } so the base becomes 10px — then 1.6rem = 16px and the mental math is trivial. Set the base field to 10 here to work that way. Be aware it changes the meaning of every rem on the page, so apply it from the start of a project, not midway.