Hey, I was reading that...

I’m a huge fan of web typography, but we’ll have to wait a bit longer to catch up with print.

Twitter surged last week with the news of Futura’s arrival at Typekit.

Futura PT’s classic design — tall ascenders, near perfect geometric shapes — make it both instantly recognizable and irrepressibly modern.

Indeed, and browser rendering makes it entirely unrecognisable. We’ve known this for a while; Futura has been available on less popular/more pricy services for months. See the example from Typekit’s blog:

Futura - rendering at text sizes - Typekit Image © 2011 Typekit, Inc.

The rendering is passible on a Mac, dreadful on Windows—and that’s just regular Futura Book. Light and Light Italic are going to be atomic-thin. Typekit says this is “strikingly legible”. I’m not sure that’s a compliment. Play around with the Futura Type Specimen and you’ll see for yourself:

Futura PT - Typekit Specimen

Those sub-pixels are being tortured. I daren’t check how it’s displayed on a Windows machine.

Update: I did check Windows, and it’s horrific:

Futura Typekit Specimen on Windows

There’s nothing wrong with Futura’s design or Typekit’s serving it’s simply a technical limitation. But it’s an issue that is evidentially being ignored by many web designers.

Web Typography Limitations

Futura and many (actually most) other web fonts can never be used for body copy. At least not until we’re all sat infront of desktop displays that match the pixels-per-inch of the iPhone’s Retina screen. If you thought browser upgrading was a slow and frustrating process, you’ll cry when you realise we’ll be designing for old hardware for decades longer.

There are fonts like Droid Serif that work great—you’re reading it now—but we have to concede the choice is limited. I’ve experimented with web fonts on many sites and the results have been disappointing. The legibility problems are too large.

Here’s the kicker: choosing a pretty font does not mean a website has good typography.

Good typography in Arial is indefinitely more desirable than bad typography in a fancier web font. Appropriate type size, leading, line-length and general typesetting is missing in many professionally designed websites. Top that off with an illegible font and you’ve got a perfect cake that nobody’s eating. If that metaphor makes no sense – your website isn’t going to attract many visitors.

To be fair, design on the web has matured a lot in the last few years but lack of attention to technical limitations and too much focus on gloss has produced a fair selection of online duds. Design distractions are everywhere. Web fonts, JavaScript, CSS3 and HTML5 are all luring us in to their glorious freshness and rejuvenating powers.

Websites are designed to serve a purpose. Normally to promote and sell a product or service. They are not a canvas for us to throw every new technology at. While these things do often help provide a better solution it’s almost always simple clarity that works best, not illegible web fonts.


In other news, on June 7th Monotype Imaging are releasing a new digital version of Helvetica including display weights under its original name “Neue Haas Grotesk”.

Incidentally, I’ll be going offline for a while…


Follow @dbushell on Twitter
Return to Blog