Typography

In the early days of the World Wide Web, the fonts you saw on your screen would depend on your computer’s operating system. Initially, a sans serif font would probably appear as Arial on a PC and as Helvetica on a Mac. A little later, Microsoft began to add a wider choice of fonts designed with web browsing in mind, notably Verdana, Tahoma and Trebuchet, which were all released in the mid-1990s.

Serif fonts have little bits sticking out of the ends of the letters.

Sans serif fonts don’t have these bits. They’re straight up and down.

Throughout the first decade of the 21st century the situation remained largely unchanged. While printed liter­ature was a wonderland of typographical variety, text on the web all looked much the same.

In 2009 Swedish retailer Ikea upset many in the design world when it switched the typeface in its print catalogue from Futura to Verdana, out of a desire to homogenise its brand identity across all media. The internet tail now seemed to be wagging the print dog.

Just one year later Google changed the world of web design forever when it launched a range of 19 fonts that its servers would render on-screen without them needing to be present on the user’s system. “Google has a knack of being able to bring new techno­logies into the spotlight, so there’s no doubt we’re going to see a much ‘font-ier’ web over the next 12 months,” said Alex Walker soon after the launch. That turned out to be an under­statement.

Strictly, a font is a specific variant (e.g. italic bold) of a typeface. But the two terms are widely used inter­changeably nowadays.

Now there are hundreds of Google fonts to choose from, and scores of millions of websites using them. Most of these sites rely on a handful of sans serif stalwarts, notably Roboto, Open Sans and Lato.

Other popular choices include Raleway, Montserrat (partic­u­larly for its huge range of weights), PT Sans and Droid Sans.

Google has recently been promoting Noto Sans and Noto Serif, which are based on Droid and aim to include every possible character in the inter­na­tional world of type. It’s a good clean font family and if your website features (or might someday feature) some unusual glyphs it would make a sound choice.

Google fonts categories

Serif Droid Serif 1.4m sites
Sans serif Roboto 11m sites
Display Lobster 2.6m sites
Handwriting Indie Flower 1m sites
Monospace Inconsolata 710k sites
Category Most popular Usage

Paid-for fonts

Google didn’t actually invent the technology that would render any typeface on any device. Adobe’s Typekit option arrived a few months earlier. But it cost money and Google’s altern­ative was free.

Today there are multiple vendors of web fonts offering many thousands of typographic options at a range of prices. Depending on the vendor and the typeface there are various ways you can be charged for a web font, including a one-off fee or a pay as you go arrangement. Even under the latter, a small trader’s website might never need to make a top-up payment. But, either way, displaying a paid-for font would probably cost you at least £100 (including italic and bold versions).

There are also apps that will allow you to upload a font you’ve previ­ously installed on your computer, which will then be converted to Web Open Font Format so that you can embed it on your website. However, the resulting quality is often inferior to the profes­sionally hosted altern­atives. That may not matter too much with a big bold font but lighter weights can look rough around the edges.

I haven’t had a client yet who’s thought it was worth paying for a particular web font. But I’m looking forward to the day that changes because a distinctive typeface can make a lot of difference to a website. To mention a couple of examples:

We are defined by the type we choose
Carrig Pro is an elegant serif font available at MyFonts

Starting with its sports pages, the BBC is presently rolling out the use of an in-house font called Reith, which is moder­ately pleasing and highly legible, if a little bit childlike. If you want a free font like this, I suggest Google’s ABeeZee, which was developed as a children’s learning font.

Among commercial sites, NetDoctor is an admirable example of an inform­ative website that stands out from the rest because of its idiosyn­cratic choice of fonts: the serif and sans serif versions of Museo.

If I could afford it, this site would all be set in Cronos – the typeface I’ve used for my ‘Web Design’ logo (complete with its shooting star ornament/dingbat). Instead I’ve mostly used Source Sans Pro.

Serif or sans serif?

In the world of printing on paper it’s received wisdom that serif typefaces are easier to read at small sizes. When did you last see a book set in a sans serif typeface? (Whatever it was it probably wasn’t a classic.)

Printed books are almost always set in serif typefaces

For a while it was believed this easier-reading axiom applied to the web too but research now indicates otherwise – especially after so much behind-the-scenes work has been done to improve the way type is rendered on-screen.

Most websites nowadays use sans serif fonts throughout. But there’s no harm in making some use of serif fonts, whether for a bit of variety or perhaps to add some gravitas to your site.

Caps or not?

In certain contexts, especially online conver­sa­tions, the use of all caps is frowned upon severely. Some websites avoid it too. I have a friend who stead­fastly refused to use upper case anywhere on his site; not in headlines or sub-heads or his logo. “I don’t want to shout at my readers,” he insisted. I persuaded him to recon­sider.

Nowadays the use of all caps in headers is the norm. Very few people are offended by upper case headlines and they tend to look neater, unless they’re in a heavy weight. However, all caps should always be avoided in body copy. For emphasis, use italics. For extra emphasis, use bold. Avoid under­lining though, because the text could be confused for a hyperlink.

Incidentally, the use of all lower case in headlines is considered cool only by people who aren’t actually very cool. Or so I believe 😉