56 Chapter 5
More Font Properties
The CSS3 Web Fonts Module doesn’t just re-introduce the @font-face rule;
it also revives two other font properties that were first proposed for CSS2.
These properties are potentially quite useful for giving you granular con-
trol over your fonts—I say potentially because, as of this moment, they aren’t
widely implemented.font-size-adjust
The only drawback to using font stacks in CSS is that fonts can vary so much
in size; your first choice font may look great at 16px, but if that font isn’t
available, the next fallback may appear smaller or have different propor-
tions and be harder to read at that size. To combat this, the font-size-adjust
property lets you dynamically alter the font-size property to ensure a regular
appearance no matter which font is used from the stack. The font-size-adjust
property takes a single decimal value; here’s the syntax:E { font-size-adjust: number; }The number value is the proportion of the total height that is occupied by
a lowercase x character (known as the x-height). In other words, a font might
be 16px high in total, but the height of the lowercase x might be half that
(8px), which gives an x-height ratio of 0.5 (8 divided by 16):p { font-size-adjust: 0.5; }By using font-size-adjust, you can ensure that no matter which font is
displayed, the x-height always has the same value, and legibility does not
suffer. To illustrate, consider the following code:h1.adjusted { font-size-adjust: 0.517; }
h1.impact { font-family: Impact, serif; }Then, in the following three h1 elements, all with the same values for
font-size, I apply different values to them using their class names, which
you can see in this markup:<h1>Of most excellent fancy</h1>
<h1 class="impact">Of most excellent fancy</h1>
<h1 class="adjusted impact">Of most excellent fancy</h1>The first h1 is rendered in the default Helvetica Neue font, the second
in Impact, and the third also in Impact but with the font-size-adjust prop-
erty applied using the value 0.517, which is the x-height of Helvetica Neue.
You can see the results in Figure 5-5.