px to rem converter
Enter a pixel value to get the rem equivalent at any root font size. Result updates as you type.
Why convert px to rem
Most design tools (Figma, Sketch, anything based on raster comping) work in pixels — designers think in px, screens measure in px, and a 24-pixel heading is a 24-pixel heading. But shipping those values directly as CSS px locks them to an absolute size. Converting to rem keeps the same visual result at the browser default while letting the value scale when users change their default font size. This page is the converter you reach for during that translation.
How it works
The rem unit is relative to the root element’s font size. Browsers default the root to 16px, which is why developers and design systems frequently treat 1rem and 16px as interchangeable. To convert a pixel value to rem, divide it by the root font size: rem = px / root. At the default root, 24px becomes 1.5rem, 14px becomes 0.875rem, and 8px becomes 0.5rem. If you’ve overridden the root (some sites use font-size: 62.5%, which sets the root to 10px so that 1rem = 10px), use that value in the divisor instead.
Worked examples
A body-text size. You have a 14px size from your design tokens. At the default 16px root: 14 / 16 = 0.875. So font-size: 14px becomes font-size: 0.875rem — same visual size, now scales with user preferences.
A heading. A 32px h2 at the default root: 32 / 16 = 2. The CSS becomes font-size: 2rem. A 48px h1: 48 / 16 = 3, so 3rem.
A non-default root. If your site sets html { font-size: 62.5% } (so 1rem = 10px), 24px becomes 24 / 10 = 2.4rem. This is the trick some design systems use to make px-to-rem mental math easier — but it shifts the relationship in ways your dependencies may not expect.
Reference table
Common px values converted to rem at the default 16px root.
| Pixels | Rem (16px root) | Typical use |
|---|---|---|
| 12px | 0.75rem | Small print, captions, labels |
| 14px | 0.875rem | Secondary body text, table cells |
| 16px | 1rem | Default body text |
| 18px | 1.125rem | Comfortable body, lead paragraphs |
| 20px | 1.25rem | Large body text, small headings |
| 24px | 1.5rem | Sub-headings (h3) |
| 32px | 2rem | Section headings (h2) |
| 48px | 3rem | Page titles, hero text (h1) |
| 64px | 4rem | Display type, hero headlines |
When to convert and when to keep px
Convert to remfor anything related to type: font-size, line-height, letter-spacing, and the spacing between text elements (margins, padding around prose). Convert page-level layout tokens too — the container max-widths, vertical rhythm between sections, gaps in your grid. These should scale with the user’s font-size preference.
Keep px for things that should not scale: hairline borders, fixed icon dimensions where the icon is a raster image, the precise pixel-snapping of a shadow or outline, the size of a 1px stroke. These are visual atoms, not type-relative values.
The grey area is component-internal sizing. For button or input padding that should scale with the component’s own type, the better unit is em (relative to the parent). For padding that should be consistent across the page regardless of type context, use rem.
Accessibility
This is the practical reason to convert px to rem at all. Browsers let users override the default font size for legibility — a setting commonly used by readers over 40, anyone with low vision, or people using larger displays at a distance. Anything sized in rem responds to that override. Anything sized in px ignores it.
The trap is fixing the root to a px value: html { font-size: 16px } breaks the scaling because the root no longer responds to the user’s preference. Leave the root at its default (or use a percentage like 100%), and the entire rem-based tree scales for free.
Common mistakes
- 1. Setting the root in px and expecting scaling.
html { font-size: 16px }cancels the accessibility win. Use100%or leave the root alone. - 2. The 62.5% trick without warning. Setting
html { font-size: 62.5% }so that 1rem = 10px is a popular shortcut, but it changes the meaning of rem for every dependency on your page — CSS frameworks, third-party widgets, embeds. Document it loudly if you use it. - 3. Mixing px and rem on the same property.
margin: 1rem 24pxworks but obscures intent. If the property should scale, use rem throughout; if not, px throughout. - 4. Rounding aggressively in the source. 13px doesn’t round to 0.8rem cleanly — it’s 0.8125rem. Either accept the long decimal or pick a nearby value that rounds nicely (14px = 0.875rem, 16px = 1rem).
FAQ
Is 1rem always 16px?
Only when the root font size is 16px, which is the browser default and the assumption nearly every CSS framework makes. If a site overrides the root, 1rem resolves to whatever that root is.
Should I use rem or em for component padding?
em if the padding should scale with the component’s own font size (button padding that grows when the button text grows). rem if the padding should stay consistent regardless of the component’s type. Both responses to user font-size preferences are correct — pick the one that matches the visual behaviour you want.
Why are my rem values not rounding nicely?
Because 16 isn’t a particularly friendly divisor. Values like 14px (0.875rem) and 24px (1.5rem) round cleanly; values like 13px (0.8125rem) and 22px (1.375rem) don’t. Either use the long decimal (browsers compute precisely) or pick a neighbouring value that rounds well.
Does converting to rem break my pixel-perfect designs?
At the default root, no — the rendered size is identical. The point of rem is not to change the default presentation but to give your design a way to scale that px cannot.