Let’s Talk About x, Baby
Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/pearbudget/archive.charliepark.org/wp-includes/formatting.php on line 82
This is a copy of an article, originally at http://charliepark.org/post/22175717. 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:
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.
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)
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.
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 pearbudget.com), and I’ll add them in to the post.