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.

Thanks for visiting, Posh CSS readers!

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:

Thanks for your patience.


A Simpler Time

For anyone getting this by RSS, and just for the record, I’m moving my existing blog to an archive (, and will be setting up to host my shiny new toy, a Tumblr blog.

I don’t really know how the RSS feeds will be affected. If you’d like to continue to subscribe, please visit in a few days, and you’ll see the Tumblr setup, and you can subscribe to that.

I don’t foresee posting to the archived blog, but you never know …

Stories, and a New Designer

Joey Roth is a young designer in New York, who transitioned into industrial design from creative writing. Gives him a neat perspective.

Here’s a quote from his blog that I really liked: “Narrative is like a codec for storing and playing back memories, and people seek opportunities to build small stories in their lives. People judge products that are unremarkably easy to acquire on how well the thing works, rather than on a story they’ve built around it (if a product is super-easy to acquire, that ease could be a story itself).” (source)

And, then, there’s his beautiful new teapot, Sorapot.


Mmmmm … Empty Inbox

Every once in a while, people write about e-mail bankruptcy. After a fair amount of blood, sweat, and toil, I’m now, officially, e-mail debt-free. I don’t owe anybody any e-mails. My Inbox is completely empty. I can’t remember the last time it’s been totally clear like this.

Now I just need to stop checking it to make sure it’s still empty.

The coffee’s too strong; the website’s too weak

Okay. I get up early. I know that. What I want to know, with little work, is what coffeehouses are open early, too. I find that I just work better when I get out of the house and get over to a third place.

So I hop over to to see what the hours of their nearest location is. I find the store, but the store locator says “Please call this store directly for store hours.” Are you kidding me?

Surely Starbucks has their store hours filed in a central database. Making each customer who wants to know when their stores are open call, after they’ve already taken the trouble to visit the Starbucks website is inane. And it makes me that much more likely to go, instead, to Cosi (whose website does list their hours). Except that they don’t open for another three hours. Shoot.


Consider two scenarios:

One: You see something that a friend would enjoy (a book, a CD), and you buy it for them. Rather than do anything special, you just give it to them. The response: gratitude.

Two: You see something that a friend would enjoy (a book, a CD), and you buy it for them. Rather than just give it to them, you wrap it, simply. The response: wonder, anticipation, big eyes, “wow!”, gratitude.

There’s something really special about revelation, discovery, and uncovering. The trick, then, is layering that onto a web app. How do you pleasantly surprise your users? What are you withholding, that you then allow them to uncover? What could you be?

Work Music (x 4000)

So I’m in my new office. Part of getting set up was to hook up an older iMac that Sarah’s family wasn’t using anymore. I’m sure I’ll be an Apple fanboy soon enough (I’m halfway there), but the real asset here is my brother-in-law’s music collection on iTunes. 4,000 songs. I’ve got Catch 22 on right now. Then I have a great collection to choose from … everything from The Clash to Social Distortion to Nick Drake to Rainer Maria to Fugazi to Bright Eyes to Hawthorne Heights to Islands to Further Seems Forever to Starting Line to … well … I could go on forever. And there are scores (hundreds?) of bands that I don’t even know.

The only thing that would make this better would be sticking all of this on an iTablet.

Update: Rock! Les Mis!

Potential Hiccups

I’m going to be messing with the PearBudget server over the next 24 hours or so. Hopefully, nothing noticeable will happen.

That means … something crazy bad is going to go down. Don’t freak out.

No Tags

I Liked Facebook More Before It Became Myspace

PearBudget’s not really going to be a social application. I know “social” is the new(ish) hotness, but it’s not what we’re going to be focusing on (Wesabe does it well, though.) Our single-minded purpose: help people who are new to personal finance to get a handle on their spending.

One danger faced by “social utilities” that I just wanted to point out: when the “social” outweighs the “utility,” you’re going to have a problem. Here’s a screenshot I took on Facebook a few days ago.

Facebook Extension Invites

That’s just ridiculous.

I don’t fault the people who invited me to become zombie / slayer / jedi / sith / pirate / ninja / werewolf / potatoes. They’re into it, and that’s great. But I should be able to permanently opt-out of receiving invites to things I don’t want. The “utility” I find on Facebook is in reconnecting with old friends. And, in fact, it’s been great for that. But there are very few extensions to Facebook that I find compelling. Even “Causes” is off my list (Have you given money to each of the causes on your list? Yes? Good. No? Well, I’m sure they appreciate that they’re on your Facebook profile.).

That all being said, here’s an extension that I’d love to see. (The people I know who know what they’re talking about say this can’t be done (because of the Facebook API), and I have no reason to doubt them. But maybe you can come up with a way to do it.) If you can build it, please do. Startup Weekend folks, I hope you’re listening to this.

Summary: Facebook would show you who you know in the real world, but who you haven’t connected with yet on Facebook.

Sound fanciful? It’s not.

The way it works is this: Let’s say that, in the real world, I know Person A, Person B, Person C, and Person D. I’ve told Facebook that I know person A, C, and D. Person B somehow fell through the cracks. Person B has also said that she knows persons A, C, and D. Facebook should be able to put two and two together, and figure that I probably know Person B. Two people who know the same collection of people probably know each other. The algorithm could be extended, based off of second-degree friendships and the other loose ties that make up our social graph, but the initial logic is super simple. Facebook would give me a list of people who it thinks I probably know, even though I haven’t indicated that I know them.

Another way to say it: You know how you can look at your friends’ friends, and you’ll occasionally see someone who you know (in real life), but their profile notes say “Add this person as a friend”? This extension would simply run through each of your friends’ profiles, looking for the people who come up the most. It would then list them, in order of frequency of appearance. It could have a minimum threshold of, say, 5 mutual friends. Beyond that threshold, the false positive rate would go up exponentially (that’s called … what … getting wagged by the long tail?).

Yet another way to say it: Currently, when somebody friends you, it includes in the notice “You and X know _five people_ in common.” This would simply flip that around and automate it, so the two of you would each get notices that the other person’s on Facebook. You could take it from there.

I’ve seen LinkedIn begin to play with this. I hope they continue with it. And I hope Facebook introduces it as a feature. It’d put the “utility” back into the equation.

On the other hand, once this launches, I’ll probably get a lot more invites to become a zombie potato.

← Before