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 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!
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+.
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.
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:-
– spacing (use of white space)
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:-
– Comic Sans
– Courier New
– Times New Roman
- 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. 🙂