How to choose & combine fonts for your website

Click through to learn how to choose and combine fonts that work well, and work well together, for your website.

Choosing fonts for your website can be hard if you don’t know about design principles. You know you want your site to look amazing, but you have no idea where to even start. 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 website to keep readers on it longer (so you can turn more of them into subscribers and clients).

How to choose fonts for your website: Collect inspiration

While we’re all multi-faceted, when it comes to branding, you need to limit yourself to create consistency. Pick two or three of the main values you want to convey for your brand or offer. (E.g. love, family, travel, transformation, creation, organization, etc.). Then go to Pinterest and start pinning images and website designs that convey those values for you.

Once you have a good amount of images on your brand board, you’ll probably start to notice the things they have in common. Perhaps they’re all using bright colors, or are feminine & chic, or maybe they’re more minimalistic. Figure out what it is you like about all these designs, then continue to pick colors, fonts and even textures or patterns that will create a similar look & feel for your website.

Need help creating your vision board? Get the free guide below!

How to choose fonts: What they convey

Fonts can feel formal or informal, light or dramatic, modern or traditional and warm or cool.

But fonts are not limited to a single mood, differences in font-size and font-weight can create very different moods. Combining one and the same font with different fonts can also completely change the look & feel of your site.

How to choose fonts: Readability

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

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

  • Headlines will be generally short; they can be big and bold. You can choose a font that would be hard to read in a small size because when it’s set to a big size, 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 leave your site never to return instead. So pick the font for your body copy carefully and make sure it’s easy to read.

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 be great 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 setting the font-size, make sure the small openings in these letters are still big enough to distinguish them. If it gets too small (for example the e might start looking like c), your text becomes too hard to read. When this happens, 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. Now, a quick look at font-sizes across different websites shows 18-21px to be the most used.

Also, check your font-size across devices – make sure it’s easy to read on a large screen as well as on a phone or tablet.

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. If the lines are too far apart, the space will create disconnected lines, and the text becomes hard 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 make neat text columns on your website (known as ‘justified text’). It might look pretty, but we don’t have the same level of control over the text as there is with print. Justifying text into neat columns on your website actually makes it harder to read.

How to combine fonts for your website

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 site, stick to 2 or 3 font families, then use bold and italic versions of these families as needed. Use one for headlines, one for body copy, and a third for things like quotes and other attention-grabbers.

In general, it’s easier 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 you shouldn’t use them for large blocks of text, such as body copy. You can use them as headlines and other attention-grabbers, but make sure they’re easy to read even at a larger size.

Serif vs Sans-Serif

When combining fonts, they need to have good contrast between them. You can do that through serif and sans-serif differences. Or use one font in different sizes, weights, and styles (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. People overused them for all sorts of things they were never designed for. These fonts have 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.

Instead, use a webfont through Google Fonts or Typekit, or buy one of the many webfonts available through sites like MyFonts and Creative Market.

Rather get design done for you? Hire me.

Want to learn how to make a beautiful sales page yourself?

PinterestVisionBoard-preview

Sign up for my guide How to create the perfect launch design inspiration board and make sure to also read the follow-up emails teaching you how to go from inspiration board to an actual brand board you can use to create a beautiful sales page.

Just click the button below to get it, free!