This example demonstrates how the font-size-adjust property can be used to retain the same aspect value across fonts. The Verdana font has a relatively high aspect value of 0.545, which means that the lowercase letters are relatively tall compared to uppercase letters. This makes the text in small font sizes appear legible. However, the Times font has a lower aspect value of 0.447, so the text is less legible at small sizes. If Verdana is the first-choice font and Times is the fallback font, specifying the font-size-adjust property can help to retain the same aspect value in Times. So if the font falls back to Times, the text will maintain a similar level of legibility as it would have with Verdana.
Similarly, the cap-height to font size ratio in Verdana is 0.73 and that in Times is 0.66. When font-size-adjust property is applied to Times to adjust its uppercase letters to match the ratio in Verdana, the Times font displays in adjusted font size ((0.73 / 0.66) * 14) 15.48px.
<p class="verdana">
A: This text uses the Verdana font (14px), which has relatively large
lowercase letters.
</p>
<p class="times">
B: This text uses the Times font (14px), which is hard to read in small sizes.
</p>
<p class="times adjtimesexheight">
C: This text in 14px Times font is adjusted to the same aspect value as the
Verdana font, so lowercase letters are normalized across the two fonts.
</p>
<p class="times adjtimescapheight">
D: This text in 14px Times font is adjusted to the same cap-height to font
size ratio as the Verdana font, so uppercase letters are normalized across the
two fonts.
</p>
.times {
font-family: Times, serif;
font-size: 14px;
}
.verdana {
font-family: Verdana, sans-serif;
font-size: 14px;
}
.adjtimesexheight {
font-size-adjust: 0.545;
}
.adjtimescapheight {
font-size-adjust: cap-height 0.73;
}
Without font-size-adjust in B, the switch from Verdana font to Times font could result in a noticeable decrease in legibility due to its lower aspect value. In C, notice that only one value is specified for the font-size-adjust property, so the default <font-metric> value ex-height is used. D shows how the font would look compared to A if its uppercase letter height is adjusted.