Four Resources To Help You Pair Google Web Fonts On Your Website

How many times have you installed a great WordPress theme with an option to choose unlimited Google Fonts and found yourself at a loss as to what to do with all this freedom?

Choosing typefaces that work well on your website is a matter of taste, practice, and also some willingness to learn about use of type on the web.

When it comes to working out if X typeface goes with Y typeface, this is also a matter of familiarity with the topic, practice, and gut feeling.

Luckily, there are both online and offline resources to help us with our font choices. In this post, I’m going to point you to four great ones.

How Many Fonts Do I Use On My Website?

The mere fact that a theme lets you easily add unlimited Google Fonts quickly and easily, doesn’t mean that knowing how many fonts to add is at all obvious?

As in most things when it comes to web design, there isn’t a hard and fast rule or an absolutely good and wrong way of doing something.

However, there are some tips that at least will let you steer clear of a disastrous outcome and get you started on the right path. About fonts on the web, one such tip is: less is more.

There’s plenty of variation that can be achieved with one typeface alone, but if this is too little for you, start by using two typefaces, one for headings and another for body text. This way you stay safe.

Once the problem of How many fonts? has been answered, here’s another one: Which two typefaces go well together?

Fonts Pairing On The Web

A general piece of advice on pairing two fonts without much risk of getting it wrong, is to look for contrast in the typefaces’ letterforms. In other words, use a serif typeface, the kind with small lines at the end of the letter stroke, and a sans-serif typeface, a typeface without the serif.

This is a good start, but it’s still a bit generic. Besides, there are plenty of cases where this tip is totally disregarded with great results, it only requires more of an eye and practice with pairing web fonts. I want to avoid being technical and pedantic here, therefore I send you straight to these great free online resources for something more practical to use.

Google Pairing Suggestions

The first port of call when you need help pairing Google typefaces is – would you believe it? – Google itself.

Simply type the name of a Google typeface you like in the Google search box, and you’ll be directed to a page where you find some useful information about that typeface.

One piece of great info you’ll find there is about pairing. Let’s say, you’d like to use Source Sans Pro on your website. Knowing with which other typefaces this one has been used on the web would certainly help you decide on a second typeface that nicely complements it.

Look for Source Sans Pro using your favorite search engine and you’ll find the page dedicated to the typeface of your choice. Once there, select Pairings from the options panel.

Google Font Pairing Suggestions
Google Font Pairing Suggestions

Here, you get three suggestions for heading fonts to use with Source Sans Pro as body text: Gloria Hallelujah, PT Sans, and Ubuntu.

If at this point you’re still looking for more, keep reading.

Google Fonts Typography Project

The 25×52 website is dedicated to launching twenty five projects in fifty two weeks.

A fascinating project on this site is the Google Fonts Typography project.

Here’s what the 25×52 website says to illustrate the project and its inspiration.

There are over 650 Google web fonts available for free. Problem is, pairing typefaces isn’t easy. And, many of the fonts in Google’s library don’t work well when applied to typical webpage (desktop) layouts. Using passages from the Project Gutenberg transcript of Æsop’s Fables, this collaborative, ongoing project helps provide typographic inspiration for using Google’s free web fonts.

Google Fonts Typography project
Google Fonts Typography project

The Google Fonts Typography GitHub page is impressive and well worth visiting.

The Art Of Mixing Typefaces Infographic by FastPrint

The third resource for you to check out is the The Art of Mixing Typefaces Google Fonts Edition by FastPrint.

This is a great infographic that shows which typeface goes well with which both as heading and body copy.

The Art of Mixing Typefaces Google Fonts Edition Cheatsheet
The Art of Mixing Typefaces Google Fonts Edition Cheatsheet

For example, Let’s take Open Sans, the first typeface on the vertical line, as our body text. The infographic easily illustrates that good choices of typeface for headings that go well with it are:

  • Open Sans itself
  • Oswald
  • Droid Sans
  • Droid Serif
  • Raleway
  • Oxygen
  • Lora
  • Lobster
  • Bitter

Other possible combinations would be rather unlikely.

This is a fantastic tool but, if you want more, read on.

The Fonts In Use Website

Finally, head over to the Fonts In Use website and browse through a plethora of typeface combinations used on great websites on the Internet.

Fonts In Use is not limited to Google Fonts, but you’ll find them as well, together with plenty of other options.

A great feature of this website is its search utility. You can browse samples by Industry, Formats, and Typefaces.

Fonts In Use website search utility
Fonts In Use website search utility

Let’s take Open Sans again as example. Here’s just a sample of the ideas and inspiration you find here.

Fonts In Use website search results for Open Sans typeface
Fonts In Use website search results for Open Sans typeface

To Sum Up

Typography for the web is such a huge topic. My aim here was simply to point you in the direction of a few free online tools. These are great to help you reach a brilliant result when you set out to choose the typefaces for your website.

Some theme developers prefer to give users a set of font options and let them choose within those constraints. Others, offer users the option to easily download and apply any number of fonts from the WordPress backend.

In the latter case, if in doubt as to what goes well with what, head over to the resources pointed out above and you’ll be surprised how effective they can be.

If you become fascinated with web typography and would like to delve deeper into this topic, have a look at this fantastic illustrated guide of typographic terms by Canva.  Also, grab a copy of Jason Santa Maria‘s latest work for A Book Apart, On Web Typography. A great read not to be missed!

Finally, a free comprehensive tutorial series is on Webdesign Tuts+.

This is far from an exhaustive list of resources, but it’s enough to get you started.

How do you go about choosing the right typeface for your web project? Which online tools, if any, do you use to do the job? I’d love to hear all about it in the comments below.
Advertisements

Have your Say

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s