Can’t tell your h1 from your p? Does your type look great on tablets, but not on mobiles? This 4 part article is a basic guide to establishing a solid typographic system, including choosing the right fonts, establishing a hierarchy and making sure your system works well in a responsive environment. In this first instalment we’ll be looking at how to choose a nice pair (of fonts).
Before we start, let’s consider the importance of getting your typography right. Typography permeates every element of your design. From headings, paragraphs and block quotes to navigation elements, captions and icons. That divider you put between your intro paragraph and the rest of the content? Typography. The white space separating the body of your article from the heading? Typography. Heck, if your images conform to a baseline grid, they’re part of it too.
So unless you’re working on a pure portfolio site – strike that, *even* if you’re working on a pure portfolio site – typography should be your primary concern when designing anything that puts content in front of a reader. Which is pretty much everything.
We clear? Good.
Typography may be your primary concern as a designer, but it’s not the most important aspect of your web site. The content is. Whether you write it yourself or have the luxury of a talented copywriter, your web site (or app) achieves diddly squat without it. You may think that navigation is important, that information architecture and content structure are significant, that brand guidelines are a key consideration. You’re right – but only if content comes first.
It doesn’t matter how easy your site is to navigate if there’s nothing on the page. No-one cares how well your content is organised if it doesn’t make sense. What’s the point of a brand font if the tone of voice of the content is utterly wrong? Unfortunately, the quality of your client’s content may be out of your hands, but you – the designer – have the responsibility to make sure it’s presented clearly, that it’s legible, and that it can be read comfortably. Whether it’s blog articles or image captions (for the aforementioned portfolio site), headlines, snippets, lists or feature carousels, the legibility, readability and, ultimately, accessibility of the content is paramount.
So that is where you start: making content accessible. (And, if you’re doing it right, this is where you’ll end up.)
Choosing your fonts
Now, there’s more to typography than Times New Roman, which reads well but, like Trajan, looks generic due to overuse (mostly by default, as both fonts are so ubiquitous –we’re simply so used to looking at them that they lose their personality and distinction). So the first step of the process is to choose the right font – or fonts – for your project. If you’ve been given a set of brand guidelines your fate may be sealed in this respect, though restriction is often a blessing in disguise, as, given the wealth of typefaces available, starting from scratch can often be a daunting task.
Content is context
Your first concern when choosing a typeface is – you guessed it – content, and the type of content you set for informs your selection of fonts. For example, if the main bulk of your content is medium-to-large chunks of text (which is to say most content) you’ll want a face that’s highly readable.
Readability, a term used to describe whether something is easy and comfortable to read, is not to be confused with legibility, which is concerned with whether letterforms can be made out from each other and understood. Whilst most typefaces are legible, not all are readable, and a perfectly readable font can be rendered not so in all caps, with excessive spacing and so on. (If you want you can read more on readability and legibility here.)
When I first designed our agency web site I made the mistake of neglecting readability in my headlines. Whilst Trump Gothic is a perfectly legible font, at small sizes the readability is significantly reduced and the content suffers as a result. This was consequently remedied in our latest redesign by choosing the wider, more readable DIN condensed.
Certain types of content may require fonts that are particularly legible at small sizes, that demand attention, that adds flair and personality, or that compliments the visual aesthetic of a product or brand. But more often than not, you will find yourself making a decision on what will be your body font or paragraph; your base font (more on that later).
Dos and Don’ts
Although your font(s) ultimately depends on the context in which you design, there are still rules of thumb that can help make the correct choice. Here’s a few that I try to stick to (borrowed from Enric Jardí’s “Twenty-to tips on typography“):
1. Two typefaces are enough
I’ve never designed anything that required more than two different fonts. Granted, I have used up to three, but I would struggle to prove the necessity of a third font. In fact if you’re using a professional face with a variety of weights available (and you should), one will often suffice. In the words of Mr. Jardi:
“…a lot of typefaces equal a lot of voices. So the more we restrict our typographic palette, the more expressive resources we will use, like contrast, rhythm, symmetry, or movement.”
2. Avoid communicating the wrong thing
Just like a lot of typefaces can equal a lot of voices, the wrong typeface can give your content the wrong voice. Finding ‘the perfect voice’ for your content is difficult, however, so instead it can be easier to focus on *making sure the typeface doesn’t communicate something you don’t want it to communicate*. By avoiding a ‘wrong’ voice, you’re likely to find a ‘right’ on in the process.
3. Avoid fantasy fonts and scripts
In recent years we’ve seen a great swell in the use of script fonts used in logo design and web sites alike. Yes, they look oh so trendy, yes they have so much personality – but are they readable? Avoid them in most circumstances. As for fantasy fonts, I shouldn’t have to explain. (The clue is in the title – real designers work with with real fonts.)
4. Pair typefaces with contrast
Entertaining the notion that your typeface is adding a voice to your content, what’s the point of having two near-identical voices? Choose fonts that compliment each other and share structural similarities, but that are still clearly distinguishable from each other. If you can’t find two distinguishable fonts that fit the bill, just choose one.
5. Start with the base font
This should be obvious, but too many designers attack their navigation, headings and other ‘fun’ typographic elements first, leaving the most important part – the humble paragraph – till last. Whilst other typographic elements are important and all add to the personality of the hierarchy, remember that most of your content will be set in your paragraph style. Getting this right early on can inform your choices for the rest of the typography, whilst saving it till the end may result in backtracking on headings and and other styles to suit.
That’s it for now. The next article will focus on the base font, and how to make sure the size, measure and line-height are all in proportion to each other.