X-Height and Readability: Why Some Fonts Feel Larger

Set two fonts at exactly 14px. One fills the text box confidently, the glyphs appear substantial, and the text reads without effort. The other looks smaller, the characters seem to hover on the baseline, and you find yourself reaching for a larger size. Both are 14px — so why the difference?

The answer is almost always x-height. This single metric, the height of a font's lowercase letters, has more influence on perceived size and practical readability than any other single measurement. Understanding it changes how you evaluate fonts and make size decisions in your typographic systems.

The Illusion of Equal Sizes

In digital typography, font size (the CSS font-size property) does not measure what most people assume it measures. It does not measure the height of a capital letter, or the height of a lowercase letter, or even the height of the tallest character in the font. It measures the em square — an abstract unit inherited from metal type, where it referred to the rectangular metal block on which a character was cast.

The em square was designed to encompass all possible characters in a typeface, including the tallest ascenders and lowest descenders plus a small amount of additional clearance. But different typefaces use the em square differently. A font whose lowercase letters are drawn to fill most of the em square will appear large at a given pixel size. A font whose lowercase letters occupy a smaller proportion of the em square will appear small.

This is the origin of the apparent size difference. Font A at 16px and Font B at 16px share the same em square, but if Font A has lowercase letters that reach 60% of the em height and Font B's lowercase letters reach only 48%, Font A will look measurably larger — and will be measurably more readable — at the same nominal size.

What X-Height Actually Measures

The x-height is the height of the lowercase letter "x" measured from the baseline to the top of the letter. The "x" is used as the reference character because it has no ascenders, no descenders, flat tops and flat bottoms — making it the most unambiguous reference for the lowercase body height.

All lowercase letters without ascenders or descenders — a, c, e, m, n, o, r, s, u, v, w, x, z — are designed to match this height (with the usual overshoot correction for rounded letters). Letters with ascenders (b, d, f, h, k, l, t) rise above the x-height. Letters with descenders (g, j, p, q, y) drop below the baseline.

The x-height ratio expresses x-height as a proportion of cap height or em size. A font with an x-height of 480 units out of a 1000-unit em has an x-height ratio of 0.48. A font with an x-height of 580 units has a ratio of 0.58. This ratio is one of the first things professional typographers look at when evaluating a font for a specific use case.

X-Height Ratios Across Popular Google Fonts

Different fonts in the Google Fonts library have strikingly different x-height ratios, and understanding these differences helps explain why they feel so different in use.

High X-Height Fonts

Inter has one of the highest x-heights among serious text fonts, around 0.53–0.55 of its cap height. This was a deliberate design choice by Rasmus Andersson, who built Inter for screen interfaces. The large x-height means Inter appears large and legible at small interface sizes like 11–14px. A button label set in Inter at 14px reads almost as easily as many other fonts at 16px.

Roboto similarly has a high x-height, around 0.52, which contributed to its widespread adoption as Android's system typeface. It needed to perform across a huge range of device resolutions and sizes.

Lato has a generous x-height (roughly 0.51), giving it strong readability at body text sizes.

These high x-height fonts tend to feel modern, efficient, and space-conscious. They are the go-to choices for interfaces, apps, and any context where legibility at small sizes is a priority.

Moderate X-Height Fonts

Source Sans Pro (now Source Sans 3) hits a middle ground with a x-height around 0.48–0.49. It is comfortable across a wide range of uses — not too tall, not too short.

Open Sans was designed with screen readability in mind and has a comfortable x-height, around 0.48.

Nunito has a moderate x-height but is distinguished by its fully rounded letterforms, giving it a soft, approachable quality.

Lower X-Height Fonts

EB Garamond has a significantly lower x-height than the sans-serif fonts above — roughly 0.43–0.44 of cap height. This is faithful to the historical Garamond model, where the relationship between lowercase body size and ascender/descender length creates a characteristically elegant, classical rhythm. At display sizes (18px and up), EB Garamond is beautiful. At 13–14px in UI contexts, it begins to struggle.

Cormorant Garamond goes even further, with an extremely low x-height that creates dramatic ascenders and descenders. It is spectacular in editorial design at large sizes and largely unsuitable for body text.

Playfair Display, despite being labeled a "Display" font, has a moderate x-height but extreme stroke contrast — meaning its thin strokes become effectively invisible at small sizes regardless of x-height.

