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.
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.
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.
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.
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.
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
Shrikhand Regular + Source Sans
Cormorant + Lora
Abel + PT Serif
Playfair Display Bold Italic + Open Sans
Arima Madurai + Raleway
Noto Serif Bold + Karla
Parisienne + Source Sans Pro
I would love to hear what your favourite fonts to pair together are. Leave a comment below.