liveBook · Manning

X-height

As explained in Web Design Playground

The vertical distance from a font’s baseline to the top of its lowercase letters, excluding ascenders and descenders.

X-height is the vertical distance from a typeface’s baseline to the top of its lowercase letters. Imagine lowercase letters standing on a shared floor: x-height measures how tall their main bodies rise. A medium-to-large x-height, often more than half the font size, usually supports readable text on small screens. section 20.3

When auditioning a typeface, check x-height alongside these related features:

  • Large counters and apertures leave letter shapes more open and legible. section 20.3
  • Low-to-medium stroke contrast keeps extremely thin strokes from disappearing on small screens. section 20.3
  • Pair typefaces only when their legibility characteristics—including x-height—work harmoniously. section 20.3

A quick typeface check

Open Google Fonts, view a typeface, and try lowercase letters such as x, o, a, e, g, and y. Compare their apparent body height and readability, then look for an x-height greater than half the font size. section 20.3

How Web Design Playground covers it

How deep it goes
Defines x-height and supplies a visual half-font-size heuristic, without detailing a formal measurement procedure.
Examples
Uses Google Fonts auditioning and lowercase letters such as x, o, a, e, g, and y.
What you can do after
Evaluate typefaces for small-screen readability by checking x-height alongside counters, apertures, and stroke contrast.
How it connects
Connects x-height with counters, apertures, stroke contrast, typefaces, font size, and legibility.

Also explained in

Compare how 3 books explain x-height →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Design Playground. The section links point to the parts of the book it draws on.