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 know how you want your website to look, but you have no idea how to pick fonts that would work well, and work well together. Let’s dive into what you need to know to choose & combine fonts for your site to keep readers on it longer (so you can turn more of them into subscribers).
How to choose fonts: 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 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, if it’s used in a much larger size.
Small letters: what to pay attention to
For your main text, pay attention to the letters with small gaps, 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 c), your text becomes too hard to read. In these cases, pick a larger font-size for the body text. In 2009, a font-size of 12 – 14px used to be the regular size, in 2013 14 – 16px became the regular size and now a quick look at font-sizes across different websites shows 18-21px to be the most commonly used.
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.
Also don’t justify text on your website. It might look pretty, but we don’t have the same level of control over the text as there is with print, so justifying text on your website actually makes it harder to read.
How to combine 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.
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.).
Fonts to stay away from
Some fonts are or were widely available for free through operating systems and applications, such as Microsoft Word. They’ve 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. These include fonts like Bradley Hand, Brush Script, Comic Sans, Curlz MT and Papyrus. 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.
Want more? Fill in the fields below to download your free Guide to Visual Branding, including 6 great Google Fonts combinations.