CSS font-size-adjust is now in Baseline

Rachel Andrew

Published: July 23, 2024

Celebration: This web feature is now available in all three major browser engines, and becomes Baseline Newly Available as of July 23, 2024.

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.

Text displayed at 16px in Verdana and Arial.

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.

Using font-size-adjust.

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.

Using font-size-adjust with the ch-width font metric.

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!