This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

font-size-adjust

Summary

The font-size-adjust property adjusts the font-size of the fallback fonts defined with font-family, so that the x-height is the same no matter what font is used. This preserves the readability of the text when fallback happens.

Overview table

Initial value
none
Applies to
All elements
Inherited
Yes
Media
visual
Computed value
as specified
Animatable
Yes
CSS Object Model Property
fontSizeAdjust
Percentages
N/A

Syntax

  • font-size-adjust: auto
  • font-size-adjust: none
  • font-size-adjust: number

Values

none
Only use the font-size value to determine the size of the font.
number
The value used in calculating the size of the fallback fonts. For the adjusted font size calculation, see Notes.
auto
The aspect value is calculated by the browser for the first font in the font-family list, and used for every font in that list.

Examples

The popular font “Verdana” has an aspect value of 0.58. For comparison, Times New Roman has an aspect value of 0.45. Verdana will be more readable at smaller sizes than Times New Roman. Conversely, Verdana will often look ‘too big’ if substituted for Times New Roman.

<table>
  <tr>
    <td class="demoblock">
      <p class="verdana">Normal "Verdana" font text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus mattis lorem sed fringilla. Duis eu nulla dolor. Donec tempor risus sem, vitae sollicitudin nulla sagittis sit amet. Nulla laoreet augue in libero posuere lobortis. </p>
    </td>
    <td class="demoblock">
      <p class="times">Normal "Times New Roman" font text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus mattis lorem sed fringilla. Duis eu nulla dolor. Donec tempor risus sem, vitae sollicitudin nulla sagittis sit amet. Nulla laoreet augue in libero posuere lobortis.</p>
    <td class="demoblock">
      <p class="adjust">"Times New Roman" with font-size-adjust of 0.58. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus mattis lorem sed fringilla. Duis eu nulla dolor. Donec tempor risus sem, vitae sollicitudin nulla sagittis sit amet. Nulla laoreet augue in libero posuere lobortis.</p>
    </td>
  </tr>
</table>

.demoblock {
    width: 33%;
}

p {
    font-size: 8px;
}

p.verdana {
    font-family: Verdana,"Times New Roman", serif;
}

p.times {
    font-family: "Times New Roman";
}

p.adjust {
    font-family: hoge, "Times New Roman", serif;
    font-size-adjust: 0.58;
}

Notes

In script types that distinguish between uppercase and lowercase letters, such as the Latin script used for English, the height of the lowercase letters relative to the height of the uppercase letters impacts readability at smaller type sizes. This relation is called the aspect value, which is calculated by dividing a font’s x-height by the font’s size.

The font-size-adjust property preserves the readability of text when the first specified font is not available and a fallback or replacement font is used. It adjusts the font-size so the x-height of the fallback or replacement is similar to the x-height of the font it’s replacing.

Specify a value of auto to have the browser calculate the aspect value of the primary font and apply it to fallback or replacement fonts. When specifying a number value, use the preferred aspect value and the browser will apply it to fallback or replacement fonts using the following formula:

c = (p / a) * s

Where:

  • c = adjusted font size
  • p = preferred aspect value
  • a = aspect value of the replacement or fallback
  • s = the font size

As an abstract example, assume you specify a font-size-adjust value of 0.5, your fallback font’s aspect value is .4, and the font-size is 8px. The fallback font is rendered at 10px ((.5 /.4) * 8).

Related specifications

CSS Fonts Module Level 3
W3C Working Draft

See also

Related articles

CSS Font

Fonts

External resources

Related pages

Attributions