Nerd since 1984

Take a look at these two lines:

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:

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:

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.