Pairing fonts can be a challenge. Selecting two or more fonts which work well is one thing - selecting two which work together to achieve your typographic aims may have you reaching for the aspirin. Let's see if we can alleviate any headaches. This guide will help you get started with font pairing for the web.
Luckily, typography has been around a lo-oong time. Typographic rules and conventions have had plenty of opportunity to establish themselves and there are loads of resources to help you out. The only problem is that by searching the internet you're only going to find yourself confronted with millions of conflicting opinions! Let's see if we can clarify a few things.
Here's a quick breakdown of what we'll cover in this guide:
- Your Aim
- How Many Fonts Should I Use?
- To Buy or Not to Buy?
- What's the Nature of my Content?
- How Do I Achieve Successful Pairing?
- Pairing 1: Concord
- Pairing 2: Contrast
- Pairing 3: Conflict
Your Aim
Keep the essentials in mind. When you're selecting multiple fonts to work together it's crucial that you maintain both unity and variety.
How Many Fonts Should I Use?
How many fonts you throw into the mix is entirely up to you, but bear in mind the overall effect you're trying to achieve. Fonts, like people, have personalities. And fonts' personalities, just like those of people, can sometimes clash. Think of your fonts as table guests at a wedding reception; one entertainer is usually enough as too many strong personalities can make the atmosphere awkward, like an episode of Big Brother.
Make sure that there is some charisma in the group though; eight people with little to say just results in a toe-curling wait for the speeches..
It's no longer around, but the Fusion Ads 2011 bundle site sicks in my mind as a great example of successful stack-em-high font use.
There are no rules to say you should or shouldn't use a specific number of fonts on a page layout. Using multiple fonts together can be difficult, achieving harmony is challenging, but if you manage it the result can be decorative and striking. Use fewer fonts and your task is more straight forward. Try to make the best of both worlds by selecting fonts with multiple variants and weights. In this way you can take advantage of an array of styles, safe in the knowledge that they'll compliment each other just fine.
To Buy or Not to Buy?
There are loads of free services through which you can take advantage of @font-face: google fonts, fonts.com, fontsquirrel's font kit generator, but don't immediately discount paying for fonts if the project warrants it. The cost of a single domain license can vary, but there are several advantages to shelling out.
Quality. The care and attention which goes into the production of commercial fonts is usually evident in the quality. That's not to suggest the designers behind free fonts are caged monkeys, far from it, but there is often a qualitative difference. It's a difference noticeable in the finer details; the line thicknesses, the forms, the white space and the kerning (spacing between characters).
Compare these two similar fonts..
The kerning executed with Museo is superior. Without some tinkering, the kerning in Quicksand is imperfect (focus on the 'o' and the 'i' for example), and tinkering with kerning on the web isn't hugely intuitive. There are tools, kern.js for example, which allow you to specify kerning on a per-character basis, but large bodies of text make this impractical.
"Big deal, the difference is barely perceptible!" you may say, but the devil's in the details. So my Nan tells me.
Originality. Another advantage is the opportunity to stand out with original work. Having paid for your fonts, there's a greater chance your design will retain an element of uniqueness.
Community. Putting your hand in your pocket is also a way of encouraging the growth of the industry. Foundries rely on healthy commerce to continue their craft. In any case, we're looking at a cost which can be factored into the project and passed on to the client.
Envato Market offers over 1,500 premium fonts for use in your projects, so feel free to have a look through and see what's available.
What's the Nature of my Content?
When selecting fonts it's important to consider the nature of the layout you're dealing with. Are we talking mainly body copy? Are there multiple headings, sub-headings? Perhaps it's a magazine layout with decks, blockquotes? When using multiple fonts make sure that the roles are clearly established; if one font is used as a sub-heading, don't switch to another font for a sub-heading elsewhere. Keep a font's purpose clear.
For the time being, we'll keep things straight forward and select a few font pairs. We'll consider the circumstances under which they'll work well together, and ask ourselves why.
How Do I Achieve Successful Pairing?
You might have already heard this; successful pairing relies on concord, or contrast, but not conflict. That is to say your selected fonts can work well together by sharing certain qualities, or by being completely different from one another. However, font pairs can conflict in a number of ways - being too similar being just one.
Let's examine each of the successful possibilities.
Pairing 1: Concord
Describing two fonts as having concordance suggests the presence of the same trait in both of them. Perhaps their kerning is similar, their proportions, their cap height. Have a look at these examples from Kerry Scott Jenkins and you'll notice clear proportional similarities.
One way of achieving concordance between fonts is to pair two from the same family. If they're family, they're bound to get on well, right?! In any case, the Droid family, designed by Steve Matteson for use on Google's Android devices, comprises various weights and styles, with serif and sans-serif faces. Perhaps a bit un imaginative, but these two work very well together. One or the other takes charge of headings, the other the body text.
Either way round is a great combination.
They're clean and modern, plus (as you'd expect) they're well suited for the web and smaller devices on account of their large x-height.
The x-height of a font describes the height from the base line to the upper reaches of the lower case characters, like the x. A proportionately large x-height helps with readability. And these two both share that quality.
Equally, fonts from the same designer often share qualities which help them achieve harmony. Look at the surprisingly similar proportions these two fonts display (check out the 'o')..
Pay attention to the line quality of two typefaces. They may at first appear to have nothing in common, but two crisply executed fonts may work better together than you'd think:
Softer lines together can be just as effective:
Pairing 2: Contrast
Contrast between fonts often lends a winning combination, but in what ways can fonts contrast? Here are just some qualities to look for:
- Style: Take a look at any font resource site and you'll see them categorized as Blackletter, Monospace, Script, Slab Serif etc. Fonts of different styles will often contrast.
- Size: Big font, little font. Say no more.
- Weight: Varying the weight of fonts is a common way to establish visual hierarchy. Hierarchy achieved by contrast.
- Form: Consider the proportions of a typeface. The relative length of the descenders, the curvature of the shoulders, the direction of the movement.
- Color: Not something we're going to go into here, but color can easily determine whether two fonts work well together.
At its most simple, consider the contrast between serif and sans-serif fonts.
It's a classic way of pairing; take a decorative serif for the heading and a sure-footed sans-serif for the body. Or take a no-nonsense sans-serif for the headings, with a pleasantly legible serif for the body. A winner in many cases. Let's look at a few, kicking off with two system fonts. That's right, even they can work well together.
Where can you see these two in action? Have a look at the skeleton boilerplate. Stripped of all superfluous styling, Georgia and Arial work perfectly in this environment.
For a little more refinement..
Don't forget the role of whatever text you're choosing fonts for. In the cases above, we've shown hierarchy through font-size; the headings are larger than the body text. There are other ways of establishing who's the boss, weight being an obvious one.
Let's say we're not concerned with an entirely textual page layout. Perhaps we're dealing with two headings and nothing more (an Under Construction message, for example). We can afford to be a little more adventurous as we don't have to account for long measures or large bodies of text. How about a striking h1, coupled with a reinforcing h2?
Condensed fonts always work well to get your attention, as they take up a lot of vertical real estate.
Here's an example of a similar combination working very nicely:
And for those of you interested, here's a breakdown of what those typefaces are:
- Script: Scriptorama Tradeshow JF
- Body copy: Actor (Google Web Fonts)
- Heading: Custom typeface by Simon Walker
And again, utterly contrasting qualities, yet a clear hierarchy through color which prevents either from stepping on the other's toes..
Or how about two straight-playing sans-serif buddies? The next main heading (Conqueror) is an inline font designed expressly for titling. With it being an uppercase font, you might need to expand the letter-spacing a bit, as done in the example below.
Inline describes a typeface with white lines appearing inside the character strokes. - fonts.com
Sadly, it's not available as a web font (yet) so you'll have to make do with it for pixel design at the moment.. It's definitely one of my favorite fonts at the moment.
Take this slab serif font; minimum effort, maximum impact.
Slab serifs make very effective attention grabbers, but can be a bit pushy if you're not careful. Bull in a china shop sort of thing. The above example works actually very well with its more delicate partner, because it contrasts whilst also sharing some personality traits. They appear to be very different fonts, but if you examine the curves, you'll see they're not as dissimilar as you'd first think.
Some fonts are just so delicious that you almost can't fail. Take Buttermilk for example; sumptuous, elaborate and decorative. It will look great whatever you pair it with (as long as you don't try to steal its thunder!) Here we have pairing with Georgia:
And with Aller, an equally subtle sans-serif:
Then this was going to be my example of pairing it with a clashing personality - too strong in its own right. But you know what? I can live with this, it's actually quite nice! I guess sometimes you can never tell..
Pairing 3: Conflict
Let's not focus too much on what doesn't work well, we don't want to sour the joyous combinations in the rest of this guide do we? That said, let's just illustrate how two fonts, which are arguably too similar, can look awkward together.
But why don't they work well together? I thought the idea was to contrast whilst ensuring an element of unity?
They're different styles; one's a Blackletter, the other Roman serif, check.
They have different proportions; one's condensed with a relatively large x-height, the other more extended with taller ascenders, check.
Yet they share weight and size, and both share those odd spurs on the end of each character.
Therein lies the problem. By sharing those last three details (weight, size and decoration) they've become too alike. They're performing very similar roles, but the small differences are conflicting which makes for an awkward overall effect.
The curvatures of the spurs, for example, are completely at odds with one another:
Their axes are just 'off':
And the way a Blackletter's formed gives it a slight direction, as opposed to the vertical nature of the Roman:.
These differences might not be a problem in other examples, but here we have two fonts which (at first glance) appear the same. It's a bit like when you see a celebrity standing next to their waxwork model at Madame Toussauds. It's never comfortable to look at.
It's difficult to attribute 'working' or 'not working' to facts and figures, normally it will be a feeling you get, you'll just know. Once you've concluded that you don't like a font pairing, try to work out why and it will help you make decisions more quickly in the future.
One Last Tip
These days, if you head on over to Google's Web Font directory, you'll find pairing suggestions for each font. Tidy.
Conclusion
I hope your approach to pairing fonts has been simplified by this beginners' guide. If there's one important rule you should take away from this it's "You won't know until you try!"
Be adventurous. As web designers we have an ever-growing repository of fonts available for use in our designs. Consider the fundamentals, then experiment. You'll undoubtedly be surprised by what you find.
