Moving type on the web forward

February 19, 2010

Web design is different from all other media in that the end result is largely dependent on what browser & operating system is sitting in front of the person reading it. In print, what you send to the printer largely comes back as you created in InDesign (aside from colour differences, but that process is mostly predictable, with calibration and experience). Television is broadcast, so, what ends up on the beta tape is what shows up on air, and, while televisions differ in terms of colour, they all take the same video in the same way. On the web, things are quite commonly completely different and one of the major limitations of the medium is the small set of web-safe fonts. We recently launched a new Shave for the Brave website and we’ve tried to apply some new technologies to make it look a bit more compelling. Here’s why we did it, and, some of the challenges we faced.

Things look remarkably different in Internet Explorer, Firefox, Safari, Camino, Mobile Safari, Opera, Windows XP, Windows 7, Mac OS, Linux, iPhone. Then, there’s the difference in the colour calibration (and capabilities) of monitors,  and you’ve got no reliable way to predict what comes out.

So, to compensate, there are established maxims, that dictate what you can do on the web. There’s the web-safe colour palate: 216 colours that look pretty similar on Mac & PC.

There’s the image formats you can use: JPG, GIF, PNG (but not alpha transparency; IE6 doesn’t support it without hacks).

There’s the CSS tricks that allow formatting to be fixed in only certain browsers.

And, there’s the web-safe fonts. Fonts that are on both Macs and PCs. The kerning’s different here and there, and, the Mac rendering engine is a bit different from that on a PC, but on the whole, they look pretty much the same. Times New Roman. Arial. Trebuchet MS. Georgia. Verdana. And a few others.

Typography is a huge part of design, and, it’s not embedded on the web like it is in PDFs.

The old solution to this problem was to render headers and the like in images. Use whatever font you like in PhotoShop, save for web, and away you go. That works alright, but, in the age of Google it presents some problems.

Firstly, it loads a bit slower. Secondly, it’s less than searchable by the Google’s of the world.

So, what do you do?

You could take the flash based substituition technique much like YouTube did by embedding videos in flash, SIFr and Cufon embed fonts in flash. As far as I can tell though, it’s a bit kludgy.

But there is hope on the horizon. CSS’s @font-face declaration solves at the very least the technical issues of font embedding. It makes it possible. You need three or so font files, a special .eot for Internet Explorer, and an .otf, and a .svg, and probably a .woff for good measure, but, it works.

Mostly.

This is the approach we’ve used for the just launched Shave for the Brave website. We found a great, gorgeous, open liscenced font, League Gothic by the League of Movable Type.

And, I discovered that Chrome 3 doesn’t support @font-face. And then I discovered that Firefox before 3.1 doesn’t. And Camino. And Safari on iPhone/iPod.

For now, we’re serving an alternate stylesheet to FireFox, Camino, and Safari. Hopefully in the next week or so we’ll serve it to only the affected versions, and not all of them.

So, not quite there yet but I take hope in the fact that typography on the web might (finally) be taking a step forward. And that’s good news.

Tags: ,