x-height

The x-height is one of the most consequential measurements in type design — and one of the most important factors for choosing a font that will actually be readable on screen. It refers to the height of lowercase letters without ascenders or descenders, measured from the baseline. The letter 'x' is used as the reference because its flat top and bottom make the measurement unambiguous.

Fonts with a large x-height relative to their cap-height tend to feel more legible at small sizes on screens. This is why Inter and Roboto — both designed with digital readability as a primary concern — have notably tall x-heights. The lowercase letters feel almost as substantial as the capitals, which means text remains readable even at 12–13px.

/* Inter has a high x-height — comfortable for small UI text */
body {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* EB Garamond has a lower x-height — more elegant but needs larger size */
.body-serif {
  font-family: 'EB Garamond', serif;
  font-size: 18px;
  line-height: 1.7;
}

A low x-height (common in classical serif typefaces like Garamond) creates a more refined, literary feel but demands a larger font-size to maintain legibility. This is why print-derived serif fonts often need to be set 2–4px larger than their sans-serif counterparts when used on the web.

The x-height is also deeply tied to aperture — fonts with generous x-heights typically also have wider apertures, both contributing to open, legible letterforms. When comparing fonts on FontFYI, the x-height difference is often the clearest visual signal of how each font will perform in body text versus headline use.

In CSS, there's actually an ex unit — equal to the x-height of the current font. It's rarely used in practice but can be handy for sizing small decorative elements that should scale proportionally with lowercase text.