This converts pixel values into em and rem units, the relative sizing units used throughout CSS for fonts and layout. Since em and rem scale relative to a base font size instead of representing a fixed size, converting from pixels needs that base size, which you can set here to match your project.
How to use it
- Enter the pixel value you want to convert.
- Enter the base font size in pixels. 16 is the usual browser default.
- Read the em value, relative to the base you entered.
- Read the rem value, which is always relative to the root font size of 16 pixels.
- Adjust the base if you're working inside a component with a different local font size than the page root.
When it helps
- Converting a design mockup's pixel measurements into em or rem for a responsive stylesheet.
- Setting font sizes in rem so they scale correctly when someone changes their browser's default text size.
- Converting padding and margin to em so spacing scales with a component's own font size.
- Translating a design system's pixel based spacing scale into relative units.
- Double checking a rem value's actual pixel size for a review with a design team that thinks in pixels.
Good to know
- Rem is always relative to the root html element's font size, so it stays predictable no matter how deeply nested an element is.
- Em is relative to the current element's own font size, which can compound unexpectedly in deeply nested components.
- Most modern CSS uses rem for font size and layout spacing specifically to avoid that compounding.
- When auditing a site for accessibility, check whether font sizes are set in rem rather than fixed pixels, since rem respects a person's browser text size preference.
- If a design file specifies everything in pixels, convert the key values, like body text size and main spacing units, early on rather than converting every single measurement individually.
Questions
What's the real difference between em and rem?
Em is relative to the element's own font size, or its parent's for the font-size property itself. Rem is always relative to the root html element, which makes it more predictable in nested layouts.
Why is 16 pixels the default base?
It's the default text size most browsers use unless a stylesheet overrides it, which is why it's the common base for em and rem calculations.
Does changing the base here affect the rem calculation too?
The rem figure this tool shows assumes a fixed 16 pixel root, matching typical browser defaults. If your project sets a different root size, work out rem manually using that value instead.
Should I use em or rem for margin and padding?
Many developers use rem for consistency across nested components, though em can help specifically when spacing should scale with a particular element's own font size.
Does browser zoom affect em and rem the same way?
Zoom scales the whole page proportionally, which is different from someone changing their default font size setting. Em and rem specifically respond to font size changes, while zoom affects everything uniformly.
Do em and rem affect image sizing the same way as text?
They can, since any CSS length property can use em or rem, not just font size. An image sized in em will scale if the surrounding font size changes, which is worth knowing if that's not the intended effect.