px ⇄ rem Converter
Any root size, instant both ways.
| px | rem (16px root) | common use |
|---|
Why rem beats px for most sizing
rem units are relative to the root font size, so when a user raises their browser's default text size for accessibility, everything in rem scales with it — text, padding, borders, radii. Hard-coded px values ignore that preference entirely, which is why audit tools flag px-based font sizes and why most design systems now express spacing scales in rem.
The conversion is one division: rem = px ÷ root size. The default root is 16px, but frameworks and resets sometimes change it (62.5% resets make 1rem = 10px), so set the base here to match your stylesheet. The table below lists the sizes that cover 90% of everyday decisions — text steps, paddings and common component dimensions.
FAQ
When should I keep using px?
Hairline borders, shadows and sub-pixel details are often better in px — they shouldn't scale. Media query breakpoints are a matter of convention; many teams keep those in px or em.
What about em?
em is relative to the parent element's font size, not the root — powerful for component-internal scaling but compounding and easy to get wrong. Prefer rem unless nesting demands em.