A Simple Guide to Google Web Fonts

Wed16Nov2016

design · 2016 · tips · 2016-11

There are thousands of fonts out there, and thousands of people who enjoy exploring their subtle differences and forming strong opinions about them. If this is you, you’re in for a treat because
typography is going through a bit of a renaissance these days, and there are lots of websites and Pinterest groups dedicated to font aficionados.

For everyone else, you might be wondering what you actually need to know to pick some nice, readable fonts for your website. It’s the alphabet, right? How many possible ways could there be to
display it? Well, you’d be surprised—but here’s information that can help:

The types of font and when to use them

There are lots of ways to categorize fonts. But for the purposes of creating your first website, you really need to know three broad types: serif, sans serif, and
decorative.

Who'd have thought you'd spend part of your day thinking about an innovation from ancient Rome? Well, that's what a serif is: the little tail or flourish at the end of a letter.
Fonts are typically categorized as either serif or sans serif, meaning “without serifs.”

Serifs...like flair for letters. Classic serifs on the left, sans serif on the right.

Serif fonts

Serifs are common in the world of print (remember print?) because they it easier for the reader to follow blocks of small text on paper. You’ll likely see serif fonts in magazines, books,
and newspapers. Some classic serif fonts are Vollkorn, Merriweather, EB Garamond, and Libre Baskerville.

Sans serif fonts

When people started to read more on computer screens, type designers created sans serif fonts. They ditched the flourishes and instead favored fonts with a modern, simple
look that displayed clearly as pixels rather than ink. Some popular sans serif fonts are Open Sans, Roboto, Lato,
and Ubuntu.

Decorative fonts

Then, there are decorative fonts. This is a very broad category that includes more artistic fonts, script, handwriting, etc. Think of them as the vivid orange or bright
yellow of the font world—these tend to have the most personality but need to be used sparingly.

Many decorative fonts were created for their graphic appeal, and not to be super-legible in paragraph form. That's why they are best for headings and short phrases but not for body text. In
other words, if you have an entire paragraph in cursive on your website, your visitors are probably having a tough time reading it.

Where to use different fonts on your website

When you're designing your website, we usually recommend choosing 2 or 3 fonts:

One for your body/paragraph text: You can't go wrong with a sans serif font in your Text Elements that’s very legible, especially at smaller sizes. Steer clear of
cursive or all-caps fonts, which get tough to read in more than a few words.

One for your 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 personality to your website.

One for your navigation menus & buttons: You can repeat one of your first two fonts here, or choose a third complementary font. Just remember that your navigation menus
and CTAs 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.

This sample website uses sans serif font Raleway for the navigation menu and body text, and decorative font Sacramento for the headings.

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

Can you use fewer than this? You bet. There’s nothing wrong with choosing just one font for your website and differentiating your headings and body text using size and color instead.

Can you use more? That's a little trickier. Fonts create consistency and hierarchy throughout your website. If you use lots of different fonts, it's like
having too many street signs at one intersection. It also takes away from the brand effect you're trying to achieve.

If a font doesn’t match the message or brand of a website, it will look “off” to viewers. For example, think if you had a website for accountants that used the font Amatic SC, which has a more
hand-written, homemade, casual feel. That's a vibe you probably don't want to get from an accountant.

Or how about a art studio for children that uses a traditional, more serious font like Libre Baskerville...

...versus a font that would fit the brand personality of a kids' studio a bit better, like Londrina Sketch.

This is where choosing a font is a little bit more art than science. On the plus side, if you have a gut feeling about a font and whether it's right for your website, you're probably right.

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

Here are some different font matching strategies:

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

Personality

Fonts can be modern, bold, soft, luxurious, 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

Time period

Many fonts make historical references. If you’re looking to evoke a certain era, you might choose two retro fonts or two old-world fonts.

Time Period: Vollkorn & Quattrocento

Concordance

Font concordance 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

Where to find perfect Google font combinations

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.

Google Web Fonts Directory: Along with a nice filter and examples, Google’s
directory offers popular pairing suggestions for each font in a column on the left side.

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.

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.

Finding fonts from other websites

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. Turn the plugin on, then click on the text you'd like to know more about. The font name, size, and spacing will then pop
up!

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.

Also remember that with fonts, well...size matters. For body text, your font should typically be at least 16px large. But this rule really depends on the font you choose, since
some fonts appear much smaller than others, even if they are the same size.

Look at your website on different-sized screens to be sure that people will be able to easily read what you wrote. Decorative fonts will usually need to be much larger in order to be legible, for
example.

Fonts BenchNine, on the left, and Ubuntu, on the right, are both shown here at 16pt, but with dramatically different results.

As in real life, there’s no “perfect” font or perfect font pairing. If you find a font combination you like, and it’s readable, go with it, and have fun!

It is a great article. You will surely like this also because it is a great stuff, yeah it’s give us lots of interest and pleasure. Their opportunities are so fantastic and working style so speedy.
Thank you for sharing the nice article.

I was excited to uncover this site. I wanted to thank you for your
time for this wonderful read!! I definitely enjoyed every little bit of it and
I have you bookmarked to see new things in your website.