This post contains affiliate links that I could make commission off of. All opinions are my own. Learn more.
One of the most intimidating aspects of design and branding is typography. There are so many fonts out there, it always seems impossible to choose!
And even after you’ve slimmed it down, how the heck are you supposed to figure out which ones look the best together without spending hours upon hours of putting random fonts together?
I promise: it’s actually not as hard as it seems! It will still be time consuming, but these tips will make it a bit easier!
Typography 101: Types of Fonts
In order to know how to pair the fonts, we need to know what all of the different types of fonts actually are.
Because think about it… are you going to know how to create a cohesive meal if you don’t understand the different types of foods? Probably not. You might end up pairing cotton candy and caviar, which… no thanks.
There are so many different types of fonts, and they might be grouped differently depending on who you’re talking to, but getting a general understanding will help you out a lot when making difficult typography decisions.
Serif
First up, we’ve got serif fonts. As the name implies, they’ve got serifs, or small lines attached to the end of each stroke. Think of the classic Times New Roman here.
Rules
Serif fonts are commonly used for large bodies of text because they’re easier to read than sans-serif fonts (which we’ll get to in a second). The serifs help guide your eyes across the page. However, this is typically only true for printed text, like books (which is why you’ll notice most books are written in a serif font).
They can easily be written in Title Case, CAPS, and all lowercase while still keeping their readability.
Sans Serif
Conversely, we’ve got sans-serif fonts. You’ve probably already figured out what they are, right? They don’t have serifs. (In French, sans means “without,” so the name is literally “without serif.”)
It’s commonly shorted to simply “sans,” so if you hear people talking about sans fonts, they’re referring to sans serifs.
Rules
Sans are my favorite fonts, because they’re super simple and modern. You’ll notice that my blog’s body is in a sans serif typeface (Lato). While a lot of people argue that serif fonts have better readability, plenty of people use sans serif fonts because they align with their brands better (myself included!).
It’s not that they’re hard to read by any means, just that they’re not quite as easy to read. But the difference is negligible. Plus, while serif fonts help your eyes scan across a page, you’re typically jumping around on a web page from the headings to the sidebar to the social media icons, so the benefit of the serifs don’t really matter.
Just like serif fonts, sans fonts can be written in Title Case, CAPS, and all lowercase while still keeping their readability.
Script
Next we have script fonts. They’ve typically got letters that connect together, much like cursive lettering. Script fonts are very popular right now; it seems like everywhere you look in the blogging industry (here included!), you’ll see some sort of script font.
Depending on who you ask, fonts that look like brush strokes (like the “And Possibly” in my logo) could be considered script or display. I personally group them in with script fonts, but don’t be surprised if you see them called display, too!
Rules
Script fonts should really only be reserved for small bits of text. The more words you have written in script, the harder the text is to read. It’s also best to have them in a larger type size rather than a smaller one; you’ll notice in the image above that the “Script” title is much easier to read than “Viktor Script” below it, even though they’re the same exact typeface. The size makes all the difference!
And please, for the love of God, do not use ALL CAPS with script fonts. They’re specifically designed to be written in Title Case or all lowercase, so ALL CAPS just looks trashy (plus it’s really hard to read!). Please don’t do it.
Display
Similar to script, you’ve got display. These are typically more unique fonts that are meant to be more novel. For example, one of my main fonts is Bebas Neue. It’s very boxy and only comes in ALL CAPS, even if you’re typing in lowercase.
Rules
Use display fonts sparingly. They should never be used as body text, and for the most part are going to show up best in a large type size. For example, Rosewood Std would be really hard to read if it were any smaller than it is in the image above.
Use these for headers, text-based logos, and other short snippets of text. Less is better when it comes to display fonts.
Blackletter
As a Michigander, Blackletter fonts are super common to me. They’re the old, gothic-style fonts that seem to have a million lines and swooshes with them. I know Blackletter best as the style of the Detroit Tigers D logo! (Fun fact: the Tigers actually have two different Blackletter D’s!)
If you’re not a Michigander or a baseball fan, you’ve also seen this around thanks to the New York Times!
Rules
Similar to display, use Blackletter sparingly. It’s pretty chunky and hard to read, so the less you use it, the better. (That doesn’t mean it doesn’t have its place, though!)
And just like with script, please don’t use Blackletter in ALL CAPS. It can be hard enough to read in Title Case.
Dingbat
And finally (for the purpose of this post, at least), we’ve got Dingbat. The most popular Dingbat font is the choice of most grade schoolers: Wingdings. (You might even hear people refer to Dingbat fonts as Wingding fonts!) Rather than your typical letters, numbers, and symbols, Dingbat fonts have icons. So, a capital R might end up looking like a person instead of an actual capital R.
While this may seem really impractical, they’re actually super useful! Just remember, the point isn’t for people to understand the letters you’re typing; the point is to have easy access to awesome icons.
For example, the script font I use on my blog, Hello Beautiful, came with a Dingbat font called Hello Beautiful Swashes. It’s literally just different styles of swashes you can use to underline your text. The designer included a convenient PDF guide that shows all of the swatches and their coordinating letter so it’s easy to find your favorites!
Rules
Just remember, you’re using Dingbat fonts for easy access to icons, not to represent the letters you’re actually typing. So don’t try to spell out things with Dingbat fonts (unless you’re a grade schooler sending secret messages to your BFF, then it’s cool).
Pairing Fonts
Okay, now that we’ve got the six basic font types down, how the heck are we supposed to pair them?! There are a few ways…
Type
First, there’s type. When you’re choosing fonts (I recommend sticking with two, especially when you’re just starting out — any more than that can get complicated fast), choose two different types of fonts. So, for example, a serif and a sans serif. Or, like I did with my logo, a display and a script.
Serif and sans serif combos are the most common, because they’re the easiest. So if you’re overwhelmed, look for one of each of those!
It’s really hard to find two serifs or two sans serifs that go well together. They typically look too similar, so it’s not very attractive. That’s why you want one of each.
Once you start getting into display, script, and blackletter fonts, the pairing gets harder. That’s when we add a second layer into our pairing strategy.
Theme
Next, make sure your fonts have the same theme. For example, if you go with an old-worldy Blackletter font, go with another classic font like Times New Roman rather than something super modern like Bebas Neue.
What emotions do the fonts bring out? They should be pretty similar!
Weight
And finally, take weight (that is, the thickness of the lines) into consideration. It’s going to be easier on the eyes to pair a thick font with a thinner font. You don’t want two big, bold fonts, or they’ll fight for attention and be hard to look at.
One nice thing about pairing fonts based on their weight is that, if you find a font with a ton of weights (like Lato, for example), you can just use the one font and choose two weights with it.
For example, you could choose Lato Black and Lato Thin, and then you wouldn’t have to deal with finding a second font!
Picking fonts is one of the hardest parts of design, but once you understand the basics of typography, you’ll be a lot more comfortable with it!
What are your favorite fonts to pair? Let me know in the comments!
