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 |