CSS Unit Converter

Nest 1.25em four deep and it becomes 39px, not 20px

em is relative to the parent, so nesting multiplies it. Four elements each set to 1.25em land at 2.441 times the root — 39.06px where the author almost certainly meant 20px. rem is relative to the root and never compounds, which is the entire practical difference between the two units.

How it works

• Converts between px, rem, em, pt and percentages at the CSS reference of 96 dpi.
• Makes the compounding behaviour of em explicit, since that is where the surprises come from.
• Shows what a value becomes when the user changes their root font size, which is what accessibility settings actually do.

rem = px ÷ root font size        (root defaults to 16px)
em  = px ÷ parent font size

1pt = 96 ÷ 72 = 1.3333px    so 12pt = 16px exactly

nested em multiplies: 1.25em inside 1.25em = 1.5625 × root

Worked example

The same 1.25 factor applied as em and as rem, four levels deep.

1. depth 1 — em: 20.00px · rem: 20px
2. depth 2 — em: 25.00px · rem: 20px
3. depth 3 — em: 31.25px · rem: 20px
4. depth 4 — em: 39.06px · rem: 20px
5. 1.25⁴ = 2.4414

The em chain nearly doubles the intended size by the fourth level while every rem element stays at 20px. Neither unit is broken; they answer different questions, and reaching for em when you meant rem is one of the most common CSS sizing bugs.

Reading the result

• The classic failure is nested lists. Set ul { font-size: 0.875em } and each level shrinks again: 14.00px, then 12.25px, then 10.72px. By the third level the text is 33.0% smaller than the root, not the 12.5% the rule appears to say.
• 12pt equals 16px exactly, which is a genuine coincidence worth knowing. The browser default font size and the standard print body size land on the same value at the CSS reference of 96 dpi, so pt and px agree at exactly one useful point and nowhere else.
• rem is the accessible choice for type because it tracks the user's root setting. Someone who has set their browser to 24px sees 1.5rem render at 36px, while a hard-coded 24px stays 24px and ignores them entirely.
• em is still the right unit when you want proportion to local text — padding inside a button that should scale with the button's own label, for instance. The rule of thumb is rem for font sizes and em for spacing that belongs to the element.

Common questions

Should I use rem or em?

rem for font sizes, em for spacing that should scale with the element's own text. rem never compounds, so a component dropped three levels deeper renders identically; em deliberately compounds, which is useful for padding and harmful for type.

Why is my nested text shrinking?

Because em multiplies at every level. A 0.875em rule applied to three nested lists gives 14.00px, 12.25px, then 10.72px. Switch the font-size to rem and every level renders at the same size regardless of depth.

Sources

• MDN — CSS values and units