Spoilt for font choice?

Typography really suffered in its transition to the web. For years online typography involved choosing one of the few ‘web-safe’ fonts and making the best of it. Times New Roman or Georgia for the traditional, Arial or Verdana for the contemporary. Not forgetting every designer’s favourite, Comic sans:

Comic san

The advent of @font-face and services such as Typekit, Webtype, Fontdeck, and Google Web fonts means we now have thousands of fonts to choose from. But is this amount of choice making the web a better place? In my experience when a range of development options are given to the masses the result is rarely pretty. I’m convinced the downfall of MySpace was due to the endless number of fonts and backgrounds offered to users, which resulted in ugly and unreadable pages.

I read a great quote by Paul Scrivens that got me thinking:

“Instead of having a user agreement it would be cool if Typekit made you read a book on typography before you could begin using a font—the Web would improve tenfold”.

So what do you need to consider when deciding on fonts for your website? In his Smashing Magazine article ‘“What Font Should I Use?” Dan Mayer gives the following criteria for selecting the right font for the job:

1. Dress For The Occasion

Dress for the occasion

While appropriateness isn’t a sexy concept, it’s the acid test that should guide our choice of font. It’s like wearing the right dress to the disco. Personally, as a designer I tend to fall back on a few failsafe fonts for body text. They’re like a comfortable and trusted pair of pants.

2. Know Your Families: Grouping Fonts

Fonts are loosely grouped into six groups, some feel formal and old school while others more contemporary. Does the job call for a bold and punchy sans serif or a quirky, space-age slab serif? If you’re into the science, here’s a more technical guide.

3. Don’t Be a Wimp: The Principle of Decisive Contrast

We need to decide how to mix and match and most importantly, whether to mix and match at all. Some useful tips for font combinations here

Font combining
(Image: Smashing Magazine)

4. A Little Can Go a Long Way (or never exceed the recommended dose).

Applied sparingly to headlines a display font can add a well-needed dash of flavour to a design, but it can quickly clutter and over-complicate.

I have to add a number 5 to this list being –

5. Rendering

The ‘web safe’ fonts of old were crafted, adjusted or even developed for use on-screen so you could ensure the majority of your users would find them readable. Now we have a greater variety of fonts it has become apparent all are not equal over all operating systems, browsers and devices. I have had clients insist on a font that looks squeaky clean on a mac, only to be horrified at how nasty and pixelated it looks in Windows. The only way around this is to thoroughly test the fonts across all browsers. I also find the comparison tool offered by Typekit useful as it gives an approximation of how fonts render out in each browser:

typekit

In the end I believe it’s down to experience and putting your work in the hands of a seasoned designer. As a inexperienced designer you tend to cram in as much as possible, these days I find myself paring it back and taking away. All the points above really do come naturally after years of designing for online. Copy needs space to breathe.

I'm a freelance UI/UX Designer from London.

See my work.

Get in touch.

Leave a Reply

Your email address will not be published.