font-size-adjust

Avatar of Robin Rendle
Robin Rendle on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

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

Browser support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeFirefoxIEEdgeSafari
No3NoNo16.4

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
No115No16.4