Choosing the right type for your website

Warning This article was written over six months ago, and may contain outdated information.

As I get ready to kick off a couple of personal web projects, I’ve been reading Enric Jardí‘s book, Twenty two tips on typography*, a primer on what works and what doesn’t in typography.

Although Jardí mainly works on type for print, most of the rules also apply to type for the web. In this article I’m going to highlight five of his tips which are useful in deciding upon the right type for a project.

Choose just a couple of typefaces

One or more typefaces are enough for any work. You do not need more than that. A lot of typefaces equals a lot of voices. So the more we restrict our typographical palette, the more expressive resources we will use, like contrast, rhythm, symmetry, or movement.

You can, of course, work wonders with just one typeface and a lot of creativity; a prime example of that is from last year’s Seed Conference:

Seed Conference homepage

The whole thing was done in Times New Roman, with creative use of weight, style, and colour.

Do not choose two typefaces that look very much alike

Do not mix Futura with Helvetica. Do not mix Baskerville with Times. Using typefaces that are too similar is like ordering two scoops of ice cream, orange and tangerine.

A combination that works so well that it’s almost become a de facto standard is Georgia for headings, Verdana for body (as seen on A List Apart):

Copy on

One of the reasons they work so well together is that they’re so distinct; headings stand out even more than they would with only a difference in height and colour.

Make sure that the typeface does not communicate something you do not want to communicate

Every font style explains something. There is no such thing as a neutral typeface; a neutral typeface transmits neutrality, and that is a message in itself.

In this example I’ve compared Archer and ClickClack:

Comparison: Archer vs ClickClack

While both have their applications, it’s pretty clear that ClickClack — the lower typeface — communicates an air of roughness, improvisation, even chaos, and probably wouldn’t be suitable for a sober business site.

Choose the typeface according to the size that will be used

As a guideline, you should know that typefaces for smaller body sizes have a wider structure and less of a difference in height between capital and lower-case letters compared to those used for titles.

For example, here’s a comparison of two typefaces, Georgia and Archer, displayed at a height of 14px:

Comparison: Georgia vs Archer

Georgia’s upper- and lower-case letters are more similar in height, so much easier to read at a smaller font size such as this.

Reject fake bolds, italics, and small capitals

A fake bold has a crude, dense appearance, something a true bold does not have. True italics are not just slanted letters but a type with a different drawing than the roman type, especially in the case of serif fonts. An authentic small capital should have the same strokes as the capital letter that it corresponds to.

This is perhaps best illustrated by type designer Mark Simonson, in this comparison of true and fake italics.

I highly recommend you pick up a copy of the book; it’s small enough to be pocket sized, but packed full of useful advice. The only drawback for me is that it highlights all the mistakes I’ve made!

* To give it it’s full title: Twenty two tips on typography (that some designers will never reveal) / Twenty two things you should never do with typefaces (that some typographers will never tell you)

Comments are closed.