Font selection is full of x-factors, qualities that appeal to the eye or to the needs of a specific design. One of those x-factors is x-height, a measure that has significant impacts on the appearance, space requirements and readability of the type used in all design projects.
What Exactly Is X-Height?
A font’s x-height is the vertical distance from its baseline to the top of the lowercase letters x, v, w and z. Note that rounded letters such as d, p, r and e extend just above the x-height line and below the baseline.
The x-height determines how high lowercase letters appear in relation to their uppercase counterparts. Since well over 90% of characters in everyday documents are lowercase, x-height is a crucial metric even though it often fails to command primary mindshare.
How Point Size and X-Height Are Related
When we specify type in software applications, we select a font and set its point size, which determines its bounding box, the overall height from the bottom its longest descender to the top of its tallest ascender. As you increase a font’s point size, its x-height increases automatically to maintain the shape of the font.
The x-height of a font is most often close to half the height of its capital letters. The higher or lower the x-height is from that mean line determines if a font has a high or low x-height.
Sample Fonts with Various X-Heights
This simple visual illustrates the effects of x-height on simple sample text.
Notice the strong visual contrasts between Bodoni and Merriweather, and between Antique Olive and Futura. Most of the those contrasts are triggered by differences in the x-heights of the fonts.
Many modern fonts have increased x-heights, while most Old Style fonts often have lower x-heights.
When You Should Use High X-Height Type
The x-height of a font has a direct impact on its readability. When the x-height is large, the typeface is easier to read, especially at small sizes, so it’s great for labels, captions and footers. But when type with a very high x-height is set in paragraphs, the round, bottom stories of glyphs appear large, and the ascenders look small.
This creates an overall cramped appearance, and when the text is bolded, the problem is made even worse. To offset a cramped appearance in paragraphs set in high x-height fonts, increase interline spacing (leading).
Text typefaces with large x-heights are designed to increase legibility and readability, especially at small sizes as show in the following paragraph samples.
When You Should Use Low X-Height Type
Fonts with low x-heights are often perceived as stylized, elegant, delicate and understated. Low x-heights provide good contrast between lowercase and uppercase type, and a generous about of interline white space to brighten the appearance of pages. Text set in low x-height type also consume less overall space, making them popular for brochures, flyers and text-heavy collateral.
The Limits to Extreme X-Height Values
As with so many things in life, too much of a good thing can become a problem.
As the x-height of a font rises and approaches its cap height, the length of its ascenders become small and hard to discern.
For example, very high x-height can severely compromise readability as font ascenders minimize in size and the lowercase a and d appear almost identical.
Similarly, very-low x-heights can make lowercase letters hard to discern, severely affecting readability, especially at small point sizes. Some low-height fonts are simply unacceptable for use in small type treatments such as captions and footers. You can offset this effect somewhat with judicious use of interline leading.
Choosing the Right X-Height
Every design is unique, so there are no hard and fast rules to follow when selecting fonts for a specific project. That said, here are some x-height recommendations to consider.
- Select fonts with medium x-heights for long body copy because they are approachable and legible.
- Use slightly higher x-height type for increased readability, especially at small sizes such as captions, labels, copyrights and disclaimers.
- Avoid very high x-heights for body copy since ascenders and descenders are smaller, making it difficult to quickly recognize characters and words.
- Try to create visual harmony by using fonts of similar x-heights in your designs.
- A font that works fine for body text might not work elsewhere in a design, and vice versa.
- Use shorter x-heights for stylistic reasons, branding, or for short body text passages that need to appear lighter or more approachable.
- To add a little white space and breathability to short text pieces, try using a font with a slightly lower x-height.
- Don’t forget that you can adjust tracking, kerning and interline leading to make fonts more readable.
- Be daring on display projects and experiment with x-heights of all sizes to convey the attitude of the brand and the desired mood.
Try Your Own X-Height Comparisons
This article is by no means a definitive discussion of x-height and its effect on typography in your design work. What works in one design might not work in another.
You can learn a lot about the intricacies of x-heights by downloading sample fonts from font vendors’ websites that let you find fonts tagged with low and high x-heights. You can also use a good font manager like FontAgent to view sample paragraph text to compare the effects of x-height variations on the typefaces in your font collection.