WebspaceWorks Resources

Tools: Aspect values, x-widths for fonts

[21st October, 2008] Updated with Vista font measurements, and those of a selection of typefaces now common on unix/linux (DejaVu, GNU Free & Liberation).

The aspect value of a font is the ratio between its x-height and font-size and can be used as an indicator of legibility, with larger aspect values tending to be more legible than lower ones, especially when viewed at small sizes. Conversely, fonts with small aspect values become more legible when set at larger font-sizes.

The CSS3: Fonts Module will use aspect values in a re-implementation of the font-size-adjust property that allows font sizes to be adjusted to preserve a rendered x-height (and hence legibility) across all members of a font-family, regardless of what individual aspect values may be.

Aspect values though are just part of the story. Fonts with large aspect values can start to get rather ugly when used at larger sizes, and a large aspect value with a small width can become less legible due to a rather cramped appearance (compare Verdana against Tahoma to get a feel for this difference).

The following reference tables list fonts in alphabetical order and show their aspect values and the associated x-widths as measured in Photoshop for fonts at 100pt size. Aspect values from W3C for the few fonts where they provide measurements are, with one exception, generally higher than the figures shown here. It is not clear why this should be and photoshop measurements were double checked before building these tables.

Table 1: Sans-serif fonts @ 100pt size
Font aspect value x-width
Arial 0.52 0.48
Arial Black 0.52 0.66
Calibri 0.46 0.40
Candara 0.47 0.46
Century Gothic 0.53 0.49
Corbel 0.46 0.44
DejaVu Sans 0.55 0.54
DejaVu Sans Condensed 0.55 0.50
DejaVu Sans Light 0.55 0.50
Eurostile 0.47 0.41
Franklin Gothic 0.49 0.45
Futura 0.51 0.37
Gadget 0.55 0.57
Geneva 0.55 0.48
Gill Sans 0.45 0.46
GNU Free Sans 0.53 0.47
Goudy Sans 0.48 0.40
Helvetica 0.52 0.49
Helvetica Neue 0.52 0.51
Impact 0.65 0.45
Liberation Sans 0.53 0.48
Lucida Grande 0.53 0.52
Lucida Sans Unicode 0.53 0.52
Myriad 0.48 0.44
Optima 0.47 0.45
Serpentine BoldBold 0.47 0.73
Stone Sans 0.52 0.57
Tahoma 0.55 0.49
Trebuchet MS 0.52 0.49
Verdana 0.55 0.53
Table 2: Serif fonts @ 100pt size
Font aspect value x-width
Baskerville 0.45 0.48
Bernhard Modern 0.34 0.41
Big Caslon 0.47 0.50
Book Antiqua 0.46 0.47
Bookman Old Style 0.47 0.56
Calisto MT 0.47 0.50
Cambria 0.47 0.47
Century 0.46 0.50
Century Schoolbook 0.46 0.50
Cochin 0.37 0.53
Constantia 0.45 0.48
DejaVu Serif 0.52 0.56
DejaVu Serif Condensed 0.52 0.50
Didot 0.43 0.49
Garamond 0.38 0.44
Georgia 0.48 0.49
GNU Free Serif 0.45 0.47
Goudy Old Style 0.40 0.45
Hoefler Text 0.44 0.50
Humana Serif 0.50 0.50
Janson Text 0.43 0.46
Liberation Serif 0.46 0.49
Minion 0.45 0.47
New York 0.55 0.57
Palatino 0.46 0.47
Times New Roman 0.45 0.48
Table 3: Monospace fonts @ 100pt size
Font aspect value x-width
Andale Mono 0.51 0.44
Consolas 0.49 0.49
Courier
Courier New 0.43 0.50
DejaVu Mono 0.55 0.54
GNU Free Mono 0.42 0.50
Liberation Mono 0.53 0.52
Lucida Console 0.53 0.52
Table 4: Script/Display/Decorative fonts @ 100pt size
Font aspect value x-width
URW Alcuin SCT 0.51 0.50
American Typewriter 0.51 0.62
Barbedor 0.49 0.41
Caflisch Script 0.37
Chalkboard 0.53 0.46
Charlemagne 0.74 0.71
Comic Sans MS 0.55 0.53
Copperplate 0.44 0.49
Corsiva 0.60 0.57
Flemish Script 0.28
Herculanum 0.61 0.53
Marker Felt 0.62 0.43
Papyrus 0.46 0.49
Sand 0.69 0.58
Textile 0.68 0.61

N.B. The correct definition of a font’s aspect value is that it is the x-height of a font divided by its font-size. A number of reference websites around the ’net incorrectly specify this as being the other way around, would would lead to the nonsensical result of legibility decreasing as x-height became larger!!


Webspace Works: Effective website design, development & search engine optimisation

Simply effective, web design that works!

W3Csites.com Web Standards Group: Promoting Accessibility and standards across the internet This page uses valid CSS
This page uses valid XHTML 1.0 Transitional This page works in all modern browsers Sitening perfect score Real Design Network Approved