There are no firm rules for pairing fonts. The overall goal is to create a great looking typographic design with your font combinations.
Choosing the right fonts can seem like an impossible and confusing task, whether or not you are a graphic designer. Using Google font pairing, you can easily showcase your design's personality using any of their thousands of open-source, free fonts.
My goal is to help you feel more confident in selecting the right Google font combination for your heading, subheading, and body text that convey the message or tone you want.
In this post, I'll go over the basics of font pairings and showcase of Google font pairing examples you can use in your next design.
What is Google Font pairings?
Good font pairing means selecting fonts that project a pleasing contrast to the reader's eyes. It's important to choose font combinations which provide contrast in complementary ways.
Opposite styles, weights, and sizes can be combined harmoniously.
The best Google font pairing makes your content easy to read. As well as clearly getting your message across to your audience.
How Do You Pair a Font?
Opposites attract in human relationships, and in font pairing. Opposite styles, sizes, and kerning (spacing) can all work well together.
The goal of font pairing is to choose the best Google font combinations that complement each other, while offering visual contrast at the same time. You can combine a sans serif typeface with a serif typeface or even different weights and styles from the same font family. To make your font pairing process easier, you can use Quicktools by Picsart. Quicktools offers a range of tools that allow you to create fonts and customize them to your liking. With Quicktools, you can easily mix and match different Google fonts to find the perfect pairing for your design work.
Below are some key insights on how to create the best Google font pairing.
Tip #1 Compliment or Contrast
First and foremost, always try to choose two fonts that match each other. It doesn't make sense for both fonts to battle for your reader's attention. The font combinations must be balanced.
It is very important to use different font styles for visual diversity. It defeats the purpose to select fonts that are basically the same. Your choice of Google fonts can cause a design to shift in one direction or the other.
Tip #2 Keep it in the Family
Using different fonts from the same typeface or font family can be a simple and effective way of ensuring perfect font pairings. Many fonts belong to the same family, which include an assortment of different types, weight, and classifications. These Google fonts are specially developed to work together and provide the best font combinations.
Tip #3 Opposites Attract
As with colors, you can use different font styles to enhance your design and convey the right message. Two very different fonts are rarely compatible. However, the right combination can make all the difference. Using the font types I'll show you below, you can decide with Google fonts go together and which do not.
Tip #4 Who's the Boss?
The best font combinations provide a good visual harmony between the selected Google fonts. To achieve this goal, use various sizes and weights of the typefaces.
If one of your fonts presents a strong personality and a very distinct style, don't make the mistake of pairing it with another font that also attracts a lot of attention. Your best bet is to pair a distinct font with a more neutral one. Or maybe use an elegant serif font with a sans serif typeface.
Tip #5 Ensure Good Readability
When you are deciding which font pairings to use, make sure that the font combination works well together. Each font has a personality and a mood.
Avoid make the mistake of pairing fonts that don't work well or look good together. Ask yourself if your reader will be able to distinguish between the heading and body fonts easily.
If the font pairing looks odd to you, it will look odd to the reader as well.
Types of Fonts
There are four categories of fonts: serifs, sans serifs, decorative, and script. Good design utilizes a mix of fonts that allows you to let your creativity shine. Don’t be afraid to mix and match different font styles.
Below are the four different categories or styles of fonts and their uses:
Serif Fonts
Serif typefaces are recognized by the small strokes attached to each letter. Classic Serif fonts are a great typeface for books, novels, and newspaper print. The thick and thin strokes combine to create a look that’s strong and bold. When designing, serifs pair well with their opposite style: sans serifs.
Serif Example: Libre Baskerville, PT Serif, Playfair Display
Sans Serif Fonts
A Sans Serif typeface means that there aren't any serifs attached to letters. You can use a sans serif font on your website, as the paragraph text (body text), in a blog post, and in other flat designs.
Sans Serif Examples: Oswald font, Lato font, Work Sans, PT Sans, Century Gothic, Franklin Gothic, Source Sans, IBM Plex sans, Source Sans Pro
Decorative Fonts
A decorative or display font provides more creative detail and flexibility than serifs or sans serifs. These fonts are often used in logos, packaging, posters, and other graphic design projects. They are typically used as the focal point of a text-based design. The best font combinations, for decorative fonts, can be achieved by combining a serif with a sans serif font.
Decorative Font Examples: Lobster font, Bebas Neue, Abril Fatface
Script Fonts
Most script fonts look more like hand-lettering. These fonts are used mostly for wedding invitations, greeting cards, and shorter headlines.
Script Font Examples: Delius, Fredericka the Great, Stalemate
How to Combine Fonts on Your Website
One of the places where you can implement a good font combination is on your website.
Getting the right font combination isn't too hard. Stick to two typefaces (or max of three). Start by using a classic sans serif and serif combination. This will give you many different font pairings to work with: normal, bold, italic and bold italic for each typeface.
Below are some great font combinations to get you started:
Pair Chunky Fonts With a Skinnier One
The font weight meaning the thickness or thinness of the letters is where you can see the contrast best. Font combinations that include chunky fonts often work well with taller, skinnier fonts or ones that have condensed or light versions.
Readers can see the distinction between the two fonts. The difference helps to create an eye-catching design.
You can use a chunky or thick sans serif font for your header with a light version of your serif typeface.
Make sure your font combination is easy to read.
Combine Tight Kerning With Looser Kerning
Kerning is the spacing between characters, in a font. Most programs will allow you to space out the letters of either of your font pairs.
This is a great time to utilize the different weights within the same font family. You could use a condensed style on one of your great fonts and space out the letters. On the other font, keep the kerning normal. This makes a nice font combination.
Pair a Traditional Heading with a Decorative Body
Since headings are used to attract the reader's attention, choose a traditional serif font that will stand out. Pair it with a typeface that is considered a display font or decorative body text to make your project more visually appealing. This will make a very interesting font combination.
Not Too Similar
The name of the game is Contrast, so when you are creating your font combinations, make sure you focus on that. Which is why serif and sans serif fonts make great Google font combinations.
You don't want to pair Google fonts like Open Sans and Source Sans together, or Calibri and Arial, they basically look the same.
Instead choose a display font like Bebas Neue and pair that with Open Sans. This will make a great font combination.
Not Too Different
Just as you don't want your font combination, to look too much alike, you don't want them to look so different that it looks odd.
Yes, you want your header and body text to be different, but you also want the design to flow with the different fonts you've chosen.
Some font combinations look good in your head, not on paper or your computer screen.
Keep the different font types in mind when you are choosing your Google fonts, this will help you to make the best choices for your font combinations.
Serif and Sans Serif Together
Don't think too hard about which Google fonts go together. Make it easy on yourself and choose one traditional serif font like Playfair Display (Bold) and one popular sans serif font like Open Sans (Light) and use them for everything. This is an easy-peasy font combination.
Modern Fonts for Your Website
If you want to use custom fonts on your website, you'll need to install one or more of the modern typeface styles.
Modern fonts aren't really modern, they were developed in the 18th century, however they are the choice of many WordPress websites because they are sharp, sleek, bold, and create an interesting look for your website.
Unfortunately, these fonts aren't part of Google Fonts, but I felt they were worth the mention for the graphic designers out there who are looking for something a little more edgy. Get all the details on how to get them on your website. You can create unique font combinations with modern fonts.
Examples: Intro, Komoda, Stoked, Candy Cane
Good Font Combinations
Want more examples of the best font pairings? Here are 8 Google font combinations to get you inspired to experiment with Google font pairings for your projects.
Alegreya + Source Sans Pros
Alegreya contrasts beautifully with Source Sans pros' compact, minimalist look. Alegreya was recognized as one of 53 font designs of the decade at the 2011 Typographer Competition. Source Sans Pro was developed by Adobe designer Paul Hunt in 2013. This Google font presents the best of a sans serif being matched with a serif font. This makes an exciting font combination.
Example: Alegreya as a header font and Source Sans Pro as your body text.
Merriweather + Lato
Merriweather offers an impressive but friendly appearance, which makes it ideal for headlines or big words. Merriweather includes serif and sans serif styles. Lato is a very popular sans serif typeface. It's often used for web design projects. Together, these two fonts make a strong font combination.
Example: Merriweather Black as a header font and Lato as your body text.
Great Vibes + Montserrat
Bring whimsy to the font combination party using the Google script font Great Vibes and the sans serif font Montserrat. Montserrat offers an extensive font range with varying weights ranging from light to dark. This font pairing works well when you use Great Vibes in an upper/lower case style. These fonts create a unique font combination.
Example: Use Great Vibes or Montserrat in infographics and flyers. You could also experiment with using the Oswald font, which is also a sans serif, instead of Monserrat.
Philosopher + Mulish
Philosopher has an energetic almost chaotic feel to it. Vernon Adams created Mulish to use for display text in your font pairings. The Philosopher and Mulish Google fonts form the foundation for well-rounded design and make a great duo for font paring.
Example: Pair Philosopher with Mulish on infographics or flyers.
Lora + Lato
Both Lora and Lato provide varied weights. A word of caution, bold and italisized versions of this font combination are hard to read under 24 px. However, this is still a nice font paring duo.
Example: Utilize Lora and Lato for presenting reports.
Lobster + Open Sans
Lobster is a script font that's been downloaded millions of times. Lobster and Open Sans are a natural pair to create from the variety of Google font combinations.
Example: Use Lobster and Open Sans on flyers, postcards and menus.
Helvetica Neue & Garamond
Helvetica Neue is a timeless sans serif font and Garamond is a classic serif font. Together, they make an incredibly compatible couple. They are simple yet clean and traditional. You really can't go wrong with this font combination.
Example: Helvetica Neue headlines and the classic Garamond for text.
Playfair Display & Source Sans Pro
Playfair Display offers an excellent option for larger sizes and has an effortless modern look for a serif typeface. Source Sans Pro is a nice sans serif font. This is a great Google font paring.
Example: Playfair Display for headlines and Source Sans Pro for text.
Conclusion
The right font combinations make readability easy. The process can actually be fun. You get to see the fruits of your labor in the projects you create. Great Google font pairing makes your project look inviting and professional!
Whether you combine a sans serif font with a serif font, or you decide to use one font family and incorporate different weights in your creative process, the end product will look great.
Have fun. Let us know how your font combinations work out.