The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

Web Fonts 57

Figure 5-5: The effect of font-size-adjust on the Impact font (third line)

You can clearly see the difference between the Helvetica Neue (first
line) and Impact (second line) fonts in the first two h1 elements. (Of course,
you are unlikely to ever use these two in the same font stack, but because
they have quite different x-heights, they’re good for illustrative purposes.)
As I mentioned, Helvetica Neue has an x-height ratio of 0.517, which means
the lowercase x is about half the height of the font. By contrast, Impact has
an x-height ratio of 0.7, which means less contrast in height between upper-
and lowercase letters.
The first two lines in the example are not adjusted in any way, so Impact’s
lowercase characters in the second line are considerably taller than Helvetica
Neue’s in the first line—the fonts have the same size, but their metrics are
different. In the third line, however, I set the font-size-adjust value to 0.517
to match the x-height ratio of Helvetica Neue:

h1.adjusted { font-size-adjust: 0.517; }

This adjusts the font size so Impact displays at a smaller size—just over
18.6px, which is slightly more than half of the 36px height set by font-size.
You can see this more clearly if I directly compare the two elements, as
shown in Figure 5-6. Here, the characters without ascenders (lines that rise
above the x-height)—that is, e, x, c, and n—of the adjusted Impact font are
the exact same height as those of the Helvetica Neue font.

Figure 5-6: Characters from the Helvetica Neue font (left) compared to
characters from the Impact font adjusted with font-size-adjust (right)

Unfortunately, a font’s x-height ratio isn’t easily available; you can
either use a graphics package to measure it manually or try to find an
online resource. (I found a calculator made by the online fonts service,
Fontdeck, which works with the fonts installed on your system: http ://
fontdeck.com/support/fontsizeadjust/.)
The major drawback of this property is that, at the time of writing,
Firefox is the only browser that supports it.