Are your font combos not quite right? Is your over-the-top use of Comic Sans MS sending your prospective clients running for the hills?
I love fonts. Without them, the online world would be a boring place. Fonts give us endless combinations to create stunning designs. But put those font pairs together in the wrong way and it may just result in a big ugly, frenzied mess. It’s a lot like pairing food with wine, or celebrities with one another… They may be beautiful, but putting them together can have disastrous consequences.
Pairing fonts well requires an eye for design, but if your design-eye needs trifocals, don’t worry, with a little practice and a few simple rules, we can have you pairing fonts that look like they were born for each other.
Before we get started, here’s a little info you should know. There are 4 main categories of fonts: Serif, Sans-serif, Script and Display.
Serif fonts have tiny embellishments added to the ends of the strokes of a letter. Some examples of serif fonts are Times New Roman, Georgia, Bookman Old Style and Garamond.
These fonts can be used pretty much anywhere. You’ll see it used in body text and statement text like headers, titles and logos.
Sans-serif fonts have no embellishments. They are simple, easy-to-read fonts like Arial, Lato, Century Gothic and Roboto.
They’re mostly used for body text, but can be enlarged and bolded for use in headers, titles and logos as well.
Script fonts are designed to resemble handwritten and/or cursive fonts. Some examples are Corintha, Mistral, Freestyle Script and Scriptina.
They are most often used for text that needs to make a statement like headers, titles and logos.
Display Fonts (also called Decorative Fonts) have significant embellishments like swashes, ultra-bold strokes and exaggerated serifs. Examples of these are Jokerman, My Turtle, Goudy Stout and Ravie.
They should generally only be used sparingly for areas that need to make a statement, like headers, logos and titles.
Now that you’ve learned about the 4 main font types, let’s get to some quick and easy rules for combining fonts for matches that are made-in-heaven.
5 Quick and easy rules for pairing fonts
Rule #1. Too much of a good thing really is too much.
Too many different font types combined will make your design look frazzled and hectic. In modern design, less is more, so stick to 2 or 3 fonts that complement one another.
As a general guideline for this rule, it’s safest not to pair script fonts with each other or with display fonts. The same applies to display fonts – don’t pair them with each other or a script font. Going back to my favorite celebrity analogy, pairing 2 display fonts is a little like pairing Roseanne Barr with Tom Arnold – put them together and things may get loud. 🔊
Pair statement typefaces like a display or a script font with a simple serif or sans-serif font.
Rule #2 Choose bolder fonts for titles and thinner fonts for body text
In a reader’s mind, the boldness of a font defines its importance. As an example, just review this article. The most important text is in a larger font, or is bolded so that the reader can easily see what each section is about.
If your design has too many bold fonts, instead of making titles and headlines stand out, nothing will.
As a general rule, the bolder the font, the more important it is, so your boldest font should be used only for headers or titles. Regular weighted fonts should be used for body text.
Rule #3 Differentiate your text hierarchy with font sizes
Like bolder fonts, large font sizes should be used for important text like headers and titles. Be sure your text sizes contrast with each other enough that your reader can easily see the difference. You can see what I mean in the example below.
Rule #4 Contrast don’t clash
Using contrasting fonts to make your design distinct and unique is a great idea, but be careful that your fonts are contrasting, not clashing. When looking for fonts to pair, evaluate their respective heights, weights, proportions and overall feel. Using fonts that are just too dissimilar may create a mismatch even if they follow all the other rules.
In this example, because the 2 fonts on the right share similar proportions, they pair nicely while the pair on the left clashes because they are too dissimilar.
Rule #5 When in doubt, keep it in the family
If you’re still not sure which fonts pair well together, a good rule is to use fonts in the same family, but contrast them using their size and weight. You can even try out italicized versions of the fonts.
In this example different variations of Raleway font pair well together on the right.
Font pairing tools
If you’re still not sure, you’re in luck, because there are a bunch of online font-pairing tools that can help you pair fonts like the match-maker you were born to be.
Add your starting font to the search bar and see which fonts it pairs with. Alternatively, select from the available font pairing filters and it will find a match for you.
Bet you didn’t know about this little Canva bonus. Enter your starting font and scroll through a myriad of gorgeous font pairings.
Need a little font inspiration? This site will show you examples of what font pairings are trending now. You’re sure to find a combo that will turn some heads.
To steal a little tidbit from the fabulous Marie Forleo, “Everything is figuroutable.” Follow the rules above to create some show-stopping font combinations, and if you’re still not clear on the rules, get some inspiration and help from font pairing tools.
Ready, set, start pairing!
Ps- I’d love to know your favorite font pairings. Let us know in the comments. And if you’d like to make this little task extra fun, compare your beautiful combo with your favorite celebrity pairing.
My recent favorite would be Cormorant Garamond with Raleway. It’s our Brad and Jen of font choices (yes, I know they’re not still together, but a girl can dream).
**This is an affiliate link. If you happen to purchase anything at Canva, we get a little pocket change if you’ve previously clicked the link. 😉