Fri

19

Jun

2015

Jimdo Tip: Find the Perfect Google Font Combinations

With Jimdo’s style editor, you have the entire library of Google 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...)

 

Matchmaking for Fonts
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.
  • 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.
  • 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 our 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.

 

Tip: New fonts will give your website an instant facelift. To change the fonts, you'll need to switch over to Style Mode. To see how it's done, watch our video tutorial.


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:

 

  • 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.

Contrast: Pacifico paired with Roboto Contrast: Pacifico paired with Roboto

  • 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.

Personality: Dancing Script & Josefin Sans Personality: Dancing Script & Josefin Sans

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

Time Period: Vollkorn & Quattrocento Time Period: Vollkorn & Quattrocento

  • Concordance: This is a little harder to spot than contrast, but similar proportions or similar letter shapes can help two fonts go together. Fonts from the same family (like Roboto and Roboto Slab) will share similar traits.

Concordance: Droid Serif & Droid Sans Concordance: Droid Serif & Droid Sans

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!

 

font pairing ideas Beautiful font pairing ideas from the 25x52 Initiative. Here they have Playfair and Fauna One.

  • Fontpair: 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.
  • 25x52 Initiative: 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: 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.
  • FontsinUse: 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.
  • TypeConnection: 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.

If you want to learn more about pairing fonts, check out Typeconnection—they've turned it into a dating game. If you want to learn more about pairing fonts, check out Typeconnection—they've turned it into a dating game.

 

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.

 

Both Chrome and Firefox offer plugins that will tell you the exact fonts you’re seeing. WhatFont and Fontface Ninja are both great options.

 

Font Face Ninja Love the look of a certain font on your favorite website? Font Face Ninja will tell you what it is and what size and spacing they're 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!

 


Maggie

Maggie

Content Editor at Jimdo

 

Maggie joined the team to craft the voice of Jimdo for all products and marketing channels. In her previous work, she edited for organizations covering the environment, cities, and sustainable business. When she's not adding serial commas, you can find her camping with her husband, cooking, and reading New Scientist.