How To Pair Typefaces
One of the decisions UI designers often need to make is the choice of specific typefaces. There are lots of ways to go about answering these questions, but I like to think of it as a sort of accessorizing: like choosing a handbag or a tie to go with a specific outfit. Figure out one really well, and the other will follow.
For our example, we’ll start simple and classic with the workhorse of the web: Arial.
Meet Arial- An Excellent Choice For Text
Arial is an all purpose font. You can find it hanging out all over the web, as a default in word processing apps, and even in e-books. Arial’s ubiquity in techy text comes from its early selection as the typeface for IBM®️ laser printers. Since it was already what people expected computer printouts to look like, Microsoft decided to use it for their 3.1 operating system.
Remember, back in the day many people’s first computers only gave output using print, so it was only natural that a graphical operating system would use the same text as the printers were using. There was a clear connection between the two in peoples’ minds. Plus, Arial is easy to read¹.
Arial was good for old computers and printers for the same reason it continues to be used everywhere today- it’s simple, easy to read (at all different sizes), and highly customizable with many different versions of itself in existence.
The diagonal strokes in Arial are angled, with no fancy decorations at the end (spurs, seriffs etc.), just a simple diagonal shape².
Arial is not a font you really think about. It is just there, doing everything it can not to get in the way of you reading your content in a pleasant and breezy manner. This readability is enhanced by the “x-height” of the font.³ This is just a fancy way of saying how high the lowercase letters are. Generally, you want your text to have a high x-height as this makes it easier to read. Headlines, however, can use a smaller x-height to make the words jump out of the page more. Arial has an x-height of 52, putting it towards the high end compared to other commonly used web fonts⁴.
Meet EB Garamond- An Excellent Choice For Headings
Whereas Arial is a product of the digital age, typefaces based off of the designs of 16th century type designer Claude Garamond strive to recreate the feel of ancient Greek handwriting, in keeping with the humanist feel of his day⁵. EB Garamond is a modern open source version for the web⁶.
Unlike Arial, Garamond is a Serif font, which means it has little pointed decorations at the ends of individual strokes. It’s usually a good idea when using two different fonts for one of them to have serifs and the other to not have them, which lends a nice sense of symmetry to the page and makes the headings stand out.
Garamond’s serifs pairs well with Arial because they are not particularly pronounced. Instead, they are small and elegant, giving it the feel of a slightly enhanced Arial rather than something radically different. Like Arial, it was meant to be used for large portions of text initially, and therefore has high readability.
However, its readability is hurt somewhat, but its impact as a heading enhanced, by the fact that it has a much smaller x-height than Arial. Putting in Arial versus Garamond on this online x-height estimator you’ll see that the letter looks rather smooshed down in the Garamond version.
With serifs and low x-height for style, but a clean and readable look, Garamond pairs well with Arial when it’s the heading and Arial is the text.
So, What Have We Learned?
So, from this comparison, here are a few general tips:
- Use high x-heights for text, low x-heights for headers
- If you use serif for headers, use sans serif for body, or vice versa
- Think about how different you want to two to be from each other in terms of immediate visual impact. I chose one font with no serifs and one with small serifs to maintain a continuous look. But you might want something more discontinuous. Think about it.
- Also think about the ‘story’ and ‘feel’ each font conveys. Here, we chose fonts with subtle but real differences to their feel. One is modern and utilitarian, the other is four centuries old and humanistic. This is a subtler but real way to achieve contrast.
In addition, choose typefaces that have at least 10 different weights on Google Fonts (this shows a high level of support and fine-tuning for the web)³ and when in doubt don’t feel bad about looking at top sites you think look good and following their typology. Although they may sometimes be using original protected fonts, you can usually find something similar enough to get the feel you’re looking for.
: Schoger, Steve & Wathan, Adam. Refactoring UI . https://refactoringui.com/book/#get-refactoring-ui