CSS font-size-adjust is now in Baseline  |  Weblog  |  net.dev

The CSS font-size-adjust property lands in Chrome at this time,
and turns into a part of Baseline Newly Obtainable. This property will help stop
shifting of your structure when fallback fonts are loaded, and guarantee
legibility of fallback fonts at smaller font sizes. The font-size-adjust
property is a part of
Interop 2024,
so that is one other win for the hassle to enhance the interoperability of the
net platform.

The issue

If you evaluate two fonts set to the identical measurement, relying on the form and measurement
of the glyphs, the displayed textual content can take up a really completely different quantity of area.
For example, the next demo exhibits textual content in Verdana and Arial,
each set to 16 pixels.

The distinction in measurement is accounted for by the truth that the side worth,
the peak of lowercase letters when in comparison with uppercase letters in a font,
varies between fonts.

This may trigger two issues when a font with a special side worth is used
as a fallback. Firstly the quantity of area taken up by the font will change.
Secondly, your alternative of fallback font could also be much less legible then the one
first specified, significantly at small font sizes. It’s because the
relative top of lowercase letters to uppercase ones is a key consider
legibility.

How font-size-adjust helps

The font-size-adjust property helps you to modify your fallback font to raised
match the primary font. The next instance exhibits the 2 fonts proven
beforehand, this time the second font has been adjusted to match the primary.

This instance makes use of a single worth, a quantity, which adjusts the fonts utilizing the
default font metric of ex-height. That is the ratio of the x-height, the
top of a lowercase x within the font to font measurement. You can even specify the font
metric used. Within the subsequent instance, I’ve normalized the fonts utilizing the
ch-width key phrase, along with the quantity.

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

It is price taking a look at your website utilizing your fallback font and seeing if somewhat
tweak with font-size-adjust will help readers who’re utilizing the fallback font
have a greater expertise, particularly now it is obtainable all over the place!