rem vs em — what is the difference?

rem is always relative to the root font-size (typically 16px) — predictable, no compounding. em is relative to the parent element's font-size — compounds through nesting. Use rem for global typography, em for component-scoped sizing.

How do I convert rem to em manually?

The formula is em = (rem × root) / parent. For example, 1.5rem at a 16px root inside a 20px parent is (1.5 × 16) / 20 = 1.2em. The reverse: rem = (em × parent) / root. This tool handles the calculation automatically with bidirectional conversion.

Why does em compound but rem does not?

em is computed at each level of the cascade against that level's parent. Nest three 1.2em elements and you get 1.728× the root size. rem always references the root, so 1.2rem is always exactly the same pixel size regardless of nesting depth.

When should I convert rem to em (or vice versa)?

When refactoring an em-heavy stylesheet to fix compounding bugs, when migrating between two design system conventions, or when debugging what an em actually resolves to in a specific nested context. For new code, prefer rem for typography by default.

rem to em Converter — Free Online CSS Unit Calculator

Home/Design Tools/rem ↔ em Converter

Visual Layout Preview

16px

Generated CSS

font-size: 1em; /* 16px */

rem vs em — What's the Difference?

Both rem and em are relative CSS font units, but they reference different baselines. rem is always relative to the root <html> font-size (typically 16px) — predictable and consistent across the page. em is relative to the parent element's font-size — useful for component-scoped sizing but prone to compounding when nested. Knowing when to convert between them is essential for managing typography in design systems.

rem to em Converter Online — What This Tool Does

This free rem to em converter performs bidirectional conversion in your browser. Set your root font-size and parent font-size, enter a rem value, and see the equivalent em (or vice versa), with a live visual preview and ready-to-copy CSS output.

How to Convert rem to em

Enter a rem value in the rem field.
Set the Root Font Size (default 16px) — this drives rem calculation.
Set the Parent Font Size — this drives em calculation.
The conversion is: em = (rem × root) / parent.
Or enter an em value to see the equivalent rem (bidirectional).
Click Copy CSS for a ready-to-paste declaration.

When to Convert (and When Not To)

Refactoring legacy code — converting an em-heavy stylesheet to rem (or vice versa) to fix compounding bugs or improve predictability.
Component library work — translating design tokens between two different conventions.
Debugging compounding — checking what an em actually computes to inside a nested context.
Don't convert blindly — em and rem behave differently. A 1:1 swap changes behaviour for nested elements.

The em Compounding Problem

Nested em values multiply. A 1.2em heading inside a 1.2em container resolves to 1.44em = 23px at a 16px root. Three levels deep: 1.728em ≈ 28px. This is why rem (which always references the root) is preferred for typography. Use this converter to see what an em actually resolves to in your specific context.

Tips & Tricks

Default to rem for typography — predictable, accessibility-friendly, no compounding. Use our px to rem converter for direct pixel values.
Reserve em for component scoping — buttons, form inputs, icons inline with text — see the px to em converter for direct conversion.
When in doubt, prefer rem — the predictability outweighs em's component-scaling benefits in most cases.
Use ch and ex for special cases — ch is the width of "0" in the current font; ex is the x-height. Useful for layout sized to specific glyph metrics.

Related Tools

px ↔ rem Converter — typography and design-system sizing.
px ↔ em Converter — component-scoped sizing.
px ↔ % Converter — fluid layout sizing relative to parent.
px ↔ vw / vh Converter — viewport-relative sizing.
Color Picker — pick brand colours for your design system.

Is My Data Sent to a Server?

No. All unit conversion runs entirely in your browser using simple JavaScript math. The values you enter — including any proprietary design-system tokens — never leave your device. There is no upload, no logging, and no analytics on the numbers you enter.