x-height
The x-height is the height of lowercase letters (specifically 'x') in a typeface, excluding ascenders and descenders. A larger x-height generally improves readability at small sizes, which is why many screen-optimized fonts have tall x-heights.
Example
In Practice
X-height is one of the most reliable predictors of legibility at small sizes. Fonts with a tall x-height like Inter and Open Sans stay readable at 12 and 14 px; fonts with a low x-height like Raleway can become illegible below 16 px. When choosing a body font for a UI or documentation project, prefer a tall x-height unless the design calls for a specific aesthetic. Browse fonts by x-height in the font catalog.
Common Mistakes
The common mistake with most typographic terms is applying them without considering how they interact with other settings. Type is a system: changing kerning affects tracking, changing size affects leading, changing measure affects line-height. Test changes in context rather than in isolation.
X-height as the readability dial
X-height decides how large a font looks at the same nominal size. At 14px, body text with a tall x-height like Inter keeps counters open and strokes legible, while a low-x-height face like Raleway starts to feel delicate and can fall below a comfortable reading size. The difference shows in uppercase too, where short ascenders make a text block look denser.
When you pair fonts, mismatched x-heights are the most common reason a combination feels off: a heading with a huge x-height next to body text with a small one makes the text look tinier than it is. Compare fonts by setting the same size and looking at the lowercase a and e, not the capitals. The fonts catalog notes x-height where it matters, and the pairing pages recommend combinations that already align.
Try It
Open one of the Font Blend tools below to see x-height applied to real text.