Last updated October 13, 2026 · Report an error
CSS font sizes are often specified in em or rem rather than pixels, for better accessibility and scalability — but designers usually think in pixels first. This tool converts between pixels and em/rem at any base font size, in either direction.
How it works
em = px ÷ base font-size in px (default 16px, the standard browser default). Rem uses the exact same arithmetic — the only difference is WHAT font-size it's relative to: em is relative to the nearest ancestor element's font-size, while rem is always relative to the ROOT (html) element's font-size specifically.
- Enter value.
- Enter base font size (px).
- Enter conversion direction.
- Click Calculate to see your results.
Examples
A heading size
At the default 16px base font size, 24px converts to exactly 1.5em (or 1.5rem).
Who should use it
- Converting a designer's pixel-based spec into em/rem for CSS implementation.
- Auditing an existing stylesheet's font sizes for accessibility.
Industry applications
- Web design and front-end development
- Accessibility (a11y) auditing
Advantages
- Works in both directions (px to em/rem and back).
- Base font size is fully customizable, not locked to 16px.
Limitations
- Does not distinguish between em and rem numerically since they use the same formula — the distinction is purely about which element the base size applies to, which this tool explains but can't enforce.
Common mistakes to avoid
- Assuming em always uses the root font size — it actually uses the nearest ancestor's font-size, which can compound unexpectedly in deeply nested elements (rem avoids this by always using the root).
Best practices
- Use rem for most sizing to avoid unexpected compounding, and reserve em for cases where you specifically want a size relative to its immediate parent (like padding that should scale with a button's own font size).
Tips
- If your project uses a non-default root font-size (some frameworks set it to 62.5% = 10px for easier mental math), enter that actual pixel value as the base font size instead of the browser default of 16px.
Frequently asked questions
The math is identical — the difference is which element's font-size they're relative to. em is relative to the nearest ancestor with a set font-size (so it can compound through nested elements), while rem is always relative to the root html element's font-size, regardless of nesting.
Em/rem sizes scale automatically when a user changes their browser's default font size for accessibility — a fixed pixel size does not respond to that setting.