Joshua Krohn

Google Fonts Part 3: Favorite Combinations

Welcome to the third and final part of our three-part series in which we take a closer look at Google Fonts.

In Part 1, Chase Turberville discussed not only how we find value in Google Fonts, but also how we present them to our clients. In Part 2, John Oates showed us some Google Font alternatives to popular commercial fonts. Be sure to check those out if you haven’t already.

Good Pairs

In Part 3, we’re going to walk through some of our favorite type combinations from Google Fonts. At the time of this writing, there are 877 font families available for free. Having so many fonts available can give us decision paralysis so the goal with this post is to narrow the list down into some of our all-time favs.

Some of the fonts on our list you’ve probably seen before. Playfair Display, Montserrat, and Roboto are pretty popular. We also wanted to uncover some gems you maybe haven’t seen, plus give you new ways to combine old favorites.

Type hierarchy can be a tricky part of visual design to learn. Along with the endless sea of fonts available, there are also an infinite number of ways to pair them. Just as important as the combination itself is how you use fonts. Size, contrast, repetition, and proximity make it even tricker to arrive at a beautiful and cohesive hierarchy.

As such, this post is organized into three parts. If you’re just starting out in your design career, the beginner section has some great foundational tips. As you feel yourself leveling up, there’re more intermediate and advanced ways to combine type.

With that, let’s get into it!

Beginner – Example 1

Gf3 Beginner 1

One of the surest ways to hone your typography skills is to stay within one font family. You can make really dynamic layouts just by using font size and weight.

This type example only uses Libre Baskerville. Not only are we using a single type family, but we’re only using one weight: regular. Changing up the size, style (regular or italic), and case type (sentence or all caps), gives us a lot of flexibility within a design.

Libre Baskerville (3 styles)
https://fonts.google.com/specimen/Libre+Baskerville

One problem you can run into with Google fonts is that they have limited styles. Especially for client projects, you generally want to pick fonts that have a lot of styles. Picking a font with at least eight styles is a good rule of thumb (regular, medium, semi-bold, and bold with matching italics). It gives you much more flexibility to design proper hierarchy.

It’s disheartening to come up with the perfect type hierarchy, only to find out it has one style. This is the case with Libre Baskerville; it only has three styles with regular, italic, and bold (not even bold italic!).


Beginner – Example 2

Gf3 Beginner 2

Here’s an example where having a single style can work. The headline is Archivo Black. It’s the only style available in Google Fonts. However, its sister family, Archivo, has eight styles. We’re using Archivo Regular in the rest of this example.

Archivo (8 styles)
https://fonts.google.com/specimen/Archivo

Archivo Black (1 style)
https://fonts.google.com/specimen/Archivo+Black

If you’re looking for more flexibility beyond the standard eight styles, look no further than Google Fonts’ Superfamilies. What makes these families “super” is that they have matching sets (sans and serif, for example) that are designed to work together in close harmony.

What’s even more useful is many of them have more than eight styles and they can include thin, extra-light, light, extra-bold, and black. These additional styles can be used when you need even clearer hierarchy than a family with eight styles can afford. This is especially useful for UX and UI applications.


Beginner – Example 3

Gf3 Super Family 1

Nunito Sans is one of those superfamilies on Google Fonts. It has fourteen styles, three of which we’re using in this example. The headline is extra-light, the kicker above the headline is black, and the rest of the layout uses regular.

Nunito Sans (14 styles)
https://fonts.google.com/specimen/Nunito+Sans


Beginner – Example 4

Gf3 Super Family 2

Alegreya is another superfamily available on Google Fonts. It has ten styles, adding extra-bold to the standard eight styles. In this example we’re using regular for the headline and body, italic for the block quote and photo caption, and medium for the byline.

Alegreya (10 styles)
https://fonts.google.com/specimen/Alegreya


Intermediate – Example 1

Gf3 Super Family 3

Sometimes you need a bit more flavor in your hierarchy than one family (or superfamily) can give you. It’s at this point you can start adding in additional fonts. An easy way to add contrast is by choosing a sister font family. A sister family is one that shares its name with another family but is designed with different letterform styles.

