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.
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.
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!
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2024-07-23 UTC.
[{ "type": "thumb-down", "id": "missingTheInformationINeed", "label":"Missing the information I need" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Too complicated / too many steps" },{ "type": "thumb-down", "id": "outOfDate", "label":"Out of date" },{ "type": "thumb-down", "id": "samplesCodeIssue", "label":"Samples / code issue" },{ "type": "thumb-down", "id": "otherDown", "label":"Other" }] [{ "type": "thumb-up", "id": "easyToUnderstand", "label":"Easy to understand" },{ "type": "thumb-up", "id": "solvedMyProblem", "label":"Solved my problem" },{ "type": "thumb-up", "id": "otherUp", "label":"Other" }]