23 December 2007 @ 6am


Let’s Talk About x, Baby

This is a copy of an article, originally at Sorry about the inconvenience of the redirect.

Get ready for some type-nerd-ery.

People in my shoes have a bit of a problem, and it all comes down to x. Actually, it comes down to the x-height — the height of a given typeface, from the baseline to the top of the lower-case letters (specifically, the top of the ‘x’). For example, here are a few different faces:

Times New Roman
Calibri (if you have it on your system … otherwise, this is Verdana again)

If that rendered correctly, you should see that the “x”s have different heights. The difference might be too small to notice. Here. Let’s put them inline: x x x x

And once more, at a larger font-size:

x x x x

You should be able to see that they render with slightly different sizes, even though I didn’t change the size of the font. That’s the x-height, the size of the lower-case letters, at work.

X-heights cause a problem in web typography, because even though you’ll declare a font-size of, say, 11px, different fonts will render that differently. Just look at the inline example above to see what I mean. This wouldn’t matter if all of your users had every font installed on their computers, or if sIFR were more usable for body copy, or if web fonts were supported, but none of those options are available to us.

Back in March, I posed a question to web-typography guru Richard Rutter:

The Backstory:

I really like Calibri, and would like to use it with my websites. I know it’s new and isn’t terribly common, so I’d like to use Verdana as a backup. The problem is that I usually (using Verdana) build sites out at .6875 em (off the 16px default, yielding an 11px letter-height). The problem is that Calibri at .6875 em is a fair amount smaller than Verdana at .6875.

The Question:

Is there any way to select one font, at one size, and then to backup to a second font at another size? I don’t think there is, but would love to hear if you’ve heard of any ways around that. (source)

His response:

There’s no way I know of passing apply one size to one font and another size to another font through use of CSS alone. There was the “”: property in early versions of CSS 2 but that was never implemented in browsers and had its own problems anyway.

Javascript solutions are available to ‘guess’ if a font is installed, such as Lalit’s JavaScript/CSS Font Detector which may go some way to programming a solution.

However, I would address the issue by revisiting your font stack so that you only specify fonts with a similar x-height. For example, rather than Verdana, Arial might be a more suitable back-up for Calibri. (source)

I’m not sure what he meant by “the “”: property” (I should have followed up with him). It quite probably was font-size-adjust. But at the time he wrote his answer, things looked hopeless. He didn’t have a great answer for it, and if he couldn’t answer it, nobody could.

But it’s a new day. And font-size-adjust is coming back. And it’s the solution to our problem. “The font-size-adjust property specifies that font size should be chosen based on the height of lowercase letters rather than the height of capital letters.”

I just pulled that copy from Firefox’s Developer Center article on how Firefox 3 will support font-size-adjust across all platforms. (Firefox 2 apparently covers Windows machines, but this is the first I’ve heard about it.)

Here’s the rest of the intro to that piece:

This is useful since the legibility of fonts, especially at small sizes, is determined more by the size of lowercase letters than by the size of capital letters. This can cause problems when the first-choice font-family is unavailable and its replacement has a significantly different aspect ratio (the ratio of the size of lowercase letters to the size of the font).

To do this in a way that is compatible with browsers that do not support font-size-adjust, it is specified as a number that the font-size property is multiplied by. This means the value specified for the property should generally be the aspect ratio of the first choice font. For example, a style sheet that specifies font-size: 16px; font-size-adjust: 0.5 is really specifying that the lowercase letters of the font should be 8px high (16px times 0.5).

The takeaway: Fonts will now be standardized (at least, in Firefox), based on an x-height that you, the developer, choose.

Using their example, we have the standard body font-size of 16px. If you have font-size-adjust in your CSS, Firefox 3 will override the body font-size with an x-height rule, putting all body copy x-heights to half of that (.5), yielding an x-height of 8px for all typefaces rendered. That last sentence was a little unwieldy, but hopefully you get what I’m saying.

This is really exciting if you’re into web typography, as it opens the doors to a lot more flexibility — both in terms of the design that you can give your users, and in terms of usability and the user’s experience. It opens up your font stack options.

For some reason, the W3C dropped font-size-adjust from CSS 2.1, but that was because browsers weren’t supporting it. Now that Firefox is going to cover it for all platforms, hopefully the other browsers will step up and cover it as well.

I’m sure there’s more to write about this, but I’m just going to post this, since I’ve spent way too long on it already, and I have a ton of work I need to do. Unfortunately, I don’t have comments on this tumblelog, but if you have any critiques on this, please e-mail them to me (my first name, at, and I’ll add them in to the post.


[…] Unfortunately, Tumblr (which hosts my blog) sometimes chokes, and sends people here, to an old archive of my blog. I’m going to get an archive of the Posh CSS article up here as soon as I can. Here it is: […]

Posted by
Richard Rutter
8 January 2008 @ 5am

Hi Charlie - thanks for the great follow-up to our conversation. As you rightly assert, I did mean the font-size-adjust property. I intended to go away and get a link for it, but it looks like I got distracted and forgot to fill in the blank :-)

It’s interesting that Firefox 3 will be implementing font-size-adjust. Perhaps Webkit will follow suit, but I doubt that Internet Explorer will do so any time soon, as the property has been removed from CSS 2.1 and the Microsoft team are (now) generally unwilling to implement properties not included in the current specs. However font-size-adjust is currently in the CSS3 Fonts module ( so there is still a future for it.

Leave a Comment

Thanks for visiting, Posh CSS readers!