Impact on Readability and Line Height

X-height affects readability through several interconnected mechanisms.

Legibility at Small Sizes

The primary effect is direct: larger x-height means larger glyph bodies at any given font size. At very small sizes — 11px, 12px, 13px in UI contexts — every pixel counts. A font with a large x-height packs more visual information into each character at small sizes, making individual characters more distinguishable. A font with a small x-height renders lowercase characters with fewer pixels, reducing the visual information available for character recognition.

This is why the Google Fonts Inter has become the dominant choice for developer tools, dashboards, and data-dense interfaces. At 13px — common in developer tools — Inter remains comfortably readable. Many other fonts become visually stressed at the same size.

Perceived Text Size

For the same reason, a high-x-height font at 16px may feel larger than a low-x-height font at 18px. This affects how you set font sizes in practice. If you switch from a high-x-height font like Inter to a lower-x-height font like EB Garamond, you may need to increase your base font size to maintain the same perceived readability — perhaps from 16px to 18–20px.

This is not a flaw in either font. EB Garamond's lower x-height is appropriate for its intended use at larger sizes in editorial contexts. The mismatch only occurs when applying a font outside its intended use case.

Line Height Interaction

X-height and line height are closely related. A font with a large x-height has less optical breathing room between lines at the same line-height value. Consider Inter at line-height: 1.5 — the large lowercase letters nearly fill the inter-line space, creating a dense texture. This is fine for short UI text but can feel crowded for long-form reading.

Fonts with smaller x-heights naturally have more space above the lowercase letters before the next line begins. EB Garamond at line-height: 1.5 has noticeably more apparent air between lines than Inter at the same value.

/* Adjusting line-height for different x-height profiles */

/* Inter: high x-height — needs slightly more leading for long-form reading */
.article-inter {
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  line-height: 1.7; /* More generous than usual to compensate for large x-height */
}

/* EB Garamond: lower x-height — less leading needed at same size */
.article-garamond {
  font-family: "EB Garamond", serif;
  font-size: 1.125rem; /* Slightly larger to compensate for smaller x-height */
  line-height: 1.6;
}

This adjustment is not optional — failing to account for x-height when setting line heights is one of the most common causes of text that looks typographically inconsistent or uncomfortable across font switches.

Choosing Fonts by X-Height for Your Use Case

The practical question is: given a specific use case, what x-height profile should you target?

UI and Interface Design

Prioritize high x-height. Interface text appears at small sizes, often on a variety of display densities, and needs to be legible in short bursts of reading rather than sustained immersion. Inter, Roboto, and similar high-x-height fonts were specifically optimized for this context.

/* High x-height system for UI */
:root {
  --font-ui: "Inter", system-ui, sans-serif;
}

.ui-label {
  font-family: var(--font-ui);
  font-size: 0.75rem; /* 12px — works because of Inter's high x-height */
  line-height: 1.4;
}

Long-Form Reading

Moderate x-height, carefully sized. For editorial and long-form contexts, x-height matters less than the quality and rhythm of the letterforms. A font with a moderate to low x-height is acceptable if the base size is set generously enough (18–20px for body text on screen). Many of the most beloved editorial fonts — Garamond variants, Caslon, Baskerville — have moderate x-heights.

/* Editorial body text — compensate for lower x-height with larger size */
.article-body {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.125rem;     /* 18px — larger to compensate for lower x-height */
  line-height: 1.75;       /* Generous leading for long-form reading */
  max-width: 68ch;
}

Display and Headline Text

X-height matters least at display sizes. At 2rem, 3rem, and above, even fonts with low x-heights have characters large enough to read easily. At these sizes, other qualities dominate: stroke contrast, personality, letter spacing, and overall silhouette. This is the zone where Playfair Display, Cormorant Garamond, and other elegant but small-x-height fonts shine.

Accessibility Contexts

Accessibility-focused design should favor high x-height, as these fonts remain legible at larger text size settings. Users who scale up their browser's default text size are already compensating for visual difficulty — a high x-height font scales gracefully and maintains legibility better than low-x-height alternatives.

X-height is one of those typographic metrics that reveals itself only once you are looking for it — but once you know it, you will see it everywhere, and it will inform every font selection decision you make.