A nod to designers, the only people on the planet who will ever care this much about pairing fonts!  When it comes to making eye-appealing work, proper font pairing is crucial.

It may not be as exciting as color theory or illustration, but it does make a difference in the overall look and feel of the design. For this reason, we’re taking a deeper look at font pairing and sharing our top 5 picks for Google font pairings in website design.

Why font pairing matters

One of the biggest reasons that font pairing matters is because it makes things much easier to read. If you’ve ever found yourself struggling to follow along with a website that hosts five different fonts that don’t remotely go together, and your brain begins to hurt from all of the chaos… you know why font pairing is key to achieving a pleasant experience for the viewer.

For this reason alone, you’re not going to pair several different handwriting or calligraphy fonts together; at least, we hope not.

Font pairing is also important for the feeling of the design you are working with. If you are working on a very serious and informative website, you wouldn’t use a comic-style font, like Hey Comic, would you? It would be like using Comic Sans on… well, anything.

Best practices for pairing fonts

The thing about good font pairing is that you don’t notice it because everything just flows nicely. When you visit a website with good font pairing, there is no visual friction, so you’re able to just read and enjoy the site without any abrasion.

Basically, you don’t want different fonts competing for the viewer's attention. Fonts should be strategically used to highlight certain areas but should not overpower one another to the point of confusion.

Here are some simple best practices:

1. Using two fonts successfully in a layout requires an understanding of the chosen fonts in order to be confident that they are complementary. In the beginning, you may find it easiest to choose fonts from the same family so long as they provide a contrast. It is okay to use one font family until you achieve mastery of that font, then move to combining different font classifications.
2. Skip a weight. Go from light to bold or from medium to extra bold when changing font weights. The key to great design is contrast. Slight changes in weight make it harder for the audience to notice the difference. Try mixing bold for the headline and light for the body copy for greater contrast.
3. Double point size. A good rule of thumb when changing point sizes is to double or halve the point sizes you are using. For example, if you are using 30 pt. type for the headline, use 15 pt. type for the body copy. For other uses, try 3x or 4x the point size for something more dramatic.
4. Align to one axis. Build your type along one primary axis and align elements to this grid line. For the vertical axis, align the left edge of your type. This will work regardless of font size or type.
5. Group by using rules. Use rules/lines to group related blocks of information. This will also make dissimilar objects appear more orderly.
6. Match the fonts to the feeling you are trying to convey within the design.

Top 5 Google font pairings

Now that we’ve covered some of the basics of font pairing, here are 5 you can have some fun with! As you look at each of the pairing examples below, pay attention to the best practices listed above at play.

1. Playfair Display & Alice

‍

2. Oswald & Quattrocento

‍

3. Cinzel & Julius Sans One

‍

4. Libre Baskerville & Source Sans Pro

‍

5. Sacramento & Alice

‍

With a few choices, you can start experimenting and see which font pairings work best for your project.

Remember that hierarchy is important. Creating a visual difference will allow you to guide the reader’s attention to essential information or calls to action. Typography is something every designer should strive to master.

Use this as a general guideline and see where it takes you. Design is as much about the science of presentation as it is about experimentation. Happy font pairing!

‍

‍

This article is brought to you by our Accelerator program. Accelerator is an educational and coaching program tailored for creative entrepreneurs. It offers detailed tutorials, regular coaching sessions, and a curriculum that guides you through launching and growing your creative business.

Accelerator might be just what you need, but we understand everyone's journey is unique. We recommend taking our Find Your Fit quiz to help pinpoint the right Futur™ offering based on your specific goals and stage in your career. Click here to take the quiz.

‍