After a lot of hard work, stakeholder meetings, and thought, you are finally getting inspiration for a great design on your next website. Then, you start to think about fonts. The number of font choices available to us are so numerous that it can quickly get overwhelming.
To keep things simple, you go for that one font you just love and apply that across the board. Headers, body font, sub-headers. In many cases, this is a good enough strategy. Several fonts are perfectly fine applied to any type of content on a website.
However, for this new design, you want to create some visual interest or show contextual hierarchy. Alternatively, your client or stakeholder might need the design to convey a certain attitude. Combining different font families is a great way to assist with designing for these cases.
Learning to Pair Fonts
Mixing font families can be a recipe for greatness! Or, a devastating failure. With the stakes this high, it only makes sense to follow a few simple guidelines.
Before we start though, a disclaimer: typography is more an art than a science, and sometimes your gut reaction is a better guide than any list of rules.
With the disclaimer out of the way, here are a few basic guidelines to serve as an "intro to typography."
The easiest way to ensure harmonious typography is to stick with fonts in the same family across a design. If your font family has a small cap version, try using that for header fonts, while sticking with the standard version for body text. Alternatively, a scripted style can be used on subtitles or pull quotes.
It's even perfectly fine to stick within a single font. With the right contrast in weight, a single font can lend depth to your design. For example, Proxima Nova has dozens of varieties. The right combination of weight and width can provide more than enough interest.
Thinking about harmony leads to three basic rules for typography:
- Keep it simple. A single font can provide as much variety as you need.
- Take baby steps towards variety. Start within the same font family.
- Show contrast. Use contrasting weights to express hierarchy.
Sure, there are limitless options for fonts, but you don't have to use all of them. Pick two font families that work well together and stick with those.
For example, a sans-serif header is a great pairing for serif body text. This is a pretty classic arrangement since serif fonts are generally thought to be easier to read for longer stretches of text. For extra oomph, pick a thicker, more narrow serif font for the header and a slightly playful serif font for the body.
Now we can add a final two rules to our list:
- Avoid similarity. If you pick two different font families, make sure they're different enough to be noticeable! Otherwise, people will think you've made a mistake.
- Character relationship. Compare characters between the two font families for a sniff test. Are the O's in each family similarly rounded? If so, you have a good match! Break this rule and risk discord.
Don't limit yourself
On the other hand, all rules are meant to be broken.
Some of the most classic styles of typography involve a smattering of disparate fonts. Prime examples of mixing a large number of type faces are both Victorian advertisements and other printed artifacts. Nowadays, this style can evoke quaint excitement.
Fun Resources for Picking Font Pairings
There are so many resources available for picking fonts, so certainly there are some you'll enjoy more than others.
- Beautiful Web Type is a kind of look book covering Google fonts. The pairings are not updated too frequently, but you can follow the author for changes. At the very least, you'll get your creative juices flowing!
- typespiration is a much larger resource than Beautiful Web Type, but also covers free fonts. typespiration is a very useful site because it provides font family names, some CSS code (if you're into that), and lets you place a baseline grid if you need to test line height.
- Typ.io is a great resource! Font pairings are shown in their "native habitat" so to speak, so you can get a very realistic picture of how the fonts interact.
Use these resources to play around with different options and see which fonts work well together. And don’t forget, sometimes your intuition knows best.