X-height

X-height is the height of a lowercase letter with no ascender or descender, measured from the baseline to the top of the 'x'. Since most of what you read is lowercase, x-height does more than any other metric to set how big text looks at a given font size, though cap height, width, weight, and stroke contrast all get a vote. Two typefaces set at the same 16px can differ by a third in apparent size: Helvetica, Verdana, and Inter run tall, while Futura, Garamond, and Bodoni run short and delicate.

Reach for a large x-height when text has to survive rough conditions: small UI labels, dense tables, mobile screens, signage, low light. Reach for a small x-height when you want the elegant editorial voice and the type is big enough to carry it, like a magazine feature opener. The tradeoff is that a tall x-height leaves ascenders and descenders less prominent relative to the lowercase body, which flattens word shapes and often wants extra leading to stay readable.

The trap shows up on font swaps. Change the body typeface and keep the same font-size and your whole layout shifts in apparent weight and size, which is also why a fallback font flashing in before your webfont loads causes a visible jump. CSS gives you tools for this: the ex unit measures one x-height, and font-size-adjust normalizes x-height across a font stack so the fallback matches.