X-height
X-height is the vertical distance from a typeface’s baseline to the height of its lowercase letters, conventionally represented by the letter x.
Everyday Data Visualization
X-height is the height of a typeface's lowercase letters, conventionally measured by the height of the letter x.
- How it is used
- Guides font selection for small visualization text such as labels, annotations, captions, dashboards, and reports.
- How deep it goes
- Defines the baseline measurement and relates it to readability and tone, without giving a numerical measurement or implementation method.
- Examples
- Compares fonts normalized to cap height and contrasts Roboto with Goudy Old Style through enlarged letterforms and Shakespearean text.
- What you can do after
- Evaluate/understand candidate fonts for small text by comparing x-height with white space, counters, weight, and distinguishable letterforms.
Web Design Playground
The vertical distance from a font’s baseline to the top of its lowercase letters, excluding ascenders and descenders.
- How it is used
- Guides typeface selection for readable text on small screens.
- How deep it goes
- Defines x-height and supplies a visual half-font-size heuristic, without detailing a formal measurement procedure.
- Examples
- Uses Google Fonts auditioning and lowercase letters such as x, o, a, e, g, and y.
- What you can do after
- Evaluate typefaces for small-screen readability by checking x-height alongside counters, apertures, and stroke contrast.
Web Design Playground, Second Edition
X-height is the height of the main body of lowercase letters in a typeface.
- How it is used
- Guides typeface selection for readable text on small screens.
- How deep it goes
- Defines the measurement and supplies a practical size heuristic, stopping short of deeper typographic analysis.
- Examples
- Uses x, o, d, h, g, and y, plus Google Fonts auditioning and typeface pairing.
- What you can do after
- Evaluate typefaces for small-screen legibility using x-height alongside counters, apertures, and stroke contrast.
Read how Web Design Playground, Second Edition explains x-height →
Related concepts
- font-size propertycontrasts with · The CSS font-size property specifies the nominal size of an element’s rendered text.
- code readabilityuses · Code readability is the ease with which human readers can perceive and understand source code, including its structure and intent.
- vertical-align propertyused by · The CSS vertical-align property specifies the vertical alignment of inline-level or table-cell content relative to its line or table row.
- apertureproduces · An aperture is a partially enclosed negative space formed by an opening in a letterform.
- counterproduces · An enclosed or partially enclosed area of negative space within a letterform.
- fontpart of · A font is a set of glyphs with a particular typeface design and rendering characteristics such as size, weight, style, or width.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.