Preserving the x-height of Your Preferred Font Choice

Web designers / developers often specify fallback fonts as the desired font family for their web site.  The idea is to have the site rendered using one of those alternatives, which still suits their liking, in case the most preferred font choice (the left-most value in font-family) is not available on the users’ browser.

More often than not, font substitution does occur without the designers realizing it. This typically has a negative effect on the design and especially the usability aspect (i.e. less readable). Consider the following style:

p {
    font-family: Helvetica, Times;
}

This is how a sample paragraph renders on a Mac (left), where Helvetica is available vs. on a PC (right), where it falls back to Times since it doesn’t have Helvetica in the system.

Helvetica (left) vs. Times (right), without font-size-adjust.

The differences in size and legibility are due to a factor called the x-height. In the image above, the maroon line is included to show the two fonts have a different x-height.

Fortunately, we can preserve the x-height of the preferred font using CSS: font-adjust-size. To do this, you’d first need to find out the aspect value of the first choice font and specify it for the relevant element. In our case, it’d be for p:

p {
    font-family: Helvetica, Times;
    font-size-adjust: 0.53;    /* The aspect value for Helvetica. */
}

Helvetica (left) vs. Times (right), with font-size-adjust.