Take a look at these two lines:
This line of text uses Georgia font at 12px.
This line of text uses Garamond font at 12px.
Notice how much smaller the second line appears, not to mention harder to read,
even though they are both set to a font size of 12px. This is due to the different
x-height properties of the two fonts. The x-height of a font is the height of its
lowercase x. In this case the x-height of Garamond is 21% smaller than the x-height
of Georgia, making it appear smaller.
This may not seem like a big deal at first; we can just increase the font size of
Garamond by 26% to compensate for the smaller x-height, right? But what if we use
font-family: georgia, garamond; in a style sheet and the user doesn’t
have the Georgia font? We can’t set a font-size for each font we list,
so the user either gets a reasonably sized Georgia or a tiny Garamond. That’s where
the CSS property font-size-adjust will play its part.
font-size-adjust adjusts the sizes of fonts based on their x-height
property. The value of this property is the ratio of x-height to font-size, or aspect
value. For example, the aspect value of Georgia is 0.48 and Garamond’s is 0.38.
This means that if you have font-size-adjust: 0.48; the size of text
in Georgia will stay the same, but text in Garamond will increase by 26% to meet
an aspect value of 0.48. Here’s an example:
p {
font-size: 12px;
font-size-adjust: 0.48;
}
...
<p style="font-family: georgia;">
The quick brown fox jumps over the lazy dog.</p>
<p style="font-family: garamond;">
The quick brown fox jumps over the lazy dog.</p>
The browser will render this:
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Notice the increase in font size on the second line. No more worrying about legibility
problems due to lack of fonts on the user’s end. But it serves another purpose.
Let’s say we use the ubiquitous Verdana font for normal text, but we don’t like
the way it looks when italicized. So we
choose a serif font, like Times New Roman, when italicizing text instead. The problem we face is that
most serif fonts have a smaller x-height than Verdana resulting in very small italics.
But if we use font-size-adjust: 0.55; our serif font size gets adjusted
like this:
Sans-serif text with some italicized serif text.
I’ll mention a few more things about font-size-adjust before I close.
Here’s a quote directly from the CSS3 specification:
Font size adjustments take place when computing the actual value of 'font-size'.
Since inheritance is based on the computed value, child elements will inherit unadjusted
values. Font size adjustments are applied to all fonts used by child elements, substituted
or not.
—
CSS3 module: Fonts
Although font-size-adjust changes the appearance of text, it does not
change the computed value of the font-size property. This means that
computed line height and em values will still be based on the font-size
property and not the adjusted font size. Whether this is good or bad is arguable
depending on the situation.
font-size-adjust is part of the
CSS2 specification but was removed in the
2.1 revision due to lack of browser support. As of this writing, Mozilla
is the only brower that supports it, but it’s part of the
CSS3 Fonts module and should eventually be supported by all of the latest
browsers. Until then, we’ll just have to keep fiddling with font sizes and sticking
with ubiquitous fonts.