Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

font-size adjust

The font-size-adjust property is supposed to make sure that browsers display the font at the size you want even if the font isn't available. Your pages may not look how you want them to if the font you specify isn’t on the user’s PC and the browser substitutes a font that is too big or too small.

Some fonts look smaller than others even if the size is the same. This is because the size and legibility of a font depends on a combination of the font-size and the value of the x-height. The font size is the measure from the baseline of the text to the top of the capital letters. A twelve-point font measures twelve points, or about 1/6 of an inch, from the baseline to its top. The x-height is the measure from the baseline to the top of the lower-case letter X. In general, the lower-case letters are all this high.

The ratio of these two values is called the aspect value (font-size divided by x-height). The higher this ratio is, the easier it is to read a font at smaller sizes.

For example, Verdana has an aspect value of 0.58 but Times New Roman has an aspect value of 0.46. You can easily see the difference. So, you can read Verdana at smaller sizes than Times New Roman. But, Verdana could look too big if the browser substitutes it for Times New Roman at a chosen size.

The font-size-adjust property allows you to specify an aspect value for a tag that preserves the x-height of your first choice font in the substitute font. You enter the value as a number:

{font-size-adjust :0.58;}

If you want to use Verdana, you should include the font-size-adjust property with the value 0.58. If the browser cannot find Verdana, it will use the aspect value of 0.58 to scale a different font. If the browser replaces Verdana with Times Roman, it adjusts the size of the Times Roman face so that it appears to be the same size as the Verdana font.

For example, the Verdana aspect value (0.58) is divided by the aspect value of Times Roman (0.46) to give a scaling factor of 1.26. It then multiples this by the font size. If you had asked for 12 point Verdana, the browser would substitute 15 point Times Roman as a good alternative.

Alternatively, if 14px Verdana was unavailable and an available font had an aspect value of 0.46, the font-size of the substitute would be 14 * (0.58/0.46) = 17.65px.