CSS font-size-adjust is now in Baseline  |  Blog  |  web.dev

The CSS font-size-adjust property lands in Chrome today,
and becomes part of Baseline Newly Available. This property can help prevent
shifting of your layout when fallback fonts are loaded, and ensure
legibility of fallback fonts at smaller font sizes. The font-size-adjust
property is part of
Interop 2024,
so this is another win for the effort to improve the interoperability of the
web platform.

The problem

When you compare two fonts set to the same size, depending on the shape and size
of the glyphs, the displayed text can take up a very different amount of space.
As an example, the following demo shows text in Verdana and Arial,
both set to 16 pixels.

The difference in size is accounted for by the fact that the aspect value,
the height of lowercase letters when compared to uppercase letters in a font,
varies between fonts.

This can cause two problems when a font with a different aspect value is used
as a fallback. Firstly the amount of space taken up by the font will change.
Secondly, your choice of fallback font may be less legible then the one
first specified, particularly at small font sizes. This is because the
relative height of lowercase letters to uppercase ones is a key factor in
legibility.

How font-size-adjust helps

The font-size-adjust property lets you adjust your fallback font to better
match the first font. The following example shows the two fonts shown
previously, this time the second font has been adjusted to match the first.

This example uses a single value, a number, which adjusts the fonts using the
default font metric of ex-height. This is the ratio of the x-height, the
height of a lowercase x in the font to font size. You can also specify the font
metric used. In the next example, I have normalized the fonts using the
ch-width keyword, in addition to the number.

To see all possible values see the
MDN documentation for font-size-adjust.

It’s worth looking at your site using your fallback font and seeing if a little
tweak with font-size-adjust can help readers who are using the fallback font
have a better experience, especially now it’s available everywhere!