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.
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.
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.
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
- Droid Sans
- Droid Serif
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.
Let’s take Open Sans again as example. Here’s just a sample of the ideas and inspiration you find here.
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.