For the Love of Gill Sans

Argh.

Since getting my MacBook, I rarely use a PC. The notable exception might be a two-screen PC in the English department's multimedia lab when I am working on a large scale web project. Recently, I helped my wife with the Lafayette Dog Park website (the site is currently being uploaded to a cold fusion server, so no link yet). Since it was my wife's first go at XHTML or design, we used the two-screen, that way she could work on the code on one screen and refresh the browser in another.

Long story short: during this process, I ended up looking at my homepage. In Firefox. And it looked like crap. To be specific: the font was rendering terribly pixelated and broken. This came as a real shock to me, since I thought I was using a fairly standard font-- Gill Sans -- which renders beautifully in Safari. Love the Safari Gill Sans. Here's a screen shot of my design portfolio in Safari (Gill Sans at 0.9em):

Yummy.

But here's what the site looks like in Firefox:

Icky.

So, what to do? Fighting with Firefox is completely new to me. Its like the first fight in an otherwise glorious relationship. Its Conseco nipping McGwire. Its... well, you get the point. Firefox is usually the hero of the browser wars. Internet Explorer does an equally terrible job with Gill Sans. But thanks to the beauty of conditional comments, its an easy fix to tell IE not to try--to use "Tw Cen MT" instead. This was the standard font in my world: I used it at default size for my last Introductory Composition website and again at 14px for my Multimedia Writing website. I moved away from this font as I started paying attention to web typography: I noticed I tended to favor sites that used smaller font sizes, and wasn't pleased with Tw Cen MT's small renderings. But Gill Sans, that's beauty baby: consistent, symmetrical, with a nice touch of curves (good thick/thin ratio). What more could a designer want?

So, again, what to do? For assitance, I turned to one of my favorite typography sites: Smashing Magazine. Their site looks smooth and sophisticated in Safari:

Nice consistent font wieght, smooth kerning, nice variation. So, I rifle through the CSS, and find out that they're using a pretty standard small-sized Verdana. But look what happens to their site in Firefox:

Icky.

Playing around with other fonts, I've come across Univers--which looks pretty good at .8em (and bigger and I find it a bit unprofessional):

Not bad... especially considering Univers isn't recognized by Safari. This means I can create a font family: Univers, "Gill Sans", "Tw Cen MT", Verdana, Arial, sans-serif; to cover all my bases. Except that at .8em, the font-size is too small for Safari. This is where I left off yesterday--tomorrow I'm going to try looking at Univers at .9em in Firefox again. Another possible solution might be to see if I can code a conditional comment for Safari (I've never had to code a comment for anything but IE). While the sage isn't over, here's a moral for the story so far (one which I supposedly already knew):

Double and triple check typography in all browsers. In my case, originally all the sites were in Tw Cen MT. I then switched to Gill Sans without checking the site in PC. Boo me.

The next time the Red Sox are on TV I'll do another post looking at typography on the web. Essentially, I want to look at a number of designer homepages (Dave Shea, Mark Boulton, Mike Davidson, and others) to see what kinds of font families and sizes they are using.

UPDATE:: Don't know what I was thinking. Univers looks terrible. Sigh.