How to choose & combine fonts for your site

Choosing fonts for your website can be hard if you have no idea about basic typographic principles. You probably have something in mind for how you want your website to look, but you have no idea how to pick fonts that would work well. I’ll explain how to choose fonts that support your content instead of distracting from it.

Readability

Readability is the most important part to pay attention to when choosing fonts. You want your text to be read, so make it easy to read for your websites’ visitors!

You’ll have several parts that need to be easy to read to a greater or lesser extent:

  • Headlines will be generally short; therefore, they can be big and bold. You can choose a font that would be harder to read in smaller sizes, because when it’s set to a big size (for headlines), it will still be easy to read.
  • Body copy is your main text and will need to be the most readable of all. This is the largest part of your text, and you don’t want people to have to squint to find out just what you’ve written. Chances are they won’t, and they’ll just leave your site never to return instead. So choose the font for your body copy carefully and make sure it’s easy to read.
  • For other text, such as post date, image captions, etc., I recommend sticking with the same font as your body copy or another readable font, because these generally will be in a slightly smaller size than your regular body copy.

To choose an easy-to-read font, pay attention to the font-size you’ll use it with. A font that’s hard to read at a regular body font-size might work perfectly fine for a headline, because it’s much larger.

Small letters: what to pay attention to

For the body copy, pay attention to the letters with small gaps, called counters, such as a, e, and g. When deciding the font-size, make sure the small openings in these letters are still big enough to distinguish them. When it gets too small (for example the e might start looking similar to a c), your text becomes hard to read. In these cases, pick a little larger font-size for the body text. A font-size of 12 – 14px used to be the regular size, but recently 14 – 16px became the regular size.

Another thing you can experiment with is the line-height, which is the space between lines of text. When lines are too close together, the text gets harder to read, and people may lose their place in the text. On the other hand, if the lines are too far apart, the space will create disconnected lines, and the text becomes harder to read as well. As a general rule of thumb, a line-height between 1.2 and 1.5 times the font-size works well.

Combining fonts

When combining fonts, make it easy on yourself by choosing fonts that are obviously different from each other. Avoid combining fonts that have barely noticeable differences between them. For your website, stick to a maximum of 2 or 3 font families, then use bold and italic versions of these families as needed. It could be one for headlines, one for body copy, and perhaps a third for things like quotes and other attention-grabbers. It all depends on the site and what you want to communicate.

Sticking with just one font family and adding variety with styles (normal, bold, italic, lowercase, and uppercase) may also work well for your website.

In general, it’s easy to combine a serif with a sans-serif font. Serifs are fonts that have strokes on the ends of their letters, whereas sans-serifs do not have these strokes. Another type of font is decorative or display fonts. These are generally harder to read and should not be used for large blocks of text, such as body copy. They may be used as headlines, but you do still need to make sure they’re easy to read even at a larger size.

Serif vs Sans-Serif

When combining fonts, they need to have a good contrast between them. You can accomplish that through serif and sans-serif differences or different size, weight and style (i.e. italic, all-caps, all lowercase, etc.).

It all boils down to choosing fonts that support your content, not distract from it.

Fonts to stay way from

These fonts are or were widely available for free through operating systems and applications, such as Microsoft Word. They have become so overused for all sorts of things they were never designed for. They’ve become cliché and look amateur. Using these will not help in getting your content taken seriously.

Choosing fonts for your website: fonts to avoid

I also recommend avoiding Times New Roman, because it’s all too recognizable as a default font. It will make it look like you haven’t put any effort into the design. Instead, find a free webfont through Google Fonts or FontSquirrel. Or buy one of the many webfonts available through sites like MyFonts and Fontspring.

What fonts are you using on your site?