It is said that typography is the most important part of graphic design. It has the power to stop your readers in their tracks if you've made the right choices. Size, color, leading, kerning—all these elements form a layout. But before all that, there's the font selection process.
Font combinations in layouts, websites, and logos are incredibly important as they are the first step that gives life to your design. If you flip through a designed pamphlet or layout, you’ll notice designers tend to use two or three fonts. This is because combining fonts can be difficult, even for the most experienced designers.
Good font pairing is important because it dictates how professional, readable, and aesthetically pleasing your design is. If you don't combine the right fonts, your design will suffer, and the reader might feel overwhelmed with the choices and simply skip the text.
Use typography as a tool to make your design stand out from the crowd. Avoid pairing fonts just because you like them; try to make sense of them. In this article, we’ll give you some tips and tricks on how to pair fonts and the best font pairings from Envato Elements. For this article, it’ll be great to check out The Different Types of Fonts to understand font classifications.
If you didn't know, Envato Elements has a great font library that includes serifs, sans serifs, decorative fonts, and scripts. Discover the best ones here:
My personal favorite is the decorative fonts section. If you are looking to liven up your design, display fonts are essential, especially since they can evoke specific moods and feelings.
Follow along with us over on Envato Tuts+ YouTube channel:
1. Use a Single Font Family
If you are a beginner designer and you are still unsure about how to combine fonts, take the safe route. Superfamilies are font families that carry many weights and styles within the same typeface. By sticking to one superfamily, you are one step further into creating a minimalist layout. Plus, you’ll know the fonts will work together because, anatomically, they are the same.
The advantage of using a superfamily is that the designer has taken care of the smaller details of the font by adapting it for larger and smaller scales. So if you need to use one style as a headline and one for the copy, you’ll be sure the characters will be readable at both sizes. Superfamilies have endless options that allow you to mix them up. These qualities are great if you are looking for website font combinations, or if you are designing a resume layout.
2. Keep It Minimal
Not many people like to set boundaries, but when it comes to pairing fonts, it is always a good thing. Try not to spend too much time combining multiple styles of fonts. Try to stick to two or three fonts maximum—it’ll save you time, and readers won’t skip reading the content.
Fonts have personalities and may compete for attention on a page. If you choose a superfamily and stick just a few options, that also counts! Try combining a serif with a sans serif or a script with a sans serif; that’ll give you the right amount of variety to keep your design exciting.
Below, I paired Tharon Brush Style with Berlin. Tharon is an energetic, handwritten font that is perfect for a logo or for the headline on an editorial piece. The font is bold and strong, so it needs something modern and basic to balance it. That’s where Berlin comes in—this sans serif font is geometric and structured, and stylistically it is the opposite of the handwritten font. Berlin is minimalist and clean, perfect to pair with a font that evokes movement.
3. Choose Contrasting Fonts
Deciding on a couple of fonts for your layout is a serious business. You want the fonts to contrast and complement each other. Anatomically speaking, if there isn’t much difference between the fonts, it can come across as a mistake. It is common and some might even say a rule of thumb to use a sans serif and a serif font because these are different enough to put together on a layout.
Some designers might even venture to use two fonts of the same classification. For instance, if you choose to use two sans serif fonts, make sure they evoke similar moods but are completely different from each other.
Consider how you are using the fonts and how you can go about it. You can achieve contrast by mixing weights, kerning, and styles. If you are really inclined to use two completely different fonts, you can go classic with a sans serif and a serif, or depending on the theme you could use a script and a serif font.
Below we have Ropstone, a vintage decorative font inspired by classic posters. There are a couple of ways to go with this: we can combine it with a script font or with a sans serif. A great script font to pair with Ropstone is Ink Blank. The calligraphic feel contrasts nicely with the decorative intricacies of Ropstone.
If you’d like to keep it simpler, choose a sans serif font like Noir Pro. A sans serif font will support the decorative font without getting in the way too much. The decorative font can be used in special instances only, like headlines. Meanwhile, a sans serif font can be used for body text to keep it legible and let the decorative font shine. If you are working with a vintage theme, this a good font combination for print and an editorial piece.
4. Convey the Intended Mood (Text and Content)
Fonts are like humans: each one has its own personality and character. If you are designing with a specific mood in mind, pay close attention to the type of font you are using. For instance, a kid’s birthday party invitation can be forgiving when using decorative fonts. You wouldn’t want to use the same font in a formal document like a resume or a high-end restaurant.
Every font has a story, and more often than not it conveys a specific time period. Avoid using a sci-fi font on a text that speaks about traditional printing processes. Instead, read the text and understand its meaning before choosing a font, and think which fonts could enhance the theme. This is applicable for all font styles.
Almeda is a vintage decorative font that would perfectly fit a 1920s text, an invitation, or an editorial piece. A great companion for Almeda is Bw Vivant (No longer available); this elegant font conveys the glamour of the Art Deco days. The uber clean shapes make it perfect as body copy to support the intricacies of Almeda.