CSS font-size-adjust is now in Baseline

The CSS font-size-adjust spot lands successful Chrome today, and becomes portion of Baseline Newly Available. This spot tin thief prevent shifting of your layout erstwhile fallback fonts are loaded, and ensure legibility of fallback fonts astatine smaller font sizes. The font-size-adjust property is portion of Interop 2024, so this is different triumph for nan effort to amended nan interoperability of the web platform.

The problem

When you comparison 2 fonts group to nan aforesaid size, depending connected nan style and size of nan glyphs, nan displayed matter tin return up a very different magnitude of space. As an example, nan pursuing demo shows matter successful Verdana and Arial, both group to 16 pixels.

The quality successful size is accounted for by nan truth that nan aspect value, the tallness of lowercase letters erstwhile compared to uppercase letters successful a font, varies betwixt fonts.

This tin origin 2 problems erstwhile a font pinch a different facet worth is used as a fallback. Firstly nan magnitude of abstraction taken up by nan font will change. Secondly, your prime of fallback font whitethorn beryllium little legible past nan one first specified, peculiarly astatine mini font sizes. This is because the relative tallness of lowercase letters to uppercase ones is simply a cardinal facet in legibility.

How font-size-adjust helps

The font-size-adjust spot lets you set your fallback font to better match nan first font. The pursuing illustration shows nan 2 fonts shown previously, this clip nan 2nd font has been adjusted to lucifer nan first.

This illustration uses a azygous value, a number, which adjusts nan fonts utilizing the default font metric of ex-height. This is nan ratio of nan x-height, the height of a lowercase x successful nan font to font size. You tin besides specify nan font metric used. In nan adjacent example, I person normalized nan fonts utilizing the ch-width keyword, successful summation to nan number.

To spot each imaginable values spot the MDN archiving for font-size-adjust.

It's worthy looking astatine your tract utilizing your fallback font and seeing if a little tweak pinch font-size-adjust tin thief readers who are utilizing nan fallback font have a amended experience, particularly now it's disposable everywhere!