You use your website texts to deliver your messages, that is a fact. But the graphic aspect of your website, also has a subtle impact on this message. In this context, the way you choose and find your font is essential. This guide will help you to properly choose and combine the different font styles.
Serif fonts have little decorations or ornaments. These font types have historically been used in the press (newspapers, magazines). They are considered as stable, serious, traditional and elegant. They have an old-school aspect to them and are often used in long texts.
Sans serif fonts don’t have these decorations. They are generally considered as the web fonts because they are more readable on screen (screen resolution being less good than paper resolution). They are more modern and relaxed.
Cursive fonts give a personal and original touch to your message. You can use these font types in websites related to childhood or handcraft.
Handwritten fonts create an intimate/special atsmosphere. They are ideal to build relationship with visitors or to make a confession. They are perfect for a blog or to deliver a personal message like “Leave me a message” for instance.
Choosing your font is an important moment and you should take it seriously. To select your website fonts with the SiteW tools, you can first read the following guide: Customize Your Website Fonts. You must also take the following things into account to make your choice:
For example, a law firm or a bank will be more likely to choose classic and serious fonts, which stand for trust, security and reliability. Whereas a musician can usually take more freedom to be creative.
In the same way, a men’s brand (sport, automotive sector) will generally choose a rather large font which convey strength. On the contrary, luxury brands will prefer to use ethereal ornamental or very thin fonts.
If your audience is young and used to using the Internet, you will be able to use sans serif fonts which are typical web fonts. The so-called Y generation are used to reading these font types. On the contrary, an older audience, that regularly reads the newspaper, will prefer to use serif fonts.
Fonts play a major role as far as your goals are concerned: you would certainly not use the same font to create a call to action button or to create a button like “Learn more”. In the same way, you can choose different font styles for your titles and paragraphs.
First of all beware not to use too many different font styles: use a maximum of 3 fonts for your website. If you use too many different font types, it can make your website look messy and decrease its readability. 2 different font styles is a good number: an original font for your titles and a more classic one for your paragraphs.
You can also play on combining fonts. It is a very spread trend among webdesigners. However, be sure to test compatibility before making your choice. Choosing fonts of the same family can help you create a graphic harmony for your website. However, two fonts that look too much the same, can weaken each other.
Also be careful concerning the background of your website because your fonts must remain readable: a textured background may affect the reading. The font color must create a strong contrast with the website background in order to be easily read.
Without necessarily using different font styles, you can play on the size of fonts or alternate between bold/not bold, use italic even though you should use it sparingly because it is not easy to read. Underlining is to be avoided on the web because it is acknowledged as the code for a link.
Use the empty spaces of images to insert some text. It is a trend that will highlight your message and be attractive.
Use shapes to enhance your message. To do so, you can use the SiteW Box block.
Typetester.org This tool will allow you to compare different font styles in order to see how they match each other.
Typespiration.com will inspire you and allow you to find interesting font combinations.
Typography.com, will give you different techniques that will help you choose your fonts.
You now know everything you need to choose your website font. Go ! And do not hesitate to share your work with us on our facebook fan page!
Last update: February 09, 2021