Why do modern CSS frameworks prefer rem over em?

Because rem is predictable. 2rem is always twice the root, no matter where in the DOM you are. With em, nesting causes compounding — a 1.5em inside a 1.5em gives you 2.25× root. Harder to reason about.

I want to change the whole page's font size responsively. Rem is better, right?

Yes — set font-size on html in rem, and everything else scales automatically. Change one value, the whole layout responds.

My design uses 14px base font. Does that break the em-rem relationship?

14px base means 1em = 1rem = 14px. The relationship holds; it's the root that changes. Accessibility-aware sites often use 16px+ as a minimum for body text.

Em to Rem Converter

Enter a value to instantly convert between typography units.

From

Precision4 dp

1 Em = 1 Rem

Key Formulas

Point → Pica

pc = pt × 0.0833333

Point → Inch

in = pt × 0.0138889

Pica → Inch

in = pc × 0.166667

Formula

rem = em × 1

For most websites, the root font size is 16px, which means 1em = 1rem = 16px. They cancel out. The difference matters in nested elements: an em inside a element with 1.5em font-size is relative to that parent's size, while a rem is always relative to the root. So 1rem gives you one consistent step from a known baseline, while 1em gives you one step from wherever you happen to be in the document tree.

Source: W3C CSS Values and Units Module Level 3

Frequently Asked Questions

Real-World Examples

At 16px root, 1em = 1rem. Most sites never need to convert these.

1 em = 1 rem

Bumped up a level — 24px when root is 16px. Rem stays 24px everywhere, em would compound.

1.5 em = 1.5 rem

Slightly smaller — 14px at root. Body text on some accessible sites.

0.875 em = 0.875 rem

Double root — 32px. Large display headings.

2 em = 2 rem

points to picas points to type inches picas to type inches points to mm pixels to points

Em to Rem Converter

Key Formulas

Formula

Frequently Asked Questions

Real-World Examples

Related Converters