Saturday March 19, 2005

A Font Odyssey

Recently, I'd been noticing that sometimes when I visited certain blogs, they looked sort of...ugly.  Not from a design standpoint (although, just between you and me, the blogosphere could probably stand a top-to-bottom redesign, this blog included), but because certain fonts seemed to be displaying wrong.  In particular, some letters seemed to be slightly larger than others, leading to an unpleasant "ransom note" effect—just barely noticeable and therefore extra annoying.  I did some digging, and the cause was both interesting and not, as far as I can tell, described on the web anywhere.

The first thing I noticed was that text on The Wife's blog looked pretty poor on my screen.  It didn't have the strangely large letters, but the horizontal spacing between letters was pretty uneven, and the middle leg on the lower-case 'm' wasn't exactly halfway between the outer legs.  Soon after that, I was visiting another blog (I don't remember which, sorry), and I noticed that some of the letters actually looked too tall.  At first I figured the blog's author had done something screwy with in the style sheet, but on further thought that didn't seem like it could account for what I was seeing, and I started to wonder if my computer were misconfigured somehow.  I looked at the style sheets of both web pages and noticed that the text was in Helvetica on the one and Palatino on the other.

We're running Windows XP on all three of our computers.  My desktop, where I noticed the problem, has a high-resolution monitor but The Wife's laptop is running some weird font-enlarging tweak because the resolution of the screen is high enough that the text was too small.  My first hypothesis was that she simply chose a font that looked reasonable on her computer, but that on a non-enlarged screen, the smaller version of the font was too compressed.  I mentioned it to her and had her bring up her blog on her screen, intending to show her how it looked on my laptop side-by-side.  To my surprise, it looked fine on both laptops.  The hell?

I took my laptop downstairs and set it next to my desktop monitor so I could compare, then created a test document in Word that showed the problem on the desktop computer in both Helvetica and Palatino.  When I loaded that document on my laptop, it displayed without the problem.  What's more, during my experimentation, I noticed that the problem only seemed to affect certain font sizes and would go away entirely if I turned off ClearType, Microsoft's sub-pixel antialiasing software for LCD screens.  This led me to my second hypothesis: that there's a bug in ClearType that causes it to select the wrong sizes for certain characters in certain fonts.  This didn't sound very likely.  I Googled around the Internet, figuring that if it were a bug in ClearType, millions of people would have had the same problem, and came up empty (although I did find some interesting sites, including this message in a thread in the typophile forums that contains all sorts of interesting detail about ClearType and some upcoming features in Longhorn).

In playing around with the document, I happened to notice that the font drop-down in Word didn't list Helvetica and Palatino on my laptop—surely a clue.  Either Word or Windows (the latter, I think) is clever about falling back to a similar font when an unavailable one is requested, so my laptop was displaying Helvetica as Arial, and Palatino as Book Antiqua.  On my desktop, though, Palatino and Helvetica were listed as separate fonts and were clearly displaying differently.  At this point I was thinking (along with some of you, no doubt) that Helvetica and Palatino are Mac fonts that don't come with Windows by default.  Why were they on my computer at all?

I went and looked in my Windows font directories.  Sure enough, there were files for Helvetica and Palatino TrueType fonts on my desktop, but not my laptop.  Using Windows Font Viewer (the program that shows you a sample of a font if you double-click on it), I noticed that both of them were marked "Version 1.3 (Hewlett-Packard)" and "Copyright (c) 1992-1997".  Hmm.  Changing to the "details" view and sorting by date, I noticed that both Helvetica and Palatino were among a group of more than a dozen fonts in that folder that all had the same creation date: June 17th, 2003.

On my desktop, I created a second test document that had samples of text in all of those fonts, then started toggling ClearType on and off, looking for changes.  Sure enough, a half-dozen or so of the fonts were displaying some letters with different heights when ClearType was on.  I took some screenshots and blew them up so you can see what I mean.  In each pair of images, the first was rendered without ClearType, and the second with.

Albertus, 12 point

Albertus Medium, 12 point

Antique Olive, 10 point

Antique Olive Compact, 10 point

ITC Avant Garde Gothic Demi, 11 point

ITC Bookman Light, 10 point

Palatino 12

In each case, you can see that the ClearType versions of some letters are one pixel taller than the non-ClearType versions.  In particular, look at the tops of the rounded arches in 'm' and 'n', and compare them to the upper-right leg of the 'k'—in the non-ClearType screenshots, they're the same height, but in the ClearType ones, they're not.  The letter 'm' is often one pixel wider, as well.

So, for some reason, that particular set of fonts doesn't get along with ClearType.  But why are they installed on my machine and why did I just notice the problem recently?  The fact that they're HP fonts is a clue.  We've always connected our printers to my desktop computer and shared them over the network, so where I've always installed the printer software and drivers.  Many printers have a bunch of built-in fonts that you can't see on the screen unless you have screen fonts for them, and I guess that either the software for either our current or the previous one installed several new fonts so that they'd be WYSIWYG editable.

I certainly won't complain about that—the more fonts, the merrier!—but there's a problem.  As I mentioned before, Windows and MacOS have different standard fonts; for example, where the Mac has Times, Helvetica, and Palatino, Windows has the (similar but not exactly the same) Times New Roman, Arial, and Palatino Linotype.  You usually won't notice this difference when you transfer documents back and forth because, as I mentioned above, Windows falls back to a similar font if your document asks for a font that's not available.

Web sites, however, work differently.  In CSS (Cascading Style Sheets), it's possible to specify a list of font faces for the text in a web page.  This is a handy feature, because you can list specific Windows and Mac fonts to get results that look good on both systems, and also some more general fonts to fall back on in case the specific ones aren't available.  This feature was interacting oddly with the font setup on my machine.  If a web site specifies "Helvetica, Arial, sans-serif" (as The Wife's does), most Windows machines end up using Arial because they don't have Helvetica, but because my computer did have a version of Helvetica, it used that instead.  Unfortunately, this group of HP fonts are only so-so screen fonts (it looks like they're old enough that they predate ClearType, and so they were never tested together), so I got poorly-rendered text on web pages that asked for Mac fonts.  (This version of Helvetica doesn't actually exhibit the funny-letter-height problem.  It just doesn't scale very well.  I suspect the hinting is rudimentary or broken somehow.)

My fix to this mess was to get rid of the Palatino, Helvetica, and Times fonts (or rather, to move them to another directory), because they're the only three fonts likely to be explicitly requested by web sites aiming to render nicely on the Mac.  Everything works like a charm, now—I'll just have to remember that any documents I receive with those fonts in them might not be WYSIWYG.

There's probably a moral to this story, but I can't figure out what it is.  It's not "Don't use ClearType", because ClearType makes text look much nicer on LCD screens.  It's not "Don't install extra fonts", because you can never have enough fonts.  It's not "Don't try to write cross-platform web pages", because you definitely should.  All the people and software involved in this mess did what they were supposed to do.  I guess it's an interesting illustration of Hayek's notion of "the result of human action, but not of human design", filtered through computer software.

[Now playing: "Big Time Sensuality" by Björk]

I am The Tensor, and I approve this post.
08:00 PM in Web/Tech | Submit: | Links:


TrackBack URL for this entry:

Listed below are links to weblogs that reference A Font Odyssey:


this was quite the informative post. thank you for sharing that. i'm having similar issues when dealing with fonts across platforms. it can be quite vexing, but i'm learning to deal. tempted to download more fonts, but then i wonder how my readers (who may not have the proper fonts) view the site...

anyway, thanks again.


Posted by: XINERGY at Nov 18, 2005 3:36:55 PM