For the Love of Gill Sans


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):

Gill Sans safari screenshot. Nice thick, continuous typography


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

Gill Sans at .9em in Firefox, goes horribly wrong


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:

Smashing Magazine in Safari: clean header and consistent font weight

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:

Smashing Magazine in Firefox, pixelated header text and choppy content typography


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):

Univers at .8 em in Firefox--pretty nice

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.

1 comment:

Edward said...

I think the lesson learned here is that you should habitually check your blog posts if they are attuned with most internet browsers. This is called cross browser compatibility. Here in Toronto, website designers pay attention to that since it's like a protocol to them. It's a top guideline that should be followed by all website owners.

But it doesn't mean that you should sacrifice creativity for the sake of using a universally recognized font for your whole page. You can ask a Toronto web development professional for fonts that look artistic and at the same time remain compatible with most browsers.