Sans-Serif Google Font
Google fonts have a vast collection, so selecting or pairing the right font can be overwhelming. Here's a little bonus: More fonts like Open Sans, Lato, Montserrat, Raleway, Roboto, Oswald, etc. Are good options from Google Fonts library which I have purposefully not included since they are already quite popular and used by many brands. Montserrat is one of the most popular fonts that is used out there. It is a geometric sans-serif that features a unique style with a particular underlined style. All the letterforms and letters are based on the lettering and scriptures found within the Montserrat neighborhood of Buenos Aires. Google font pairs are not always easy when script fonts are used. This font combination uses Dancing Script, one of the better script fonts in the Google fonts catalog. Dancing Script is a very feminine font and has been paired with Josefin Sans.
Julieta UlanovskyThe old posters and signs in the traditional Montserrat neighborhood of Buenos Aires inspired Julieta Ulanovsky to design this typeface and rescue the beauty of urban typography that emerged in the first half of the twentieth century. As urban development changes that place, it will never return to its original form and loses forever the designs that are so special and unique. The letters that inspired this project have work, dedication, care, color, contrast, light and life, day and night! These are the types that make the city look so beautiful. The Montserrat Project began with the idea to rescue what is in Montserrat and set it free under a libre license, the SIL Open Font License. This is the normal family, and it has two sister families so far, Alternates and Subrayada. Many of the letterforms are special in the Alternates family, while 'Subrayada' means 'Underlined' in Spanish and celebrates a special style of underline that is integrated into the letterforms found in the Montserrat neighborhood. Updated November 2017: The family was redrawn by Jacques Le Bailly at Baron von Fonthausen over the summer, and the full set of weights were adjusted to make the Regular lighter and better for use in longer texts. In fall, Julieta Ulanovsky, Sol Matas, and Juan Pablo del Peral, led the development of Cyrillic support, with consultation with Carolina Giovagnoli, Maria Doreuli, and Alexei Vanyashin. The Montserrat project is led by Julieta Ulanovsky, a type designer based in Buenos Aires, Argentina. To contribute, see github.com/JulietaUla/Montserrat
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!
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!).
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.
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. Fusion 360 2 0 7400.
Nunito Sans (14 styles)
https://fonts.google.com/specimen/Nunito+Sans
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
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.
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
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
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
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.
Google Fonts Montserrat Medium
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
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
Google Fonts Montserrat Link
Merriweather (8 styles)
https://fonts.google.com/specimen/Merriweather
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!
