Fandom

HTML & CSS Wiki

Font-size-adjust

649pages on
this wiki
Add New Page
Comments0 Share

The font-size-adjust property is used in CSS and certain HTML elements. It specifies what font size should be chosen based on the height of lowercase letters rather than the height of capital letters.

This is useful since the legibility of fonts, especially at small sizes, is usually determined by the size of lowercase letters rather than by the size of capital letters. This can cause problems when the first-choice font-family is unavailable and its replacement has a significantly different aspect ratio (the ratio of the size of lowercase letters to the size of the font).

To do this in a way that is compatible with browsers that do not support font-size-adjust, it is specified as a number that the font-size property is multiplied by. This means the value specified for the property should generally be the aspect ratio of the first choice font. For example, a style sheet that specifies

font-size: 16px;  font-size-adjust: 0.5;

is really specifying that the lowercase letters of the font should be 8px high (0.5 × 16px).


Values

  • none - Selects the size of the font based only on the font-size property.
  • <number> - Selects the size of the font so that its lowercase letters (as determined by the x-height metric of the font) are the specified number times the font-size. The number specified should generally be the aspect ratio (ratio of x-height to font size) of the first choice font-family. This will mean that the first choice font, when available, will appear as the same size in browsers, whether or not they support font-size-adjust.


HTML example:

<span style="font-family:Arial; font-size:20pt; font-size-adjust:0.5;">QWERTYUIOP</span>


CSS example:

h1 {
    font-family:Arial;
    font-size:20pt;
    font-size-adjust:0.5;
}

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.