10 Tips for Pairing Fonts

Key Points:

• Designers often feel constrained by traditional schooling, leading to uninspired work.
• Knowing the rules of font pairing can enhance creativity and help create visually appealing designs.
• The article offers 10 practical tips for effective font pairing, working exclusively with free fonts.
• Understanding type hierarchy and contrast is essential for clear communication in design.
• Experimenting with typefaces allows for artistic expression and innovation.

Well, let's slow it down. Most of the boring design and creative work you see today is done by designers who are stuck in the box they were placed in by art school, and many have a baked-in fear of leaving this comfort zone because they were never shown the ways of the creative unknown.

Where things are fluid, fresh and exciting, it's good to know the rules so you know when you're breaking them. That being said, there are some core principles upon which generally you can lean when you're approaching a new project and need to pick out great fonts. That's what this whole video is going to be about, specifically pairing fonts.

These are my best 10 tips for making that process a little easier and helping ensure you get really cool sets of fonts to work with for your project. We will also work exclusively with free fonts, so any font recommendations will be available to anyone watching.

Now, there is also a link to the accompanying blog post for this video down in the bio. And in that blog post, I have 10 font pairings that I've picked out and linked to those free fonts, as well as a bunch of other really cool type pairing resources and things that I think will really help you out to get started.

Let's learn to speak the language of type so we're all on the same page here.

Serif: Serifs are the little projecting bits on the end of letters. Serif fonts look like something you'd see in a book.

Sans Serif: Sans means without. So as you would expect, this is a font that has no serifs. Sans serif fonts are usually something you would see on a screen. Look at the fonts that your operating system or your phone is using right now in that bar that runs across the top or maybe the bottom of your display. They're probably sans serif. At least they probably are in their default state.

Slab Serif: These fonts have thick, blocky serif projections. These fonts are much like regular serif fonts, but they tend to be very straight and somewhat thick. They have this industrial feel about them.

Script: These are fonts in which each letter is connected together, much like when handwriting, if you do that fancy cursive script thing.

And lastly, and maybe most importantly, we have this idea of hierarchy. This is the importance or order of the type in your document. Are you creating type in a way that a user can quickly discern between the header, subheader and body text, and does that remain consistent throughout your website, print, project, mobile app, or whatever design you're working on now?

Now that we have that out of the way, let's begin looking at these tips.

Number one: Make one typeface. We can take one font and use varying weights and sizes to create something that looks like two different fonts while they're actually the same. Using different sizes and weights can create a great contrast, while the fact that they're from the same font family ensures you'll have fonts that match and work together very well.

Second: The type should contrast, not clash. What does this even mean? Well, when you have two fonts and they're nearly the same style, like these two fonts, both very straight, sans serif, bold, tall and chunky, they just don't look pleasing to the eye when they're together.

And the same can be said for two serif fonts that are just too similar. And like we see here, not only is too little contrast a bad thing, but too much contrast can also be a bad thing. You have to strike a balance.

And it's much more important just to know that, generally speaking, you want some kind of reasonable contrast between your two typefaces.

Tip number three: Start by combining only one or two fonts. Trying to combine three or more things will start to get crazy very quickly.

Now, the fourth tip is a nice little trick. Look at the x-height of the two fonts. Fonts that have similar x heights, which is actually the height of the letter x, will often blend well, especially if you're looking for and using fonts that don't have massive contrasting qualities.

I found that this rule can often be completely ignored, but it's still a nice sort of measuring tape that you can keep tucked away in your designer tool belt if you ever need an extra boost of reassurance that your fonts are indeed kicking tail and looking sweet.

Now, number five: This should be obvious, but avoid using double script. You know, script in the header and script in the body. That's pretty much always a bad idea.

Also, try to avoid the double serif unless fonts are from the same family. And if they are from the same family, simply use weight and size to establish a clear hierarchy in your text. The double sans serif, however, well, that can usually actually be a good mix.

Tip number six: Combine a sans serif heading with a serif body text for a classic look that will instantly make your work seem more professional. For some reason, this combination just works.

Oh, it's probably because of that whole contrast thing we talked about before.

Tip number seven: Let's get a little mathematical here. We want to get the sizing right. Make sure there's enough of a difference between your header, subheader and body text that the reader can quickly distinguish between them all.

I like to structure my sizing generally around the golden ratio, you know, the Fibonacci sequence. The key is the number 1.618. You might want to write that down until you've memorized it.

Here's the scoop. Let's say we've picked two fonts that should work together, but we just need to get the sizing right. Now for this document I'm working in, I want the body text to be readable, so I'm going with 50 points.

If you're used to working on the web or in your general text editor, a base body text is usually 12 points. This larger size is just because of this particular example and this particular Photoshop document that I'm using.

I'm going with 50 point for my body text and then to figure out my subheader text, I'll multiply that number by 1.618, which gets me right around 81 points. I've done that by multiplying 50 by 1.618 and then rounding it to the nearest number, which of course is 81.

Now one other thing that I should note. I like to begin with my smallest typeface, which of course in this case is my body text. The reason for that is because I want to ensure that it will be readable. This will be the smallest type in our project, so if that's readable, everything that's bigger will also be readable.

I will then repeat this process for the header text, but in the case of the header, I can simply multiply 81 by 1.618, which is going to bring me up to 131, but I don't think that's big enough.

So, I multiplied 131 by 1.618 again which brought me finally to 212 points. And there I was happy!

Tip number eight: A good starting point is if the heading type is simple, strong and bold. Just make the second font more complex yet more subdued.

Tip number nine: For a simple three font combination. If you're feeling risky tonight, try a straight modern serif font for your heading with that same font a little smaller and italicized as the subheader. And then the body text would be a straight line or any geometric sans serif font.

Now one thing I should add that you're going to be looking for as you flow through and choose your own font pairings is you want to watch the width and height of the letters.

Sometimes when you have a font pairing that seems like it should work but for some reason just doesn't look right, usually it has to do with either the width or height of one or both typefaces. You want these almost always to be pretty similar.

Now the 10th and lastly: If all else fails, pick any large, bold, sans serif font and pair it with a font that looks like the body text for your average hardcover book. In all likelihood, it's going to look pretty good.

Now, before we get out of here again, take advantage of the accompanying blog post linked in the bio to this video. I have a bunch of font pairings over there and also some really great tools that are going to help you.

Especially if you still can't seem to wrap your mind around this whole font pairing thing. Take advantage of the great work of other people to instantly bump up the quality and, dare I say, textual attraction of your own work.

What is your favorite font or font pairing? Leave a comment down below. Combining fonts is as much an art as it is a science. So when the rubber meets the road, if it looks beautiful to you and it feels right, just go for it. Don't be afraid to commit, even when you're unsure.

The creative mind doesn't follow the rules. Instead, we like to take the road a little less traveled.