Aspect values for web fonts

What are "aspect values" about?

They are an attempt to cater for the fact that the perceived, or practical, size of a font may be different from its height denoted by (say) a px value. They attempt to bring subjective sizes into play.

You take the height of the lower-case "x" and compare that to the height of the font in normal px terms. For example, Verdana is quoted to have the value 0.58, while Times New Roman is quoted to have the value 0.46. The logic says that if you take the font size (in px) for some Times New Roman text, and multiply by 0.46, and divide by 0.58, you can apply this to some Verdana text (as a px value), and you will get about the same perceived text size. So 16px Times New Roman is about equivalent to 12.7px Verdana. (In theory!)

The application of "aspect values "

The CSS2 application is:

.someselector {
font: 14px Verdana, Arial, sans-serif;
font-size-adjust: 0.58 }

The idea is that a conforming browser, if it can't find Verdana on the user's system, will use the "next best" font, but adjust its height (from 14px) to ensure that the aspect value remains true. Arial has a smaller aspect value than Verdana, so it will be given a larger font-size than 14px, perhaps 15px.

There are a number of problems with this:

  • The theory is flawed.
  • It only applies to a font-family, not to alternatives to main text.
  • It isn't supported by the most common browsers.

But the logic of using values other than the font-height is sound!

This CSS property is changing:

  • In CSS2, the "font-size-adjust" value should equal the aspect value of the first font-family. That is a flaw, because there needn't actually be anything other than the generic family. (However, a proposed erratum of 2001 says "font-size-adjust should be applied to the first choice font as well").
  • In CSS2.1, which is not yet a recommendation, "font-size-adjust" doesn't exist at all!
  • The CSS3 Font Module, which is not yet a recommendation, re-introduces "font-size-adjust", and doesn't say it should equal the aspect value of the first font-family. This is more logical.

Some results

The height of "x", or indeed of any letter, it a pretty limited measure by itself. Width is also important. Verdana and Georgia are "wide" fonts to an extent that is not revealed adequately by their aspect values.This is shown by the text lengths below. But for other fonts it is probably close enough, and even for these wide fonts it is better than nothing. (Courier New is even wider, but this may be an anomaly, because it is a monospace font).

The text used to measure the line length (with a wide-enough viewport) was:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

The browser used for the measurements was IE 6 (on W2000). Photoshop was used for the measuring. Where a percentage is given, it is relative to the corresponding value for Times New Roman, higher up in the column.

 
Family name Measured aspect value Text length Adjusted text length Adjusted font size
These are on my W2000 PC. These use the actual x-height at 100px. These are the lengths of the first sentence of "Lorem ipsum " at 16px. These are calculated values. "Text length" is adjusted by the ratio of "measured aspect value". These are calculated values. "16px" is adjusted by the ratio of "measured aspect value".

Times New Roman

0.45 (100%) 739 pixels. (100%) 739 pixels. (100%) 16px.
Courier New 0.43 (96%) 1234 pixels. (167%) 1291 pixels. (175%) 16.6px.
Arial 0.52 (116%) 853 pixels. (115%) 738 pixels. (100%) 13.8px.
Georgia 0.48 (107%) 866 pixels. (117%) 800 pixels. (108%) 15px.
Tahoma 0.55 (122%) 882 pixels. (119%) 722 pixels. (98%) 13.1px.
Trebuchet MS 0.52 (116%) 895 pixels. (121%) 775 pixels. (105%) 13.8px.
Verdana 0.55 (122%) 1031 pixels. (140%) 844 pixels. (114%) 13.1px.

Discussion

It won't be possible to rely on "font-size-adjust" in the next few years, because it isn't supported in the most common browsers. It isn't supported by IE 5, IE 6, or Opera 7.23. It is supported by Firefox 0.8 and Netscape 7.1. They apply the CSS3 specification, and apply the value even to the first font in the family. And it is probably being withdrawn from CSS2.1.

It is revealing that the "adjusted font size" for Arial and Verdana are close to the typical font-size specification used on perhaps the majority of web sites, see comparisons between font styles. It is as though authors are explicitly adjusting an assumed-default of 16px "Times New Roman". For someone like me whose browser default is this value, a typical web site shows such text at a satisfactory size.

Aspect values stated by W3C

It appears that all aspect values quoted on the web originated with the W3C CSS2 recommendation. Some of them differ from my own measurements, although not by large amounts. For completeness, here is the correspondence, for those fonts that I have on my PC.

Family name Stated aspect value Measured aspect value
These are in the W3C order. These are values quoted by W3C. These use the actual x-height at 100px.
Verdana 0.58 0.55
Comic Sans MS 0.54 0.56
Trebuchet MS 0.53 0.52
Georgia 0.50 0.48
Myriad Web 0.48 0.48
Minion Web 0.47 (This was only ever supplied by MS as part of the IE 4 supplemental font pack add-on, and is not on my PC).
Times New Roman 0.46 0.45
Gill Sans 0.46 (Not on my PC).
Bernhard Modern 0.4 (Not on my PC).
Caflisch Script Web 0.37 (Not on my PC).
Flemish Script 0.28 (Not on my PC).