The CSS font-size-adjust property lands in Chrome as we speak,
and turns into a part of Baseline Newly Accessible. This property can assist forestall
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 trouble to enhance the interoperability of the
internet platform.
The issue
While 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 reveals 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 could trigger two issues when a font with a distinct 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, notably at small font sizes. It is because the
relative peak of lowercase letters to uppercase ones is a key think about
legibility.
How font-size-adjust helps
The font-size-adjust property enables you to regulate your fallback font to higher
match the primary font. The next instance reveals the 2 fonts proven
beforehand, this time the second font has been adjusted to match the primary.
font-size-adjust.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
peak of a lowercase x within the font to font measurement. You too can specify the font
metric used. Within the subsequent instance, I’ve normalized the fonts utilizing the
ch-width key phrase, along with the quantity.
font-size-adjust with the ch-width font metric.To see all attainable values see the
MDN documentation for font-size-adjust.
It is value taking a look at your web site utilizing your fallback font and seeing if just a little
tweak with font-size-adjust can assist readers who’re utilizing the fallback font
have a greater expertise, particularly now it is accessible in every single place!