Em

Em is a typographic unit used to express measurements in type and page layout. It originates from the width of the em square in a typeface, a conceptual space used in metal type; in practice, 1 em equals the current font size. Thus, at 12 point type, 1 em is 12 points; at 16 pixels, 1 em is 16 pixels. This makes em a relative unit that scales with the text it accompanies.

Em is used to specify font sizes, margins, padding, and other dimensions in both print and web design. The en, a half-em, is another relative unit, and punctuation marks such as the em dash are named for their relation to the em unit in typography.

In CSS and digital typography, 1em is the font size of the element. Sizes expressed in em scale with the element’s own font size, so they compound in nested contexts. For example, if a paragraph uses a base font size of 16px and a child element uses font-size: 1.5em, the child’s font size becomes 24px. If a subsequent child uses font-size: 1em, it remains 24px. Similarly, margins, widths, and line-heights can be specified in em units.

Because ems are relative, they provide scalable typography but can yield unexpected results if font sizes are changed deeply within the document tree. For more predictable results, CSS offers rem, a root-em unit that uses the root element’s font size rather than the element’s own. Related concepts include the em dash, en dash, and the broader use of relative units in layout.