Find the perfect Google Font pairing for your website

Google fonts offers an entire library of fre web fonts to choose from. Great! But what happens when you actually scroll through that list of 650 options? Eyes glaze over, fonts start blending together, and you might just pick a font that starts with ‘A’ so you don’t have to scroll down any further (maybe that’s how Arial got so popular…)

But it doesn’t have to be that way. Choosing fonts can be fun rather than overwhelming. This Jimdo Tip will go through some of the basic ideas behind successful font combinations, and also provide a list of resources where you can find Google font pairings you like.

How many different fonts does your website need?

We usually recommend choosing 2-3 fonts:

Body/Paragraph text

You can’t fail with a sans-serif font here that’s very easy to read, especially at smaller sizes. Steer clear of cursive or all-caps fonts, which get tough to read in more than a few words.

Font layout found in Typecast, an easy way to experiment with web fonts

Headings

Here you can use something more decorative or fun, because you’ll only use it for short pieces of text. You could also use an all-caps font. Choosing a unique font here can help add a bit of flair to your website design.

Navigation menus

You can repeat one of your first two fonts here, or choose a third complementary font. Just remember that your navigation menus must be easy to read, so we recommend steering away from cursive or overly-stylized fonts. Like with your headings, you can use an all-caps font here.

For more information on the difference between serif, sans-serif, and decorative fonts (and recommendations for all of them), check out the article, “Guide to Google Web Fonts“.

Can’t you just use the same font everywhere?

You can. Ultimately there’s nothing wrong with a simple, minimal website, and you can differentiate your headings and body text using different sizes and colors.

That said, using 2-3 different fonts is a nice way to add some personality and visual interest to your site. Different fonts help develop a sense of consistency and hierarchy throughout your web pages. Just like street signs, different fonts used consistently will act as signposts to your users, so they can quickly scan a page and know what type of information they are looking at.

Just remember that variation does not mean a “font rainbow.” Using too many fonts will be like having way too many street signs in one intersection: overwhelming and confusing.

So how do you choose fonts that go together?

Beautiful font pairing ideas from the 25×52 Initiative. Here they use Playfair and Fauna One.

When you’re pairing fonts, you’re trying to introduce both unity and variety. In other words, you don’t want fonts to be so similar that they look too much alike (thus defeating the purpose of using different fonts). You also don’t want them to be so completely different that they clash or look like they come from entirely different worlds.

Some different matching techniques include:

Contrast

If you choose a really strong decorative font for your headings, you might balance it with a simple sans-serif font that won’t compete for attention.

Personality

Fonts can be modern, bold, soft, sophisticated, playful; and these font “personalities” should reflect the personality of your brand. If you’re going for, let’s say, a more feminine look for your website, you may choose two fonts that share that personality, even if they look different.

Time period

If you’re looking to evoke a certain time period, you might choose two retro fonts or two more old-style fonts.

Overall, make sure you find a good balance. As Ian Yates of Tuts+ puts it, “Think of your fonts as table guests at a wedding reception; one entertainer is usually enough as too many strong personalities can make the atmosphere awkward.”

I’d rather go with something tried-and-true. Are there sites that suggest good font combinations?

Examples from Fonts in Use, which archives designs’ use of typography.

You bet. There are a few sites you should definitely check out that recommend certain Google font combinations and show you exactly what they look like. If you don’t feel like reinventing the wheel, choose one of their combinations and run with it!

Along with a nice filter and examples, Google’s directory also offers pairing suggestions under the “Pairings” tab. If you already know a font you like (in this example we’ll use Pacifico), look it up in the directory like this.

This handy website has a pretty good list of font pair recommendations, sorted by type (e.g. Serif/sans-serif, Cursive-serif). Even better, you can type your text directly into their website to see how it looks with each font combo.