Tips to select website fonts

6 Tips to Choosing the Right Website Fonts

Disclosure: Some links included in the sidebar are affiliate links, which means we receive a small commission at no cost to you if you purchase through a link. 

I am often asked by people what website fonts they should use for their project. Your choice of website fonts and how you use them is of course another factor which will impact on its success.

There’s a lot to consider when selecting your fonts and here are 6 tips to help get you started.

1) Select a suitable typeface for your body text

When selecting your website fonts, you need to ensure that your selection reflects the mood or vibe of your business. You need to consider whether the font needs to be classic, old time, proven and recognisable or does it need to be something new, funky and unique.

So for example, your new fashion label might choose a website font that is suggestive of something new or current whilst your business to business (B2B) offering is likely to require a font that makes it look established.

Classic fonts are easy to locate and I’ve provided details on Google Fonts later as an example.

If you are looking for website fonts that are new or different, then you will need to look harder and purchase something via a website such as YouWorkForThem.

Serif vs Sans Serif fonts
These are generally either Serif (the ones with the small lines attacted to the end of the stroke in each letter) or Sans Serif fonts

Serif fonts are used by established, traditional publications in the body text of newspapers and magazines. These were once avoided for web design because they rendered poorly on low resolution screens. However, with today’s far higher resolution screens, they now look just as good.

Sans Serif fonts are generally used where a more modern feel is needed.

2) Avoid mixing typefaces

Modern web typefaces come in different styles and distinct weights and match and work together very well, which can be used throughout your website for body text and headlines. When in doubt which fonts to combine, you can go the safe route and use two website fonts that share the same font family, since they’re designed to go together!

Google fonts website
One way to do this is to visit the Google Fonts website and do a search for fonts with four styles or more. You are looking for something which has bold, italics and bold italic styles.

Click on the dropdown arrow next to “Font properties”, click on the checkbox next to “Number of styles” and move it until it reads and move the “Number of styles” slider until it reads 4+.

Roboto font styles
This will return results such as the popular Roboto font shown here.

Some fonts come with both Serif and Sans Serif typefaces, so you can mix them safely without the dangers of them clashing. Some examples are:-

  • Droid Sans/Droid Serif
  • Freight Sans/Freight Text
  • PT Sans/PT Serif
  • Source Sans/Source Serif

Using multiple typefaces is often hard on the eye and also results in longer web page load times. This is because your visitor’s internet browser has to work harder loading additional fonts.

If after looking you are still in doubt, then use a popular website font such as Roboto (see the image above), Gotham, Open Sans, or the Proxima Nova font.

FontPair is also a very helpful website if you are still stuck for inspiration.

3) Use Decorative (displayed) fonts only for headlines and short copy but never for body text.

Calligraffiti font
This example shows the Calligraffiti decorative font. Be careful not to overuse these decorative fonts because they can make your website look cheesy. They are also difficult to read and are easily missed when your visitors are quickly scanning your website before deciding whether or not to read on.

4) Ensure the website fonts you choose have a good contrast and do not clash.

It is important to ensure that the fonts you select match and work together well and it is important that the type contrasts and does not clash.

You need to strike a balance and need to have a reasonable level of contrast between the two typefaces. One way to do is this to look for fonts with a similar X-height (the height of the letter ‘X’).

You can contrast your fonts via their:-

– size
– weight
– spacing (use of white space)
– style
– colour

5) I suggest avoiding the use of the core fonts which were introduced by Microsoft in the early days of website development in the late 1990’s.

These were used prior to the existence of web fonts to help web designers with a known range of supported fonts. However, these fonts have an outdated feel that is best avoided. We’ve all seen them on old, outdated websites over the years and they don’t have a good vibe. These fonts include:-

– Arial
– Comic Sans
– Courier New
– Georgia
– Impact
– Times New Roman

 6) Use a consistent typographic scale
This refers to the way you scale up your fonts in size for differing headings etc. There needs to be a scale used and there are a number you can refer to if needed. There are lots of options here including:-
  • Major third
  • Major second
  • Perfect fourth
  • Golden ratio

If similarly to me, this list makes little sense to you, then the easiest way to choose from is to use a free website such as this to help you. It enables you to enter your font selection and choose a scale and then shows you the differing sizes and specifications.

I hope you found the tips shared in this post helpful and that you’ve got some ideas on your website fonts. Are you looking for further details on any of the suggestions made? Please let me know in the comments.

A tiny request: If you liked this post, please share this?

I know most people don’t share because they feel that we don’t need their “tiny” social share. But here’s the truth…

I built this blog piece by piece, one small share at a time, and will continue to do so. So thank you so much for your support, my reader.

A share from you would seriously help a lot.

Some great suggestions:
– Pin it!
– Share it to your favorite blog + biz Facebook group
– Tweet it!
– Share it on LinkedIn!

It won’t take more than 10 seconds of your time. The share buttons are right here. 🙂

Thank you so much!

Leave a comment

Before you go...

Grab your free Ultimate Website Planning Checklist. It will help you plan your website easier than ever!