How to pair Google fonts like a pro

If you are looking for free fonts / fonts that work across all platforms for your next web project then Google fonts is a great resource. 

Not only are the fonts free but they are open source, meaning you are free to use them for personal or client projects. 

Currently there are 818 fonts in the Google font library so you are bound to find a few gems for your next project. 

Let's get the font pairing party started. 

 

Pairing Google Fonts


Font pairing tips

  • It's best to keep your fonts to a minimum (depending on the project.) Using too many fonts can make your design look distracting and unprofessional. 

    For branding projects I like to keep it at two fonts,  a primary font for headers and larger text and a secondary font for body copy. 

    If you are designing something like an invitation or poster you might want to use more than two fonts and that's totally fine. It definitely depends on your project so just be mindful when deciding. 
     
  • Choose fonts that pair well together and add contrast. 

    You wouldn't want to pick two fonts that look similar. Let's take a look at why below.

    In the image below I'm using Open Sans and Source Sans (both Google fonts.)

    I'm sure you agree with me that this image is bland and not at all exciting to look at. Both fonts are similar and don't add that nice contrast.
Pairing fonts 

Now let's look at something a bit better. 

In the image below I've used Open Sans Extra Bold and already it is looking a bit more interesting. The bold font pairs nicely with the Source Sans font.

Pairing Google fonts

Finally, let's look at the image below. 

Instead of using the Source Sans font I replaced it with a serif font to add more contrast to the design. 

The bold sans-serif font pairs well with the regular weight PT Serif font.  

Pairing Google fonts

All it takes is small changes to your fonts to take your design from meh to amazing.

  • If you aren't sure how to add contrast to your fonts simply choose a serif and a sans-serif font. Plain and simple the two generally work well together. 
     
  • If you are feeling confused a good starting point is to pick one font family and use different weights within the family. In the image below I'm using only Open Sans but with different weights within the font family.
pairing Google fonts

The only way you'll become a font pairing pro is with practice. 

I suggest heading over to Google fonts and downloading a variety of fonts and then practice pairing them together.

Below I've paired a few of my favourite Google fonts for you to get inspiration from and maybe use them in your next design project.

 

 

Oswald Bold + Roboto Slab

Pairing Google Fonts

Shrikhand Regular + Source Sans

Pairing Google Fonts

Cormorant + Lora

Pairing Google Fonts

Abel + PT Serif

Pairing Google Fonts

Playfair Display Bold Italic + Open Sans

Pairing Google Fonts

Arima Madurai + Raleway

Pairing Google Fonts

Noto Serif Bold + Karla

Pairing Google Fonts

Parisienne + Source Sans Pro

Pairing Google Fonts
Pairing Google Fonts

I would love to hear what your favourite fonts to pair together are. Leave a comment below.