You probably don’t think much about typography in your daily life, but when it comes to your website you have some big decisions to make. The right fonts help determine your website’s personality,
and they help grab your viewers’ attention. That's why with the new
Jimdo release, we included the entire Google Web Fonts directory for you to choose from.
“Great!” you say—up until you see that drop-down list. There are a total of 647 font families on Google Web Fonts. 647! Having to go through that many fonts can make your head spin. How do you know
you’re not missing out on a great font that you just accidentally skipped when you were breezing down that list? And how do you keep from getting overwhelmed and just sticking with tried-and-true
That’s where I come in—to share my favorites from Google Web Fonts, along with some examples from around the web. But first, a little background on how to think about fonts for your site.
Communicating with fonts
Remember that fonts send messages to people, even if they aren’t aware of it. After years of seeing some fonts associated with certain images or products, we learn to think of them in a particular
way. For example, a font like Rye
is probably going to remind people of posters or text from the Wild West. That doesn’t mean
you can’t use it, but just be aware of some of the possible associations and make sure that those are appropriate for your site.
You can also use these associations to your advantage. If you want people to think of your site as classy and elegant, or modern and bold, the right fonts can reinforce this message.
Fonts have their own personalities. Google web font Rye has a bit of a Western feel.
Finding the right pair
It's rare to see a website with just one font throughout. Ideally, you want to choose at least two fonts, one for headlines and one for body text. Don't choose more than three. Just like any
relationship, you want to choose two fonts that are different, but complementary.
There are lots of ways to do this, but if you’re looking for a simple approach, I recommend choosing a headline text that interests you (this is where you can use a serif, slab serif, cursive, or
“fun” font), and then pair it with a sans serif font for your body text.
Remember, once you choose a font pair, be consistent and use the two fonts throughout your site. Don’t use new pairs on different pages. Staying consistent will give your site a cohesive and polished
Researching fonts online
To choose a font, it's a good idea to research other websites that are similar to yours. Does their font selection appeal to you as a viewer? Does it send the right message? What kind of personality
does it portray? What emotions does it evoke (happy, playful, serious)? How many fonts are there?
If you see a site you like, it's easy to find out what fonts it's using. If you use Google Chrome
, you can download the WhatFont
extension, where you simply hover your cursor over text on a website and it
will tell you the font. You can also do this on Firefox using FontFinder
. Alternatively, sites like WhatTheFont
and What Font Is
let you upload an image or a screenshot of some text,
and they examine the characteristics of the letters in the image to find the closest match in their database.
The WhatFont extension helps you identify fonts on the web. You just hover over text with your cursor and it tells you what the font is. Easy!
My font recommendations
Now that we've gone over the basic approach, here are some of my favorite fonts in the different categories: serif, sans serif, slab serif, cursive, and "fun." I find that all of these are easy to
work with and tend to look good in a variety of settings.
Serif fonts have small strokes or tails that extend from the ends of the letters or symbols. They are harder to use with large bodies of text, because they tend to resemble a high school essay and
look a tad blurry on computer screens. But, if used correctly, they can make your website look traditional and classic.
good for headers, navigation links, and short paragraphs; not so good for large blocks of text.
You can’t go wrong with any of these:
Sans serif fonts don’t have the tails at the end of the strokes, but rather have clean cut ends. Most websites use sans serif fonts for the body text, because they are more legible on screen than
serif fonts and are typically used for modern-looking websites.
great for navigation and body text because of their legibility.
I like the following choices because they are clean, readable, and versatile, without being boring.
Slab serifs are a class of serifs known for their thick, block-like tails, which are either blunt and angular or slightly rounded. They are typically used for headlines because of their bold
appearance, but I’m starting to see more websites designing out of the box and using the condensed or thinner versions for body text.
good for headers and navigation links, but becoming more common in body text too.
I like the options below because they are more eye-catching yet keep the same classic touch as a traditional serif. Pair one of these with one of the sans serif above, and you’re all set.
Cursive fonts can be tricky to use well, so be careful with them. They aren’t legible enough to use in body text. Instead, cursive fonts can be perfect for headlines, but are best used in small doses
or short phrases. They can be challenging to use well in professional settings, so if you choose one, make sure it evokes the right “personality” for your business.
good for headers or accents, but avoid these in body text and navigation links.
Cursive fonts have a range of personalities, from playful to elegant, modern to retro. Here are some of my favorites:
Looking for some extra quirky fonts to spice up your website and give it more character? There are a huge number of decorative, fun fonts. But like cursive fonts, you should use these carefully,
especially on professional websites
good for headers and short lines of text, but usually hard to read in long paragraphs.
Here are several fonts that don’t fit into any of the categories mentioned above but are definitely worth checking out:
used for headlines on bel50.com
. The body text is slab serif Enriqueta.
I hope this provides a good starting point to think about the fonts on your website. One last thing from the wise minds at Urbanfonts
: “The best font choices are ones where readers do not notice the font… but the message.”