Font Metrics and Vertical Rhythm Explained
Readable text depends on font metrics most designers never inspect. Here is how metrics shape vertical rhythm and what to do about it. Font metrics are the measurements that define how a font occupies space: the ascent, descent, line gap, cap height, and x-height. These metrics are baked into the font file, and they determine how text flows vertically even before you apply any CSS. Understanding metrics is the difference between guessing at line heights and computing them, and it is the foundation of vertical rhythm, the consistent vertical spacing that makes long text feel organized rather than random. The Metrics That Matter Every font defines an ascent, which is the distance from the baseline to the top of the tallest glyph, and a descent, which is the distance from the baseline to the bottom of the lowest glyph. The sum of ascent and descent, plus an optional line gap, is the natural line height of the font. Two fonts at the same font size can have very different natural line heights because their metrics differ, which is why the same line-height value produces different visual spacing across fonts. The x-height is the height of lowercase letters, and it is the metric that most affects perceived size and readability.