When designing a document, whether it be a web page, email, invoice, or book, I have an order of events I like to follow. I start with content, sketch out a layout, then move on to typography.
In my mind, this process ensures that priority is given where it should be. The content is king, the architecture (or layout) of that content is second, and the typography provides the foundation that the design sits upon.
I'm no expert in this stuff; I'm learning with every project I work on. But over time, thanks to practice and the preaching of others, this process has helped my work to improve. And the area where I've been focusing on of late is typography. I sincerely believe that the web is first and foremost about words, and if that's true, then design should be focused on typography.
In his magnum opus, Robert Bringhurst, under the heading 1.1.1 Typography exists to honour content, says this:
Typography is a craft by which the meanings of a text (or absence of meaning) can be clarified, honored, and shared, or knowingly disguised.
And so I'd like to focus on how I'm learning to ensure a put a typographical foundation in place to ensure that the content of any project is clarified and honored. First up: learning to pair typefaces.
Creating effective type pairings
There are different techniques, different approaches, plus a lot of good resources available on the subject. I'll simply share my own approach, illustrated in this demo page. My approach can differ slightly for any given project, as the content dictates. But in general, each of the following steps are included.
Choose a base font
I start with the paragraph. If the web is about words, the words are found most often in the confines of the everyman paragraph. After writing one or two drafts of the content, then sketching a rough layout, I get to work looking for a body font. Often, the purpose of the site, the message intended to convey, will narrow whether the body font is serif or sans-serif.
But I simply start viewing the content in a handful of options for each. How to choose which is the best option? I'm sure there are some very good guidelines out there, but it honestly ends with a gut feeling for me. As long as the chosen font does not detract from the message, then I go with how I feel when choosing between two (or more) good options. In his article, “Narrowing the Field: How To Bring Great Type Into Focus”, Robbie Manson says it this way:
What am I trying to reveal about the text or subject with my choice of typeface? Conversely, do I want to deliberately juxtapose meaning and visual form in order to achieve a particular effect?
How does it feel? I like this approach.
But this is one side only. The primary font must also perform all that the design requires of it, and as Mr Manson lays out in that article, the feel must be balanced with the function.
In the demo, I chose Whitney. This is a recipe, which involves a series of practical steps that must be taken. Whitney is a wonderfully legible and adaptable font. It's soft, yet concise and simply gets out of the way.
Choose an accentuating complimentary font
First, is must be pointed out that you don't need, necessarily, to use another type. A lot can be achieved with one font, especially one with a robust character set (such as Whitney).
If you do use more than one font in a design, I do my very best to never go over three. That's no strict guideline (if the internet teaches us anything, it's that there are no strict guidelines, but rather general rules of thumb). I have no idea if an expert typographer would recommend this limit, but I find three is enough to manage … anymore and I inevitably draw attention away from the content and message.
But when a secondary type is helpful and in no way detracting, I try to find a font that accentuates. That is, it draws attention back to the content, to the words. I want a sub-heading that communicates a break or shift in thought, then sends the reader on her way, encouraging a dive back into the message.
Because the secondary font choice is most often used with headings or titles, I again refer to Bringhurst's wisdom. In Choosing and Combining Type under 6.5.4 choose titling and display faces that reinforce the structure of the text face, he says this:
Incestuous similarity is rarely a necessity, but empathy and compatibility usually are.
So how does one find a font that displays empathy or compatibility with the primary text face? Again, I do rely somewhat on feel. But I also am doing my best to educate myself on the fine points of the craft. Using my own site as an example, pairing Verlag for headings was not my first choice. But over time, even though there are many similarities, I found the contrast was just enough that is was a complimentary choice.
For many, the temptation is often to pair serif and san-serif (or slab with a sans). If the body text is set on one, the seemingly obvious choice is to set headings in the other. This can work, but I'm learning to do so with more care. When making pairings between the various types of fonts, be sure to choose fonts with similar structures.
Bringhurst speaks to this in 6.5.5 Pair serifed and unserifed faces on the basis of their inner structure, but I'll refer you to the recommendation of H&FJ. Under “A Palette with dignity”, they state:
Mix typefaces with similar proportions and give each a different role.
Do not simply choose any serif to go with your sans-serif body font. Learn the different terms associated with type: aperture, stroke, serif, axis. Learn how a typeface is constructed and when creating pairs, look for options that match in structure and proportion.
In the demo page, h1 and h3 elements are set in Gotham Narrow.
Look for opportunities to delight
Last, I try to find places where delight can be added to the text. Depending on the context, I find this is the part that can most easily go wrong. It's too easy to add a flourish that draws attention to itself without keeping the focus on the content or message. Especially when adding that third font.
But this is where I rely most on feel and intuition. For the demo, I wanted to make the measurements of the ingredients easy to pick out, without being superfluous. To do this, I chose Sentinel (as well as a different color). Because of the context (picture someone cooking this recipe and reading from a tablet or mobile device), this feels right to me.
Again, this is all a learning process. What works for me may not for you. But I'd love to hear feedback, suggestions, or how others go about creating type pairings.
But my primary recommendation stands true: study and practice will bring improvement. On that note, here are some places to help with the first.
Wonderful Resources
Ask H&FJ — Combining Fonts: still one of my favourite web pages. ever.
Typedia: “a community website to classify typefaces and educate people about them”.
John Boardley: Go forth and pair.
How to bring great type into focus: Ask the right questions.
Hat tip to Andrew Austin and Tim Swan for their feedback and suggestions!
