X-height is the distance between the baseline and the top of lowercase letters that have no ascenders or descenders, such as x, v, w and z. In typography, x-height is one of the most important vertical metrics of a typeface, because it largely determines how big the text looks and how easily it can be read at a given point size.
The x-height is usually described as a ratio to the em or to the cap height rather than as an absolute size. Two typefaces set at the same nominal size can look very different in size simply because their x-heights differ.
Where the x-height sits in the vertical metrics
Every typeface is drawn on a set of horizontal reference lines. The baseline is where most letters stand, the mean line (also called the x-line) marks the top of the lowercase body, and the cap height marks the top of flat capitals such as H. The x-height is the distance from the baseline to the mean line.
The letter x is used as the reference because it has flat tops and bottoms. Round letters such as o and s are drawn with overshoot, extending slightly above the mean line and below the baseline so that they appear optically the same size as flat letters. Measuring on an o would therefore overstate the x-height by a few units.
| Metric | Measured from and to | Typical share of the em |
|---|---|---|
| X-height | Baseline to mean line | About 0.45 to 0.55 for most text faces |
| Cap height | Baseline to top of flat capitals | About 0.65 to 0.75 |
| Ascender height | Baseline to top of b, d, h, l | About 0.70 to 0.80 |
| Descender depth | Baseline to bottom of g, p, y | About 0.20 to 0.25 |
| Overshoot | Excess of round letters beyond the lines | About 1 to 3 percent of the x-height |
In a font file, the designer stores the value in the sxHeight field of the OpenType OS/2 table, expressed in font units. CSS exposes it as the ex unit, which equals the x-height of the current font, and the font-size-adjust property uses the ratio of x-height to font size to keep fallback fonts visually consistent.
Why x-height controls apparent size and legibility
Readers recognize words mainly by the shapes of lowercase letters, and most of the information in a lowercase letter sits inside the x-height band. A larger x-height gives counters, joins and terminals more room, so letters stay distinct at small sizes and on low-resolution screens.
The point size of a font describes the em square, a design space that contains all glyphs with some margin, not the size of any visible letter. This is why point size alone is a poor predictor of perceived size. A typeface with an x-height ratio of 0.53 at 14 px can look larger than one with a ratio of 0.42 at 16 px.
| X-height ratio | Visual impression | Best suited for |
|---|---|---|
| Small, below about 0.45 | Elegant, classical, airy | Book typography, large display sizes |
| Medium, about 0.45 to 0.52 | Balanced and neutral | General editorial and web text |
| Large, above about 0.52 | Open, robust, compact lines | User interfaces, small text, signage |
A large x-height has a cost. When the lowercase body grows, ascenders and descenders become relatively short, and these extensions are what distinguish pairs such as n and h or a and d. A very large x-height can therefore reduce word-shape distinctiveness and make text feel monotonous in long passages.
X-height compared with related typographic measures
X-height is often confused with neighboring vertical and spacing measures in typography. The comparison below clarifies what each one describes and why it matters when choosing or setting type.
| Concept | What it describes | Relationship to x-height |
|---|---|---|
| Font size | Height of the em square | X-height is a fraction of it, varying by typeface |
| Baseline | Line on which letters stand | Lower boundary of the x-height |
| Leading | Vertical distance between baselines | Larger x-heights usually need more leading |
| Tracking | Uniform spacing across text | Large x-height faces at small sizes benefit from slight positive tracking |
| Cap height | Height of flat capitals | Ratio to x-height defines how prominent capitals look |
The relationship with leading is the most practical one. Because a tall lowercase body fills more of each line, the visible white band between lines shrinks. Text set in a large x-height typeface with the same line height as a small x-height face will look denser and harder to track from line to line.
Working with x-height in practice
X-height matters most in three situations: choosing a typeface for a size and medium, pairing two typefaces, and specifying fallback fonts. In each case the goal is to make the visible size of lowercase text deliberate rather than accidental.
| Situation | Recommended choice | Reason |
|---|---|---|
| Interface text at 12 to 14 px | Typeface with a large x-height | Keeps letters distinct at small pixel sizes |
| Long-form print reading | Medium x-height with generous leading | Preserves word shapes and comfortable rhythm |
| Pairing a serif with a sans | Match x-heights rather than point sizes | Mixed text then looks the same size |
| Web font with system fallback | Use font-size-adjust or matched metrics | Limits layout shift while fonts load |
| Small print such as captions | Avoid faces with a small x-height | Prevents the text from looking undersized |
Common mistakes follow a pattern: comparing typefaces at equal point size and judging them by apparent size, pairing fonts whose x-heights clash so that one looks bold or shrunken next to the other, and keeping the same line height after switching to a face with a larger lowercase body.
X-height in variable and multi-size typefaces
Some type families are drawn in optical sizes, separate designs for caption, text and display use. The caption cuts typically have a slightly larger x-height, wider spacing and sturdier details, while the display cuts have a smaller x-height and finer contrast. A variable font with an optical size axis can interpolate these proportions continuously, adjusting x-height and spacing automatically as the font size changes.
In simple terms
X-height is how tall the small letters are, measured by the letter x. Two fonts can be set to the same size and still look different, because one has tall small letters and the other has short ones.
Fonts with tall small letters look bigger and are easier to read when the text is tiny, such as on a phone screen or a medicine label. Fonts with shorter small letters often look more elegant and suit larger text such as headlines or printed books.
A practical example
A product team is building a mobile banking app and tests two candidate typefaces for transaction lists set at 13 px. The first face has an x-height ratio of about 0.43, the second about 0.53. On real devices, the second face makes merchant names and amounts noticeably easier to read, even though both are technically the same size.
The team chooses the second typeface, then raises the line height from 1.3 to 1.45 because the taller lowercase body made rows look crowded. For the system fallback that displays while the web font loads, they set font-size-adjust to 0.53, so the fallback renders at a matching x-height.
The result is legible small text and almost no visible jump when the custom font replaces the fallback during loading.