When does 1em equal 1rem?

When the parent element's font size equals the root font size. At the default browser setting of 16px for both, 1em = 1rem.

Why use rem instead of em?

Rem values are predictable because they always reference the single root font size. Em values compound through nested elements, which makes them harder to reason about in deep component trees.

What is the default root font size?

Most browsers default to 16px. If you set html { font-size: 62.5%; } the root becomes 10px, making 1rem = 10px.

Does this calculation require any server calls?

No. All conversion happens in your browser using plain arithmetic. No data is sent anywhere.

Em to Rem Converter

Name: Em to Rem Converter
Availability: InStock
Author: Nham Vu

Convert em units to rem units (and back) using parent and root font sizes.

Em to Rem Converter

Em value

Parent font size (px)

Root font size (px)

Result 1.0000 rem

Formula: rem = em × (parent px ÷ root px)

Reverse: Rem to Em

Rem value

Parent font size (px)

Root font size (px)

Result 1.0000 em

Formula: em = rem × (root px ÷ parent px)

Reference Table

Common conversions at 16px parent / 16px root (1em = 1rem at these defaults).

Em	Rem (16px/16px)	Pixels

Copied!

Summary

Convert em units to rem units (and back) using parent and root font sizes.

How it works

Enter the em value you want to convert.
Set the parent element font size in pixels (default 16px).
Set the root (html) element font size in pixels (default 16px).
The converter calculates: rem = em × (parent_px / root_px).
Use the reverse section to convert rem back to em.

Use cases

Convert a component's em-based spacing to rem for a design system with a non-default root font size.
Check whether an em value from a third-party stylesheet is equivalent to its rem counterpart.
Migrate legacy CSS that uses em throughout to a rem-first architecture.
Verify that nested em values behave as expected relative to the document root.

Frequently Asked Questions

Last updated: 2026-07-23 · Reviewed by Nham Vu