O'Reilly logo

CSS Pocket Reference, 4th Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Name

font-size-adjust

Values:

<number> | none

Initial value:

none

Applies to:

All elements

Inherited:

Yes

Computed value:

Same as declared value

Description:

Defines an aspect value for the element, which is used to scale fonts such that they more closely match each other in cases where fallback fonts are used. The proper aspect value for a font is its true x-height divided by its font size.

How font-size-adjust actually works is to size fonts according to their x-height, which is to say according to the height of lowercase letters. For example, consider a hypothetical font (let’s call it “CSSType”) that, when set to a font size of 100 pixels, has an x-height of 60 pixels; that is, its lowercase “x” letterform is 60 pixels tall. The appropriate font-size-adjust value for CSSType is thus 0.6. Declaring:

p {font: 20px "CSSType", sans-serif; 
   font-size-adjust: 0.6;}

…means that paragraph text should be sized so that lowercase letters are 12 pixels tall (20 × 0.6 = 12), no matter what font family is used. If CSSType is unavailable and the user agent falls back to (for example) Helvetica, the Helvetica text will be sized so that lowercase letters are 12 pixels tall and the uppercase letters will be whatever size results. Since the aspect value of Helvetica is 0.53, its uppercase letters will be 22.6 pixels tall (or a rounded-off value, if the user agent can’t handle fractional pixels). If some other sans-serif font is used and its aspect value is 0.7, the uppercase letters of that text will be 17.1 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required