This example makes use of Roboto sister families: Roboto for the body, Roboto Condensed for the headline, and Roboto Mono for the kicker and photo caption.

Roboto (12 styles)
https://fonts.google.com/specimen/Roboto

Roboto Condensed (6 styles)
https://fonts.google.com/specimen/Roboto+Condensed

Roboto Mono (10 styles)
https://fonts.google.com/specimen/Roboto+Mono

If you’re ready to level up and create even more visual interest, then choosing contrasting fonts is one of the simplest ways to do that. This contrast is achieved by pairing a serif headline with a sans-serif body or vice versa.


Intermediate – Example 2

Gf3 Intermediate 1

In this example, visual interest is created by contrasting the serif headline (Playfair Display) with the sans-serif body (Montserrat).

Playfair Display (6 styles)
https://fonts.google.com/specimen/Playfair+Display

Montserrat (18 styles)
https://fonts.google.com/specimen/Montserrat


Intermediate – Example 3

Gf3 Intermediate 2

Having a serif headline paired with a sans-serif body isn’t the only way to create visual contrast. In this example we’ve reversed the roles and put the headline, kicker, and article lead in Karla, a sans-serif font. For contrast, we used Merriweather, a serif font, in the body and photo caption.

Karla (4 styles)
https://fonts.google.com/specimen/Karla

Merriweather (8 styles)
https://fonts.google.com/specimen/Merriweather


Intermediate – Example 4

Gf3 Intermediate 3

Using a serif/sans serif pairing isn’t the only way to add visual interest. As we saw in the Roboto Superfamily example, we can also use different sans-serif fonts to create contrast. Here we’re pairing Barlow Condensed for the headline and details with Montserrat for the body.

Barlow Condensed (18 styles)
https://fonts.google.com/specimen/Barlow+Condensed

Montserrat (18 styles)
https://fonts.google.com/specimen/Montserrat


Advanced – Example 1

Gf3 Advanced 3

And finally, when you’ve exhausted the many ways to combine two fonts–whether that be through sister families or through contrasting styles–you can start combining three (or more!) fonts.

In this example, we’re following the things we learned in the previous section. We’re pairing sans and serif fonts together for contrast, but we’re also adding in a condensed headline for more visual punch. The headline and date are Oswald; the subheadline is Playfair Display; and the body and kicker are Source Sans Pro.

Oswald (6 styles)
https://fonts.google.com/specimen/Oswald

Playfair Display (6 styles)
https://fonts.google.com/specimen/Playfair+Display

Source Sans Pro (12 styles)
https://fonts.google.com/specimen/Source+Sans+Pro


Advanced – Example 2

Gf3 Advanced 1

In this example we’re doing a similar thing but we’ve changed some of the duties around. We’re pairing two sans-serif fonts together for the headline and subheadline, and then combining that with a serif font for the body. The headline and photo caption are Work Sans; the kicker and subheadline are IBM Plex Sans Condensed; and the body is Merriweather.

Work Sans (9 styles)
https://fonts.google.com/specimen/Work+Sans

IBM Plex Sans Condensed (14 styles)
https://fonts.google.com/specimen/IBM+Plex+Sans+Condensed

Merriweather (8 styles)
https://fonts.google.com/specimen/Merriweather


Advanced – Example 3

Gf3 Advanced 2

In this last example, we’re using a trio of serif typefaces to create visual interest. The woodcut-inspired slab serif Ultra is our headline; the subheadline is PT Serif; and the body is Merriweather.

Ultra (1 style)
https://fonts.google.com/specimen/Ultra

PT Serif (4 styles)
https://fonts.google.com/specimen/PT+Serif

Merriweather (8 styles)
https://fonts.google.com/specimen/Merriweather


We hope you enjoyed this series on how we use Google Fonts. How do you find value in Google Fonts on your projects? What are some of your favorite alternatives to commercial fonts? And what are some of your go-to combinations? We’d love to hear and learn how you use them!


Give this a share if you enjoyed it :)