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 are common in the world of print (remember print?) because they make 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.
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.
Overall, make sure you find a good balance. 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.
Or how about an 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:
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, 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.
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.
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.
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.
- 25×52 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.
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!
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.
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!