EM Unit Calculator

Calculate em values relative to parent font size with nested em computation and px conversion.

Tested tool guide Tested browser tools Checked August 16, 2026

What EM Unit Calculator does, with a checked example

The EM Unit Calculator turns a parent font size and an em multiplier into pixel values, including the cumulative result across nested elements. It resolves the first level against the supplied parent, then carries that computed size into the next level. The usual mistake is treating em as a fixed conversion. It is relative to font size, so repeating 1.5em through a hierarchy produces 24px and then 36px from a 16px parent, not 24px at every level.

Worked example

A concrete input and expected output from the current implementation.

Input

Parent font size: 16 px
EM value: 1.5
Nesting levels: 2

Expected output

Level 1: 24 px
Level 2: 36 px

The first level is 16 * 1.5 = 24px. The second level uses 24px as its parent, so 24 * 1.5 = 36px.

How the result is produced

Level-by-level multiplication

At each level, the calculator multiplies the current parent size in pixels by the entered em value. For nested calculations, that result becomes the parent size for the following level. With a constant factor e and starting size p, level n is p * e^n. Values below 1 shrink at each level, while values above 1 grow.

CSS reference context

The calculation corresponds directly to em values used for CSS font-size: an element's em font size is resolved against its inherited parent font size. For em lengths on other properties, such as padding, the reference is the element's own computed font size. The conversion remains useful, but that font size must be established before interpreting the result.

Good uses

Check whether navigation labels using font-size: 0.9em become too small after several nested menu levels.
Convert a component specification such as 1.125em under an 18px parent into its expected pixel font size.
Trace unexpected text growth when the same em font-size declaration is repeated through nested wrappers.

Limits and checks

The result depends on the entered parent size; the actual page may inherit a different computed font size.
A repeated nesting calculation assumes the same em factor at every level. Different declarations require separate level calculations.
Do not read the results as rem conversions. rem refers to the root element's font size, not each immediate parent.

Common questions

Does 1em always equal 16px?

No. One em equals the relevant font size in its context, so it equals 16px only when that reference size is 16px. For font-size, the reference is the inherited parent size. For most other properties using em, it is the element's own computed font size. Enter the actual parent value instead of assuming a browser default.

Can I use the pixel result for em margins or padding?

Sometimes, but first determine the element's computed font size. An em margin or padding is based on that element's font size, not directly on its parent's size. If the element's font size is 24px, 0.5em spacing is 12px. The calculator's nested font-size result applies only when it establishes the same context.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.