HTML and CSS Reference
In-Depth Information
Adjusting Relative Font Sizes
When building a font stack, it's difficult to find fallback fonts that have exactly the same proportions as your
first-choice font. To increase legibility, the CSS3 Fonts module provides the font-size-adjust property, which
adjusts the font size so that the height of lowercase letters is the same regardless of the font used.
Figure 5-9 demonstrates the effect of using font-size-adjust in Firefox, which at the time of this writing is
the only browser that supports it.
Figure 5-9. Using font-size-adjust changes the size of fallback fonts to match the first choice
The first row displays three fonts at 9px without adjustment: a web font called Nobile
( ) designed by Vernon Adams, Verdana, and generic sans-serif.
Verdana is a good match as a fallback font for Nobile, but the generic sans-serif is much smaller, making it
difficult to read. The second row uses font-size-adjust to change the aspect ratio of each font to match that
of Nobile. A font's aspect ratio is defined as being equal to the height of a lowercase “x” divided by font size.
Changing the aspect ratio of the generic sans-serif text in the second row with font-size-adjust makes it
easier to read. It also occupies a similar amount of vertical space as the other fonts.
Finding the aspect ratio of a font is done by trial and error using two identical characters at a large size
surrounded by a border. The styles in aspect_ratio.html in the ch05 folder look like this:
body {
font-family: Nobile, Verdana, sans-serif;
span {
border: 1px solid red;
font-size: 200px;
Search WWH ::

Custom Search