Design By Numbers: Typography
A Web Designer’s Primer to Typography
--
One thing I hear a lot of people—web developers more than anyone—say is how they “can’t design”. They say they just don’t have the eye for it. Let me tell you that that’s bullshit. Anybody (and I mean anybody) can learn how to produce good design. All it takes is an understanding of the components of good and functional design, and take it from me; the most important component of all is Typography.
Typography plays what I would consider the most important part of any design, particularly content-heavy design such as that of a book or a simple letter. Typography serves to honour the content; that is to say that typography is not dissimilar to a chalice. The purpose of a chalice is to act as a vessel for a drink. The chalice allows the drinker to observe and appreciate its contents, without fanfare or distraction, yet may itself be as beautiful as what it contains. The same way a chalice or other glass or goblet may vary from splendidly decorated to arguably plain, so typography may be equally varied in appearance—but both are useless without content.
Understanding Typography is a little like painting. We might look at a masterpiece in a gallery and be completely overwhelmed at the idea of painting anything yourself. However, we might nip to the shops and pick up a “Painting by Numbers” box set and suddenly realise it’s not that hard. With some restraints and guidance in place, painting (and typography) is a perfectly simple task.
(Sidenote: I’m not a painter. Can you tell?)
Voice and Tone
Before beginning any project, I tend to establish a voice and tone. How do we want this website to sound? How friendly is this poster? You might think questions like this are best reserved for designer hippies, but answering them early helps to establish a reference point against which all your typographic choices can be tested.
Generally speaking, a serifed typeface tends to be more formal than a sans-serif typeface. It’s also an accepted rule of thumb that serifed faces are easier to read – at least when it comes to long text. There’s scientific research to suggest this isn’t the case, but we can carry on without having to look over that. We’re not counting beans here.
Determining whether you use a serif or sans-serif typeface goes a long way towards establishing a voice and tone, and vice versa. However, don’t be fooled into thinking a sans-serif typeface will automatically dress down your project. There are plenty of informal serifed and formal sans-serif faces available. For example, I tend to use Freight Sans when I want a sans-serif typeface that’s formal without being intimidating.
With a typeface that has a wide number of weights and styles—often called a superfamily—you can safely get away with typesetting an entire website or project in that typeface alone. However, some typefaces are well suited for particular functions.
Form and Function
After deciding the overall tone of the project, I work on a 75-20-5 basis for the typesetting: 75% of the text is going to be body copy, 20% will be titles and headings, and 5% will be captions and other miscellaneous typographic elements.
Body Copy
Starting at the body copy level, there a few industry-tested “rules” that we ought to follow. We need the body copy to be highly readable, and these rules will help us achieve the readability we need. On screen devices, body copy ought to be no smaller than 16px. Luckily, this is the default font size in pretty much all web browsers, but I tend to bump up to around 18-20px. I can’t speak much for print design, but in my little experience, I tend to go for around 10pt or smaller.
These pixel and point sizes are all good and well, but we should look at what we’re actually measuring with these numbers. The numbers are actually referring to the cap-height of the characters in a font. Unfortunately, the cap-height isn’t the main influencing factor when it comes to the readability of a typeface.
The important thing to look out for is the typeface’s x-height. Traditionally, this is the height of the lowercase “x”, but you can just think of it as the height of all lowercase letters. A taller x-height means better readability, especially at smaller sizes.
Next on the readability checklist is line-height or leading. Generally speaking, a line-height somewhere between 1.3 and 1.5 times the cap-height is perfectly suitable for body copy. Any smaller, and the lines start to bump into one another where the descenders and ascenders on characters like g, j, l, and h interfere with each other. Much larger, and the lines start to fall away from each other.
Finally, the line length, or measure, is considered. You want people to be able to read more than a few words per line, without having to turn their head to get to the end of a sentence. A comfortable measure is somewhere between 50 and 70 characters. This is a difficult thing to measure by hand or by eye, so think of it as 2-3 alphabets or 12-16 words per line. Medium, for example, gets about 2.5 alphabets on a single line. Remember the old days of the web, when text went from one edge of the browser window to the other? That’s a great example of a terrible measure. Unfortunately in responsive design, line length becomes a difficult thing to manage, but good practices on large viewports should translate nicely into smaller ones, too.
The last thing I’d mention in parallel with body copy is white space. You want to give your text plenty of space to breath. A good rule of thumb is something I call the “Rule of Thumb”. Space your typographic content as if you were holding it like a book, leaving enough space on either side for a thumb to “hold” it in place. This is easy to test out on an iPad. If you don’t want to go to that sort of effort, then I’d say around double your line-height should be enough white space on the left and right to allow comfortable, content-focused reading.
Titles and Headings
Now for our 20% – titles and headings. Like I mentioned earlier, with a superfamily, you should get enough weights and styles to happily style all your typographic elements. That said, there’s absolutely no reason you can’t use more than one typeface.
I tend to follow a simple rule with titles and headings – the bigger the font size, the lighter the typeface weight. For me, there are many fewer cases where a bold headline looks good. Simple typographic hierarchy can be achieved without having to lean on the crutch that is bold typefaces. You can take a look at my own site to see my rule in practice. There are only two typefaces in use; Hoefler Text and Requiem Display. Requiem does the heavy lifting for the page title, with Hoefler Text in use for the body copy and other headings. The typographic hierarchy is established with some simple differences; the second level heading is set in italics with plenty of white space above and below it, and the third level heading is set in small caps.
Of course, you don’t have to follow the same pattern. There are plenty of ways to differentiate the headings from body copy – underlines, bold typefaces, bold italics, colour differences, and many more.
When it comes to choosing a typeface that will play nicely with your body copy, there are a few techniques that can help you out. You could look for a typeface that complements the body copy, like Requiem does for Hoefler Text, or you could look for one that offers some contrast. There are a few examples of typeface pairings available on Just My Type (another project from yours truly). When it comes to a complementing typeface, look for similar characteristics – similar contrast and x-height, primarily. As for contrasting typefaces, those with similar tones and a safe bet. Don’t set headings in Comic Sans unless the body copy is equally silly.
Miscellaneous Elements
Now for that last 5%. Captions, side notes, blockquotes. For captions, I tend to go for smaller font sizes; somewhere between 75% and 87.5% of the body copy size. I also like to switch to a typeface better suited to small sizes. If I’m using a serif face, this usually means switching to a sans-serif with a taller x-height and more uniform strokes. A smaller font size means we’re probably going to need a larger line height. Be sure to give captions space, too — you don’t want them cramping the body copy.
When it comes to other typographic elements, it’s more or less a case of exploration. In some cases, you may want to expand blockquotes outside of the containing element, adding some emphasis. Be sure to follow that rule of bigger font size = lighter weight.Typographic hierarchy is about balance; you don’t want people confusing your blockquotes for headings. When something gets physically bigger without breaking up the body copy, make it appear smaller with smaller line heights and lighter typefaces.
There’s a lot more that can be said for learning about typography, but these are the basics — the things that I could have done with learning years earlier. There are people much smarter than me going into considerably more detail on the topic. Here are a few extra resources to get you going:
- Butterick’s Practical Typography (hat-tip for the influence of this post’s banner image)
- The Elements of Typographic Style Applied to The Web
- Grid Systems in Graphic Design
- The Vignelli Canon
- The Geometry of Type
I can’t recommend these resources enough. Beware: learning typography is a can of worms. Before you know it, you’ll be nerding out over the subtleties in typefaces like Freight Text, calling out the bad kerning of shop window displays, and leaving typography tips for restaurant owners scribbled on napkins just like me.
