Postbureaucrat

Personal blogging by Steph Gray, former digital agency founder and erstwhile bureaucrat

24tips: nicer fonts on the web

webfonts example8 Dec: My first Mac had a black and white screen, 1MB of memory and had to be started from a floppy disk. But it had a wonderful library of fonts, from the serious to the wacky and creating posters or flyers was a dream – driven in no small measure by Steve Jobs’ personal passion for typography. Around the same time, Sir Tim Berners-Lee was creating the web, but it looks like he didn’t share Steve’s passion. For a long time, the web was a wasteland of Times New Roman.

And frankly, it still is in many ways – with the majority of the web still set in Arial, Verdana, Tahoma, Times New Roman, Georgia… or a bit of Comic Sans for the fun stuff.

For a while, you’ve been able to specify more creative font selections via CSS, either hoping that the user has your intended font installed, or else using nifty tricks to package up fonts you own and send them over the browser. All a bit of a palaver, frankly. That’s changing now, and here are a few of my favourite tools for bringing nicer fonts to web projects:

  • Typekit: this is one a of new breed of services offering a library of fonts that you can build into packages, and import into your site via Javascript for a low monthly subscription. Once the package is linked up, you can access your new fonts using CSS. There are alternative services, including Fonts.com
  • Google Web Fonts: Google has taken a similar approach to Typekit using a small library of freely-available fonts, enabling you to embed them quickly and easily and use them on your site
  • Identifont: this nice utility lets you search for fonts by name, and get a list of similar looking ones from other foundries – great if you can’t quite get the font you want from a hosted service but want to get close to it

Couple of quick questions: does this stuff work in IE6? Yes, seems to. What about the mobile web? Hmm, varies: Mobile Safari doesn’t seem keen, but players like Typekit are working on it, they say.

24 helpful tools and techniques for doing web stuff cheaply

Related posts on this blog