You know I LOVE to talk about fonts, right? It’s my favourite part of any design project and I love font shopping more than a Kardashian loves buying shoes. But, my go-to font resource is Google Fonts. What’s not to love? There are 888 Google font families – all web safe and all completely free. And when I say free, I mean completely free. You can use them for any project, on and off line, for branding projects and commercial templates you intend to sell. Even better, nearly every website-building platform offers at least a cut-down selection of Google Fonts, if not the full range.

Sure, I do use some custom fonts in my website designs, but when I put together a suite of typography for a client, unless they have a very specific preference, I try to make sure that the subheading and body fonts are Google fonts. They load fast, are supported by all browsers and they just work.

So, using them is a no-brainer, but the challenge lies in wading through those 888 font families to find the real diamonds. Before we start, let’s run through a few of my basic design rules when pairing fonts.

• Don’t pair similar fonts. If you’re leaning towards a similar look, try varying the weights of a single font rather than going for two lookalike fonts.
• Pairing a serif and sans serif font always works.
• Avoid pairing a handwritten font with a serif or italic font
• Avoid using italics with sans serif fonts.

Pairing Within Font Families

There are some great pairings to be found within Google’s font families already. Google calls them Super Families and you can see the full collection here. They are designed to work harmoniously together. One of my favourite combos is PT Serif and PT Sans. I love the look of PT Serif for headings and body copy and the Sans works so well as a small subheading. My top tip is to add plenty of letter-spacing to your subheadings and buttons.

Contrasting Serif and Sans Serif Fonts

Pairing serif fonts (the ones with small lines and cornices attached to the ends of the letters) with sans serif fonts (smooth lines) is my go-to font pairing formula for nearly every project. But don’t forget to play around with the weights within a font family. Here, I’ve paired Montserrat, one of the most-loved and most-versatile Google fonts, with the lovely soft serif, Lora. The gently curved letter cornices of Lora contrast beautifully with the hard edges of Montserrat. In the example below, I’m using the bold, regular and light versions of Montserrat to increase the visual interest.

Varying Character Widths Between Fonts

The characters which make up typefaces vary in width and range from extended (open) to condensed (narrow). Pairing a condensed heading font with an wide-faced body font gives a modern editorial feel and works well when you’re short on space to contain headings. See how beautifully the narrow strokes of Oswald work here for the heading and button when paired with the open shapes of Quattrocento Sans.

Pairing Striking Display Fonts with Sleek Sans Serif Fonts

Google Fonts has a surprising good selection of display fonts (which aren’t great for continuous text but look killer for short headings). From classic cursives like Lobster to the disco-tastic Monoton, there are plenty to play with. Here’s fashion-forward heavy ultra serif, Abril Fatface. Team it with a classic sans like Lato in different weights, and it looks stunning. A word of caution when it comes to display fonts. Use them sparingly and avoid situations where you might end up with a long heading, like a blog post. You can have too much of a good thing!

And finally, if you want someone to do all the work for you, or just need a little inspiration, there is a handy resource called Font Pair, which showcases some of the best pairings in the collection. Happy font hunting!