PX ↔ REM Converter
Convert pixels to rem and back, against any root font size. Type in either field and the other updates live, check the common-values table for your spacing scale, and copy the CSS output straight into your stylesheet.
New to this? Read the PX ↔ REM Converter guide →
Browser default is 16px.
Edit either field — the other updates instantly. Change the root size if your stylesheet overrides html { font-size }.
CSS output
Common values (root 16px)
| px | rem |
|---|
Frequently asked questions
How do I convert px to rem?
Divide the pixel value by the root font size — 16px in every mainstream browser by default. So 24px ÷ 16 = 1.5rem. If your stylesheet changes the root size (the 62.5% pattern makes it 10px), divide by that instead; the converter lets you set any root value.
Why use rem instead of px?
Rem respects the font size users set in their browser settings; px ignores it. Sizing text and text-related spacing in rem means your layout scales for people who need larger type — the most direct route to meeting WCAG’s 200% text-resize requirement.
Should everything be in rem?
No. Borders, box shadows and hairline details belong in px — a 1px border should stay a hairline regardless of text size. Use rem for font sizes, spacing around text, reading-column widths and breakpoints; use px for decorative details that shouldn’t scale.
What is the 62.5% trick?
Setting html { font-size: 62.5% } makes 1rem equal 10px at the default browser setting, so mental math is easy (2.4rem = 24px). It preserves user scaling, but third-party CSS that assumes 1rem = 16px renders too small — many teams now prefer a converter over the trick.