Support Sign Up

A Simple Guide to Google Web Fonts

A Simple Guide to Picking Fonts for your website

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.

Which fonts can you use? On Jimdo websites, you can use any Google web font for free. There are hundreds to choose from—Browse Google's entire Font Library here to pick your favorite.

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

Serif vs Sans Serif Font
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 VollkornMerriweatherEB 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 SansRobotoLato, 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. 

 

Here are examples of different Jimdo websites and the Google web fonts they're using: 

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.
How to use fonts together on your website
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. 

The psychology of different fonts

People have certain reactions and emotions for different colors, and the same is true for fonts. They may just be letters, but we’ve been trained to have pretty strong associations with different fonts even if we don’t consciously think about it.

 

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. 

 

Example of Amatic SC font

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

 

Libre Baskerville font example

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

 

Londrina Sketch font example

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.

Font Contrast: Pacifico paired with Roboto
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
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
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.

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

Where to find perfect Google font combinations

If you're a believer in the wisdom of crowds, there are lots of sites that recommend font pairings so you don't have to create them yourself

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

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

Final tip: readability always beats design

Google offers hundreds of web fonts, but that doesn't mean that they are all good for websites. If you suspect a font might be too hard to read, it probably is, even if it's a font you really really love.  

 

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. 

Comparison of different font sizes
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!

Maggie Biroscak

Content Editor


Like this article? You might also enjoy:

Better Product Photography
12 Christmas Tips for Online Stores
Secrets to Good Online Store

Recent Posts: 

Explore Shipping Costs for Your Online Shop
>> read more

How to Add a Donate Button to Your Website
>> read more

A Simple Guide to Google Web Fonts
>> read more

See What’s New on the Menu!
>> read more

Get Your Online Shop Ready for the Holidays
>> read more


Write a comment

Comments: 12
  • #1

    Rohith (Wednesday, 16 November 2016 17:58)

    Very nice article. Thanks a lot!

  • #2

    Obat Wasir (Wednesday, 16 November 2016 20:06)

    Interesting, very helpful and useful.. thank you

  • #3

    Marek (Thursday, 17 November 2016 16:58)

    Thanks for this article!

  • #4

    service ac jogja (Friday, 18 November 2016 03:38)

    very helpful...
    thanks for an explanation about fonts

  • #5

    Thanks Giving Images (Sunday, 20 November 2016 08:34)

    hey amazing stuff.. Thanks for sharing...

  • #6

    md wahiduzzaman (Monday, 21 November 2016 13:12)

    ok

  • #7

    voot app download (Monday, 21 November 2016 18:56)

    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.

  • #8

    Academic Indonesia (Wednesday, 23 November 2016 01:04)

    thanks, its very help me

  • #9

    ab initio interview questions (Wednesday, 30 November 2016 11:28)

    This is one awesome article.Thanks Again. Really Great.

  • #10

    Deepika (Saturday, 03 December 2016)

    Really i supposed to be wondered where thus i got more information from your blog, where i got more number of things.

  • #11

    clash royale (Sunday, 04 December 2016 11:56)

    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.

  • #12

    web development company in Pakistan (Thursday, 08 December 2016 10:29)

    great work to you!. Thanks for sharing your advice.
    <a href="http://webcomers.com/web-design-company-in-pakistan/">web design company in pakistan</a>