** Disclaimer ** - I am NOT a professional graphic designer, however I did work with many of them for different occasions and I have been designing my own things for over 10 years now. All the knowledge I have and share with you in this post was gathered by me over the course of 14 years.
I recently started my font series, where I shared my favourite fonts of different typefaces. People have been requesting to post my favourite font pairings and as much as I love to do that (and I also will, just scroll down to the end of the post to see them), I think it’s also important for you to understand, why they work together nicely and what you should look out for, if you plan on pairing typefaces yourself.
Understanding fonts and typefaces
There are so many to choose from nowadays. You have probably scrolled through the JUNGLE of fonts that you can find online nowadays, some are free, some aren’t and they all go by different category names:
Serif - Sans Serif - Script. All of them can also be Display fonts.
What do they mean?
A serif is a small line or a stroke attached to the end of a larger stroke. So all the little strokes that I circled in red. The most common serif font is probably Times New Roman, which I also used in the picture above (hence TNR).
Arial is a sans serif font, and also one of the most common ones. Sans serif is translated from french, sans meaning “without” - so it’s basically a font without the little strokes, much more clean and modern looking.
Now let’s move on to script fonts, which are more commonly known as handwritten or brushed fonts. Bombshell pro is a script font based on the looks of modern hand lettering.
Display fonts can be fonts from all the different typefaces above. They’re usually used in larger sizes for e.g. headlines or logos, instead of bodies of texts, like Times New Roman or Arial are mostly used for. Abril Display (I used it in a bold weight) is a display font, as well as a serif font.
Now that you know the differences between these typefaces, let’s dive into the different font weights.
Many serif, sans-serif and display fonts come in different weights (thin, light, normal/regular, bold, extra bold, black.. you name it). This is important as it plays a fundamental role in pairing fonts together.
Playing with different weights can help you underline the importance of the text you’re writing. I keep bolding phrases and words throughout this post, so you know to keep these in mind PLUS it’s easier to find the part of the post you are interested in. This also works for headlining on your graphics or gifsets!
Pairing different font weights
I will use the simple phrase “I will remember you” throughout the following part of this post.
First you need to figure out what you want to highlight. Do you want to highlight, that you will REMEMBER them? Or do you want to highlight that you specifically remember THEM (in the phrase ‘you)? Lay it all out for yourself, so you know exactly what to do.
The difference with these two examples isn’t too big, as you might have noticed. I used the regular and bold types for these examples. However, fonts like Avenir or Helvetica come with thin or even ultra light versions and you have more to play around with.
Script fonts usually don’t come in different weights, however you can utilise Photoshop to apply its bold addition to the fonts. It usually doesn’t look too nice though, so be warned!
Also, script fonts are harder to pair with one another, because it’s easier to cause an ‘overload’ for our eyes with pairing them depending on their level of ... let’s call it fanciness.
Now, you can pair the different weights together like this, centred.. and boring.. or you can play around with different font sizes, weights, kerning (click here to find out what kerning is) and positions. It’s fun, I promise! Just make sure you don’t forget which word(s) you want to emphasise!
Pairing DIFFERENT FONTS with each other
Now here’s the part people have asked for haha.
The first thing I want you to understand is, that the less is merrier does apply in this case. I personally n e v e r pair more than three fonts together (and I only use three different fonts for an entire corporate design including a website), two usually work the best!
For two different fonts to work nicely together, you (again) have to think about what you want to emphasise and create some kind of hierachy. In order to create an appealing design, you need to catch the viewers attention to the word or phrase you want. Create a focal point, something the eye is immediately drawn to. And then you add to it with simplicity.
You really have to think about what you want to be seen first and what you want to be seen second (on the base of using two different fonts).
Take a look at the fonts you have chosen. Display and script fonts usually need to be a larger size to be readable or to make them look good, so you probably want to use that one as the top of your hierachy. Also fonts with a heavier font weight tend to work better as the leading font. To accompany your leading font, choose a thinner, more simplistic companion. Why? Because if you use two heavy fonts or two fancy fonts (script, black, brushed etc.), your eyes will have a hard time concentrating on who is more important.
I hope this example helps you to understand what I mean.
In the first picture you see the whole thing as ONE block, because your eyes don’t know where the exact focal point lies. They don’t know which word they should concentrate on. The second one, however, gives your eyes clear instructions on where the importance of the quote/phrase lies.
Now how do you find out, if two fonts actually go together? Sometimes it’s also about the look of the whole design in general, if two fonts go well together or not. However, there are some things you can look for before you pair fonts:
Have a look at the weight, spacing/kerning, strokes in general and their width to figure out, if the two fonts you have chosen are different enough from each other, to actually pair well. Fonts that are too similar to each other have the same effect as shown above.
At the same time please also keep in mind, that they have to have some similarities, such as their general proportions and heights. If these parameters are too different, it might doesn’t look as good (there are some cases where you can make it work though, but you need to play around a little here).
If you made it this far, congratulations :D
This is not the ultimate guide to how you will always pick the right pairing of fonts, but it’s a start and something you can work on and evolve from! I hope it helped you. Feel free to message me, if you have any questions left. And now to what has been requested in the first place.
Here are some of my favourite font pairings:
(Avenir Next at kerning 200 + Abril Fatface)
(Avenir Next at kerning 200 + Sunbreath)
(Bodoni FLF at kerning 300 + Alberobello Script)
(Almondia at kerning 60 + Billy Ohio)
(Boysen at kerning 75 + Saturday Rock)
I hope you found this useful! :) Feel free to share!
