B.40. font-size-adjust

If you've ever compared two different fonts at the same point size and thought that one looked considerably smaller than the other, you have encountered the reason for this property. Correctly setting this property lets the browser adjust for font differences to preserve the apparent size if it needs to use a different font than the one you specified (e.g. if the font you specified was not available on the user's system).

The apparent size of a font has more to do with the height of lowercase letters (the x-height) than with the actual font size. At 100 points, Myriad Web has an x-height of 48 points—lowercase letters are 48% as tall as the font size. This ratio is called the aspect value of the font. In other words, Myriad Web has an aspect value of 0.48. Verdana, however, has an aspect value of 0.58. If you specified Myriad Web as your desired font, but the user's browser substituted Verdana for it because Myriad Web was not available, the text would look larger because of the substitute font's higher aspect value.

If you set the font-size-adjust property to the aspect value of your preferred font, the browser should be able to adjust the sizes of substitute fonts to give them the x-height you were after. This assumes the browser knows (or can detect) the aspect value of the substitute font.

Inherited: Yes

See also: Section B.37font

B.40.1. Value

The aspect value of your preferred font. This is used in combination with the Section B.39font-size property, to adjust the size of a substitute font, so that it is displayed with the same x-height. The special value none disables font size adjustment for the element.

Initial value: none

B.40.2. Compatibility

CSS Version: 2

Not supported in any currently-available browser.

B.40.3. Example

This style rule assigns a set of fonts to the body element and uses font-size-adjust to ensure that whatever font is used, it will have the same x-height as Myriad Web (the preferred font) at 11 points.

body {
  font-family: "Myriad Web", Verdana, Helvetica, sans-serif;
  font-size-adjust: 0.48; /* The aspect value of Myriad Web */
}