Fixing Web Fonts, A Case Study

Aug 3, 2010

Zoe Gillenwater writes about web design, especially Cascading Style Sheets. She’ll be speaking at John Allsopp’s Web Directions USA in Atlanta on Sept 21 in a presentation titled Efficient and Effective Design With CSS3.
A few months ago she announced a new book in the works called Stunning CSS3. I went to the book’s dedicated page to have a look.
Web fonts were being used. But in IE I didn’t like the way they looked at all:

Recreation of the page here.

The fonts used were Fertigo and Museo by Jos Buivenga.

Here’s what I did to fix:

1) I downloaded the fonts fresh. (They are available only in OTF format. Why? I don’t know. One would think that – as a promotional giveaway – making sure the fonts look good in every browser would be important. And at least one font designer – Peter Bilak at Typotheque – seems to grasp this reality. Good looking font rendering requires what it requires. And telling users of IE 6 through 8 to go take a hike is not a nice or smart thing to do. Bad for business.)

2) I subsetted the fonts (deleting unnecessary characters) to match the original files I got from Zoe’s site.

3) I converted the OTF files to TTF using the Font Squirrel Generator with auto-hinting enabled.

4) I re-did the TTF to EOT conversions using EOTFAST to get a compressed file. (Smaller files, quicker page load.)

Note: Auto-hinting is a hit-and-miss proposition – it works great for some fonts, not so well for others. But it worked very nicely for Museo and Fertigo, so I sent Zoe the improved fonts.
Here’s the result:

Recreation of the page here.

This was all one-click stuff that anybody can do. The worst that could happen is that the TTF wouldn’t look any better than what you had before. Was it worth the time spent? Absolutely.

Looks Bad Delivered By Typekit, Too

On Jos Buivenga’s site, I noticed that Typekit was listed as a source for Museo so I went and took a look there, too. Unfortunately, it looked as scraggly as the original on Zoe’s site:

Now, one of the arguments I’ve heard in favor of FHOS (Font Hosting and Obfuscation Services) is that they relieve web authors of the burden of taking different browsers into account. Well, what’s happening here? What’s up with this?

Don’t Deny What’s In Front Of Your Face

Recently, in a thread on Typophile, font designer Karsten “Cool Hand” Luecke wanted a piece of me for, according to him, putting ideas in people’s heads, for the notion that there are lots of fonts that look like crap onscreen. Fonts that need fixing. Fonts that could use improvement. It seems I’m an instigator for suggesting that web designers take matters into their own hands and mash, slash, and smack the font around until it looks right. Well, I plead guilty as charged. Please excuse me for suggesting that upholding some minimum level of aesthetic quality might be a good thing for users, web authors, and font designers alike.

Incidentally, Zoe G is using the web font Nadia from the free font service Kernest on her blog, and it looks very very good across the whole browser spectrum. (See if you can spot it.)

So here we have one case of free delivering better than paid, and a DIY derivative performing better than what could be purchased. (The single “normal” weight of Museo is free, the rest of the family you pay for.)

Make of this what you will.

Sharing Options:

Leave a Comment

Previous post:

Next post: