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

Browser support

Chrome Safari Firefox Opera IE Android iOS
Nope Nope Yep Nope Nope Nope Nope
This comment thread is closed. If you have important information to share, please contact us.
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag