font-size-adjust

This property gives developers the ability to set the font-size of an element depending on the size of its lowercase letters, rather than the uppercase letters.

.element {
  font-size: 22px;
  font-size-adjust: .5;
}

In this case the lowercase letters of the font would be 11px in height, since 22 x .5 = 11.

When loading fonts there’s likely to be a different aspect ratio between the lowercase letters of a fallback font and the newly loaded typeface, so font-size-adjust is useful to control the amount of reflow when we declare a new font-family and see the Flash of Unstyled Text (FOUT).

In the demo below, it’s possible to toggle this property on and off to show how a web font like Chaparral differs from the x-height and alignment of characters in Times, the fallback font. But beware, this property is only supported by a small number of browsers at the moment.

This can have dramatic effects when set on large portions of body text, and substantially improve the flicker that occurs when switching between fallback and the newly loaded font:

More information

• MDN
• W3C

Browser support