Best Google fonts for web design [infographic]

Categories How To, Infographics
The Art Of Mixing Typefaces (Google Fonts Edition) [INFOGRAPHIC]

Typography is often one of the most overlooked aspects of great design, but it’s also one of the most important. It’s easy to stick to the same old font design-after-design or simply to continue working with fonts that you’re comfortable with (Helvetica, for example) but if you’re one of the thousands of designers doing exactly that, you can rest assured that not only will you be limited in terms of possibilities, your designs will also become stale, outdated and boring rather quickly. This is why we need to take a look at the best Google fonts for web design.

Nowhere is this truer than on the web. For years (decades, in fact), we’ve seen the same old web fonts used on millions of different websites. Georgia, Helvetica, Arial; all of these have been long-term favorites of graphic and web designers alike and frankly, over the years, they’ve become rather boring and dull.

Recently however (i.e. in the last few years), we’ve started to see much more typographic diversity both on the web and in other graphic design mediums (e.g. print design). Many designers are experimenting with the hundreds of open-source fonts that have become readily available on the web thanks to the likes of open-source font directories.

Google Fonts is perhaps the most popular, well-known and widely used of these directories as currently, it contains in excess of six hundred font families, all of which can either be downloaded free of charge and installed locally (and then used for various graphic design projects) or alternatively, referenced directly from within a CSS file (making it exceptionally easy to include fonts in web projects).

Although Google Fonts makes hundreds of free, open-source fonts readily available to designers, it does nothing to solve the age-old problem of finding complimentary typefaces to combine in your designs. In fact, due to the sheer volume of fonts on offer from Google Fonts, it can actually make this problem worse than ever, as there are just so many different fonts and combinations to choose from.

Because of this, a lot of designers tend to be somewhat fearful of straying from previously proven and widely used Google Font combinations (e.g. Oswald and Droid Serif). It’s easy to understand this hesitation, as combining uncomplimentary typefaces can cause serious design issues and in some cases, even completely ruin a design. It’s also an extremely time-consuming task to compare various combinations side by side to see if they do/don’t work well together.

Luckily, this infographic entitled “The Art Of Mixing Typefaces (Google Fonts Edition), created by the UK-based printing company;, goes some way towards solving this problem.

It cross-references twenty of the most popular and widely used typefaces from Google Fonts inside a color-coded chart. The chart shows which pairing’s are likely to be great combinations, unlikely combinations or if they should be avoided. There are four hundred unique combinations in total, giving you a fair amount of scope for your next design project. It works especially well if you already have one font in mind but are struggling to decide upon a complimentary typeface to go with it.

As the infographic quite rightly points out, there is no typographic absolute and in some instances, normally incompatible typefaces might work well together. Still, the infographic serves as a great “cheat sheet” and should save hours that would have previously been spent searching blindly for a great font pairing.

The Art Of Mixing Typefaces (Google Fonts Edition) [INFOGRAPHIC]

Catalin Zorzini
Catalin is the founder of Mostash - a social marketing boutique - and he's always happy to share his passion for graphic design & social media.
  • Corey Roth

    Oswald and Yanone may not be the prettiest fonts in the world, but saying they should be avoided period is foolish and close-minded, not to mention bad design. They are perfectly serviceable for heading and sub-headings, as long as they match the mood of the content and their supporting font(s).

    You can easily pair them with a big slab or sans-serif for a heading, a compressed font for sub-headings, and a sans-serif or sans for the body copy. Alfa Slab One/Yanone Kaffeesatz Bold/Georgia is a nice pairing, for example.

    Don’t be limited by the imagination of others. Not everything needs to be a bland, tasteless sans-serif.

  • Sean

    I believe they are just saying to avoid using those as body copy. They have them pairing well with quite a few fonts when used as headlines.

  • Bitter with Arvo is an unlikely combination but Arvo with Bitter is great? :D

  • dnddiaf

    Somewhat ironically, a lot of designers don’t seem to know how to read the table.