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:
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.
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.
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?
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:
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.
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.
If you’re looking to evoke a certain time period, you might choose two retro fonts or two more old-style fonts.
This is a little harder to spot than contrast, but similar proportions or similar letter shapescan help two fonts go together. Fonts from the same family (like Roboto and Roboto Slab) will share similar traits.
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?
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.
This ongoing project offers beautiful font inspiration with passages from Aesop’s Fables set in different Google font combinations. It’s fun to scroll through even if you’re not looking for new fonts.
Type.io is like a museum of beautiful websites curated from around the web, with information on the fonts used in each. You can sort their library to only show you examples of Google web fonts.
Similar to type.io, Fonts in Use is a collection of websites sorted by font. This is a good option if you already have a font in mind and want to get ideas of creative ways to use it or pair it.
Want to have a little bit more fun with this? Type Connection sets up your font search as a dating game, so you can practice picking out good matches.
Finding fonts in the wild
What if you happen to stumble across a website using fonts you just love? Well, you’re in luck, because it’s easy to look under the hood and see which fonts they are using.
One last tip: just because a Google “web” font exists doesn’t mean it’s right for a website. Scroll down the list and you’ll see a lot of fonts that are hard to imagine in actual usage. If you suspect a font might be too hard to read, it probably is.
Also remember not to worry too much about this. As in real life, there’s no “perfect” pairing. If you find a font combination you like, and it’s readable, go with it, and have fun!
This article was originally written for Jimdo by Maggie Biroscak. With a simple, intuitive interface, Jimdo enables anyone to create a unique website with a blog and online store.