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
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
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
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
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
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
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
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
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
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
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
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!
