PX ↔ REM · FREE · NO UPLOAD
px to rem Converter
rem is CSS length relative to the root font size — which is 16px by default in every major browser. Divide px by 16 (or your custom root size) to get rem: 24px = 1.5rem, 12px = 0.75rem. The widely used 62.5% root trick makes 1rem = 10px for mental math. Use the live converter below both directions, with a chart that re-computes when you change the root size.
0 uploads — verified locally 0 uploads
How the conversion works
rem is a CSS length unit relative to the document's root font size — by default 16px in every major browser. The math is one division: rem = px ÷ root, and px = rem × root. That is the entire formula, and it is why the popular 62.5% trick (setting html { font-size: 62.5% }) makes 1rem equal exactly 10px — mental math becomes trivial: 24px = 2.4rem.
Nothing is uploaded: the calculator runs in your browser, the conversion table re-renders as you change the root size, and the network badge below the tool stays at zero.
When to use rem instead of px
Use rem for anything a user might reasonably want to scale: body text, spacing, component padding. Browsers let users override the root size for accessibility (WCAG recommends honoring it), and rem-based layouts follow. Reserve px for hairlines and elements that must never scale, like 1px borders. The classic failure is hard-coding 14px body text that ignores a user's 20px preference — 0.875rem does the right thing instead.
Common conversions at the default 16px root
| px | rem | typical use |
|---|---|---|
| 12px | 0.75rem | fine print, captions |
| 14px | 0.875rem | secondary text |
| 16px | 1rem | default body text |
| 18px | 1.125rem | comfortable reading size |
| 20px | 1.25rem | lead paragraphs |
| 24px | 1.5rem | section headings |
| 32px | 2rem | page headings |
| 48px | 3rem | hero headings |
FAQ
What is 1rem in pixels?
16px in a default browser setup. rem is defined relative to the root element's font size, and browsers ship 16px as the default. Change the root size (or use the 62.5% trick to make it 10px) and 1rem follows it.
What is the 62.5% trick?
Setting html { font-size: 62.5% } makes the root 10px, so 1rem = 10px, 1.8rem = 18px — designers can think in tens. Switch the root field to 10 above and the whole chart switches with you.
Should I use rem or px for fonts?
rem for user-facing text. It respects browser font-size preferences, which matters for accessibility; px overrides them. Keep px for borders and hairlines only.
Does rem scale with user zoom?
Yes, and that is the point. Browser zoom and text-only settings scale rem-based layouts proportionally; px-based text stays fixed and can break layouts or readability.
Last updated: · Launch: two-way live converter, adjustable root, dynamic conversion chart · change history