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.

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.

See the Pen font-size-adjust by CSS-Tricks (@css-tricks) on CodePen.

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:

See the Pen font-size-adjust by CSS-Tricks (@css-tricks) on CodePen.

More information

• MDN
• W3C

Browser support