font-size-adjust property allows you to make alternative fonts, such as the second and subsequent fonts in your font stack more legible by adjusting the ratio of their font size to their x-height. The higher this value is (in general) the more legible the font will be at smaller sizes.
font-size-adjust in CSS Versions:
font-size-adjust: <number> | none | inherit;
number—the aspect ratio, usually of your first choice font. This is then applied to second choice fonts as a scaling factor using the following formula:
y * (a/a') = c
- y = the font-size of your first choice font
- a = the aspect value or number in the font-size-adjust property
- a' = the aspect value of the available font
- c = the font-size to apply to the available font
none—no adjustment should be made to the font size
inherit—the font size adjustment should be the same as the parent element.
font-size-adjust Initial Value:
font-size-adjust Applies To:
This property is inherited.
font-size-adjust Browser Support:
- Firefox 3+
If 14px Verdana (with an aspect value of 0.58) 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. (from W3C)
font-size-adjust Special Notes:
- The legibility of a font is dependant on more than the font-size but also on the relationship between the size and the x-height.
- The higher the aspect ratio is, the more legible a font will be at smaller sizes.
- Font substitution that relies on font-size alone may rapidly render a page illegible.
More font-size-adjust Information
Related Style Properties
Return to the CSS Style Properties Library