Widely available Useful in specialized typographic tuning, but less common and less predictable than em or rem.

ex unit

The ex unit is based on the x-height of the current font. It is a niche text-relative unit that can align sizing more closely to lowercase letter height.

UnitsTypographyRelative sizing

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.length.ex
1
12
1
1
18
1
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.inline-icon {
  width: 1ex;
  height: 1ex;
  vertical-align: middle;
}
.superscript {
  font-size: 0.8ex;
}

Live demo

Inline icons

CSS inlineicon demo.

PreviewFullscreen

Superscriptcharactersize

CSS Superscriptcharactersize demo.

PreviewFullscreen

rowbetweenadjust

CSS rowbetweenadjust demo.

PreviewFullscreen

Use cases

  • Typography fine-tuning

    Adjust small layout relationships when lowercase letter height is more relevant than full font size.

  • Font-aware details

    Use ex for nuanced sizing in editorial or text-heavy interfaces with carefully chosen typefaces.

Cautions

  • ex varies significantly across fonts, so portability is weaker than with more common relative units.
  • Prefer em or rem unless x-height specifically matches the design problem.

Accessibility

  • Text-relative units can help responsive typography, but uncommon units require extra testing.
  • Verify readability and zoom behavior across fallback fonts and platforms.

Related links