EM to PX converter

The formula depends on the parent

px = em × parent font size

Parent 16px:  1.25em = 20px
Parent 14px:  1.25em = 17.5px
Parent 20px:  1.25em = 25px

That is the practical difference from rem: the same em value means different things in different places, so “what is 1.25em?” has no answer without context. Set the parent field above to the real computed size and the number becomes meaningful.

Finding the parent font size

1. Open devtools and select the element you care about.
2. Switch to the Computed panel — not Styles, which shows the declared value.
3. Read font-size. That is a resolved pixel value after all inheritance.
4. For a font-size declared in em, select the parent element and read its computed size instead.

The two-bases problem

One rule can use two different bases at once, and this catches everyone at least once.

/* Parent computes to 16px */
.badge {
  font-size: 0.75em;   /* 0.75 × 16 = 12px   (parent's size) */
  padding: 0.5em;      /* 0.5  × 12 = 6px    (this element's size) */
}

The padding is 6px, not 8px, because font-size resolved first and everything else on the element then resolves against the result. If a component’s spacing comes out smaller than you expected, this is almost always why.

Common em values at a 16px parent

em inside a media query

A special case worth knowing: inside @media, em is always relative to the browser’s initial font size — the default or the user’s chosen size — and never to any font size you declared. So @media (min-width: 48em) fires at 768px for a default user, and at 960px for someone whose default is 20px, which is usually exactly the behaviour you want. Crucially, it is unaffected by a project that sets html { font-size: 62.5% }, which is why em breakpoints are more robust than rem ones in such projects.

Auditing an existing component

Converting a component’s em values to px is a good way to check it is internally consistent. If the padding, gap and radius all land on the same spacing grid at the base size, the component will scale cleanly. If one of them is 6.5px, something was tuned by eye and will look wrong at a different size.