The font-size-adjust property is used to specify the size of the font based on the x-height (height of lowercase letters) of the font instead of the main height of the font.
On the web, you can’t always guarantee what font family is going to be used. Using the font-family property, you can specify a list of font families, starting with the font family of choice, and then a list of fallbacks for when the family of choice is not available or fails to load for any reason.
But not all font families have the same characteristics and look the same at different sizes. For example, a sans-serif font family is usually more legible at certain small sizes than serif fonts are at the same sizes. This is mainly because of the difference in the size of the lowercase letters of the font.
The font size is determined by the height of the font, and the x-height of the font is the height of the lowercase letters (usually the letter ‘x’ is used as a reference, hence the x-height name).
Using the height and x-height of a font, every font has an aspect ratio, which is the ratio of the x-height to the height of the font.
More precisely, the aspect ratio is calculated by dividing the x-height of the font by the font size (its height).
The font-size-adjust property is used to define the size of the font based on the x-height of the font instead of the height of the font. It is very useful because it allows us to adjust the font size of a certain font face to make it more legible, particularly if you have to use a secondary font face whose aspect ratio is not the same as that of the primary font family you are using.
text-size-adjust.
The value of the font-size-adjust is then set so that it is equal to the value of the aspect ratio of the primary font. For example, if your primary font has an aspect ratio of 0.58, then you would use font-size-adjust: 0.58 in order to make sure that any secondary fonts—including any replacement fonts—will respect that aspect ratio and be adjusted to that value if/when they are used.
The following is an example that uses two font families: ‘Verdana’ as a font of choice, and ‘Times New Roman’ as a replacement font. The example is taken from this tool. The tool shows the aspect ratio of the first-choice family, which in this case is ‘Verdana’. Then, it shows how the two fonts will look like if no font size adjustment is applied. And then it shows how the font ‘Times New Roman’ is adjusted to the same x-height as ‘Verdana’ by using the font-size-adjust property with the value of the ‘Verdana’ font’s aspect ratio.
font-size-adjust property. Red lines show the x-height of the font.
The tool mentioned here is a great way to visualize how the font-size-adjust property works. Another tool by the same developer is also available that allows you to get the aspect ratio of all of the fonts installed on your system as a table of aspect ratios.
In order for the font-size-adjust property to be backwards-compatible with browsers that don’t support it, it is specified as a number that the font-size property is multiplied with. So, browsers that do support it will adjust the font sizes of replacement fonts, and browsers that don’t support it will just ignore it and the result of the font rendering will not be affected. As mentioned earlier, the value of the font-size-adjust property is usually the aspect ratio of the first-choice font that you want all the replacement fonts to be adjusted to. Example:
font-size: 20px;
font-size-adjust: 0.6; /* 0.6*20px = 12px lowercase letters for adjusted fonts; where 0.6 is the aspect ratio of the first-choice font */
Official Syntax
-
Syntax:
font-size-adjust: none | <number>
- Initial: none
- Applies To: all elements
-
Animatable: yes, as a
<number>
Values
- none
-
No font size adjustment is made. The font size is chosen based on the
font-sizeproperty only. - <number>
-
The font size is chosen so that the x-height of the font is the
<number>given multiplied by the specifiedfont-sizevalue.The specified
<number>is usually the aspect ratio of the first-choice font (the first font specified in thefont-familyproperty).
Examples
The following specifies a list of font families as fallbacks to the first font in the list. The font-size-adjust property is used to make sure the fallback fonts adjust so that their aspect ratios matches that of the first font in the list.
p {
font-family: Calibri, Verdana, sans-serif;
font-size: 20px; /* using px in this example just to make aspect ratio calculations easier */
font-size-adjust: 0.469; /* aspect ratio of the Calibri font family */
}
Live Demo
Replace the font families and aspect ratio in the following example with ones of your own and see how the font-size-adjust property works.
The demo currently only works in Firefox.
View this demo on the Codrops Playground
The following is the result of applying the font-size-adjust property to an example using “Calibri” as the first-choice font, and sans-serif as the fallback font. You can see how the fallback font’s x-height changes after the font-size-adjust property is applied.
font-size-adjust to a fallback font whose aspect ratio is different from that of the first-choice font.
Browser Support
The font-size-adjust property currently only works in Firefox.