Web Development: How to Combine Fonts, How Not To, and the Best Font Combinations

How to Combine Fonts, How Not To, and the Best Font Combinations

Final product image — What You'll Be Creating

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:

Fonts

100 Insanely Awesome Fonts From Envato Elements

Melody Nieves

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.

Check out the Bw Modelica font family. This minimal font comes in four widths, each containing eight different weights, and it includes italic styles. You’ll be able to use the heaviest weight for headlines or simply to call attention, a thin weight for a deck, and a normal weight for the body copy. Since this family includes widths, you can experiment even more!

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; 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.

5. Display Fonts to the Rescue

Let’s say you’ve chosen a good font combination, but the page still looks plain. Or you want to highlight the headline on a page, but you already have two fonts you are working with. That’s alright: display/decorative fonts are here to the rescue and can jazz up the design.

If you flip through a magazine, you’ll notice there’s usually a serif font used for copy and a sans serif for decks or headlines. But if you are feeling adventurous, it’s completely OK to use a decorative font for the headline. Avoid using these fonts in the copy; keep long forms of text as legible as possible.

Below we have Addington, a classic and versatile font that's highly legible at a small point size. Mojita is an intricate, geometric font that is inspired by Japanese Art Deco and Aztec and Mayan pattern design. In order to balance the visual noise that Mojita brings, Addington brings a traditional quietness. I see this pairing as one of the best font combinations for print, specifically a fashion magazine.

6. Avoid the Same Font Style

Using the same style of fonts can create conflict in the design. This is because, anatomically, they look almost the same. We have to keep in mind that readers won't always be professional designers, so they won't notice slight differences between fonts.

For instance, if you wish to use two serifs together, that’s going to be tough to make work on a page, and it can look like a mistake. Instead, you could try using a slab serif with a serif. Slab serifs are heavier than regular serif fonts and can work as the lead font in a design piece, while the serif font can act as a supporting font.

Let’s take Addington from the previous example (versatile, remember?) and mix it up with Bw Glenn Slab. This robust and sturdy slab adds quirkiness to the traditional Addington. You could use Bw Glenn Slab for headlines; it’s got the heaviness and personality to lead a page. Many newspapers use this pairing, and it's because it's one of the best font combinations. The slab serif is different enough and calls for attention, while a traditional serif lends legibility to long forms of text.

7. Use Hierarchy to Your Advantage

There are many qualities to consider when it comes to hierarchy. Size, color, weight, kerning—these variables can help you create a stronger layout.

For instance, a headline will be set at a higher point size than the copy. Therefore, the reader’s eye will go to the headline first and the copy second. If the headline's font weight is similar to the one on the copy, the design will lack contrast, and therefore the page will look monotone.

Choose fonts that give you the option to play around with their weight. Nista Grotesk and Antique have a variety of weights, letting you decide how to mix and match their fonts.

For instance, you could use Antique Regular in the copy of a layout and Nista Grotesk for headlines. The modern font helps keep the layout clean, and with seven weights, you can find the mood and determination a headline needs. Newer trends in design use a sans serif as the copy and a serif as the headline. This modern and contemporary look is perfect for print and resumes.

8. Stick With a Designer

If you are a beginner designer and you are still learning how to pair fonts, try mixing fonts from the same designer. Aside from using superfamilies, this is the easiest way to learn how to pair fonts. Designers have a particular vision and style, and this also applies when it comes to type designers.

Envato Elements has great designers with a wide range of fonts that you can use. Maulanacreative has an extensive library of handwritten fonts and sans serifs. Saturasi is a high-energy script that is sure to stand out in any layout, and here it's paired with Lostfield. This sans serif is a condensed family with multiple weights that can look great against the thin Saturasi lines.

Social media is becoming increasingly popular, so combining these two fonts is awesome if you are looking for a design with a strong impact. Website font combinations tend to be static, so what better way to add movement than with this awesome script.

9. Try Font Duos

Font duos are popular on Envato Elements. Designers have already gone through the rigorous process of finding the best font combinations. We all love a good time saver! These pairings come in handy if you are designing wedding invitations, social media posts, editorial pieces, and even logos. If you are looking for a specific mood, this is an awesome way to choose fonts.

Ripon is a classic serif accompanied by an elegant script font. The font duo has an airy and traditional feel with an edge. Perfect for wedding invites, stationery or fashion-inspired collateral.

The Audacity font duo contains a sans serif and a script font. This pair is perfect if you are looking for a handmade and vintage look in your designs. Brand development projects would benefit from this option!

10. Trust Your Gut

Like any skill, font pairing requires practice. You’ll only become better by trying things out and combining fonts on your own. Try pairing the craziest combinations with the most traditional ones to see how they work. There’s no exact science as to what font pairings will work perfectly together. It is all based on the content and the mood you want to evoke. Try multiple fonts, resize them, use different colors, and look at the characters as if they were images. Does it convey a feeling?

This awesome Lemonade font duo is the best combination for wedding invitations. Not many would think to pair a script with a serif, but this pairing works so well. The modern handwritten script keeps the design current, while the thin serifs of the second font add glamour and contrast. Both fonts are elegant on their own, but put together they make fantastic companions. So what feelings do they convey? Friendliness, authenticity, love: all positive feelings you'd want on a wedding invitation.

Conclusion

These 10 do’s and don’ts are a few pointers that can help you decide on the font pairings for your next project. While these are rules of thumb (psst! that means you can break them), it is good to get out of our comfort zone and experiment.

Let's round up the tips and tricks mentioned in this article:

Use a superfamily and take advantage of the variety.
Keep it minimal by combining only two to three fonts.
Choose contrasting fonts and styles.
Try to convey the mood of the content.
Spice it up with display fonts.
Avoid using the same font styles as pairs.
Use font weights to achieve hierarchy.
Combine fonts from the same designer.
Use font duos (who doesn't like a good time-saving tip!).
Trust your gut and practice, practice, practice.

There are many viable options you can take that will help you avoid mistakes. Once you get comfortable, jump in and begin experimenting with the craziest combinations. Envato Elements has an extensive library for you to explore, so you are sure to find something for your future projects.

If you liked this tutorial, you might like these: