SPEAK VISUALLY Receive practical tips on how to
communicate visually, right in your inbox.
If you think learning how to combine fonts is a skill needed only by designers, think again. Whether you’re creating a presentation, typing a document or redesigning your resume, you’re making decisions about what fonts would look best together and in what sizes.
Choosing the right fonts for your design can mean the difference between a compelling, attractive design and a boring, lifeless one.
Just think about how many times you’ve gone to the trouble of choosing something other than the default Times New Roman or Arial for your projects. This is because fonts matter in the overall visual impact of your design, and each communicates a very different and distinct message on its own.
To help you improve the quality of your designs and the impact of the messages contained within them, we’ve created a handy guide to pairing fonts that will save you time and a lot of unnecessary headaches.
First of all, it’s important to know the difference between a serif and a sans serif font. The first refers to a typeface with a small line attached to the end of a stroke, while the latter refers to a typeface without any stroke embellishments, like the font used in the sentence you’re reading now.
A safe bet when it comes to pairing fonts is to combine a serif font with a sans serif font, like in the example above. Why? Because, as a general rule, the more contrast between your fonts, the better. See how the differences in the anatomy of the two fonts on the right create an overall appealing design? Meanwhile, the two on the left simply don’t work well together because they’re too similar.
However, you also want to stay away from fonts that are so different that they tread the fine line between contrast and discord. For example, put Garamond and Sabon together to see what this means. Or try Helvetica and Univers together, which is also an unattractive combination.
Another way to apply the previous rule is to avoid choosing typefaces from the same categories, such as Script or Slabs. (Script refers to typefaces that link one letter to the next and are used mostly for headers or display. Slabs are a type of serif with thick, block-like projections at the end of letter strokes.)
If you do this, you won’t get enough contrast and will likely end up with conflict. For instance, try combining Clarendon and Rockwell to see what happens.
Or look at the example above. The combination on the left brings together a Slab with another Slab. Poor choice. There’s little contrast, which makes it unappealing to the eye. The combination on the right, however, combines a Slab with a Sans Serif. This seemingly insignificant change makes a world of a difference and entices the viewer to read the text.
A third way to achieve contrast is to get enough difference in point size between the various fonts. The text on the left, for instance, uses a 24-point font for the header and an 18-point font for the body copy. There’s too little contrast in size, which makes it harder for the reader to distinguish what’s most important.
The order in which you read information should be clearly defined by a visual hierarchy in your design. For example, the text on the right uses a big enough header to allow the reader to quickly perceive a visual hierarchy defined by the relative difference in the scale of the typefaces used.
Another way to ensure a clear visual hierarchy is to use varying font weights, with clear differences in the boldness of the fonts used. For instance, you can try combining Didot and Rockwell; you see that they simply don’t mesh well together because they both have a heavy presence.
Or, in the example above, you see that the best combination is achieved by matching the heavy Roboto Black with Roboto Light. The key to achieving the right amount of contrast is to understand that fonts are a lot like people: When you mix two with a whole lot of personality or presence, then you have yourself a discordant design. But when you combine an eye-catching one with a neutral or lighter font, you find harmony.
A good tip to remember is that consistency is crucial to a professional-looking design. One way to do this is to assign a role to each of the fonts used throughout your document. For example, you can use the same font for article titles, another for the body intro, a third font for the body copy and so on.
In the example above, the text on the right looks much cleaner due to the consistent and exclusive use of a type for header and another type for body copy.
Another key to pairing font is recognizing that each font has a personality and a mood. Don’t make the mistake of pairing fonts that simply aren’t meant to go together. For example, don’t pair Impact and MTF Cool Kid. While Impact is bold and blocky, MTF Cool Kid is playful, simplistic and childlike.
In the example above, Nexa Rust Slab and Airstream aren’t exactly a perfect match. Snidely is a display font with a rough look to it, while Airstream is a decorative, retro font.
If one of your fonts has a whole lot of personality and a very distinct style, don’t make the mistake of pairing it with another font that also attracts a lot of attention to itself. Your best bet is to pair a distinct font with a more neutral one.
In the example above, Blackjack, a script font, is combined with another script font, Milkshake, resulting in a very jarring design. The example on the right, however, uses the more neutral Montserrat Light, making the design much more pleasant and readable.
While contrast is always a good thing, be careful to steer clear of discord. The first creates visual harmony; the second just repels readers. The key is to combine fonts that at first glance seem to be very different but are actually similar in terms of proportions and x-height (the height of the character “x”). (Again, font combinations are a lot like people.)
For example, Futura with Times New Roman doesn’t work well because there is too much contrast between widths.
Don’t forget that using different fonts from the same typeface can save you a lot of time and produce just the look you’re going for. You might do well, for example, with a Helvetica Black for a header and a Helvetica normal for your body.
Or, like in the example above, you can combine Raleway Black Head with Raleway Thin. (They’re both from the same font family, so they should get along!)
You might be looking too hard for just the right combination. Instead of overthinking it, just stick to two–max three-combinations and, above all, keep it simple. Stick to two typefaces by using a classic sans serif and serif combination. This would potentially produce up to 8 different fonts to work with: normal, bold, italic and bold italic for each typeface.
There are some fonts that look great in large sizes but are barely readable when small. For this reason, it’s important to experiment with different sizes as some font combinations can fall into place at a certain point size.
For instance, while Helvetica can be used at both larger and smaller sizes, another font like Impact is very unattractive when small. In the example above, the script font Pacifico is too condensed and bold to work as body copy. As a header, however, it works just fine.