Choosing the suitable fonts for a website is a lot harder than most of us think. Many factors need to be taken into consideration. We have gathered some guidelines, some 'rules' (we call them that because they have proven to be effective) for how to use font families on websites. Hopefully you will deem them worthy of applying to your website as well. But let's not rush ahead.

What is the first and foremost 'rule' of using font families? Make sure the text is readable! In order to do that we need to know a little bit about the two big font categories. The first category consists of the 'Serif fonts' and the second of the 'Sans Serif fonts'. What makes the difference between them? Let's see:

Serif fonts

Serif fonts have small hook-like lines or curls at the end of each letter and symbol. These are called 'serifs', hence the name of the font families of this type. Serif fonts are generally used in body text. It is easier for the eye to follow the text, so it is simpler to read it on an actual page. This is why Serif fonts are most often used in newspapers, magazines, books etc. However, they are believed to be harder to read on a computer screen. (best known example: Times New Roman)

Sans serif fonts

The word 'sans' means 'without', therefore the Sans font families lack the small hook-like lines/curls from the end of the letters and symbols. Due to their simplicity they are easier to read on a computer screen, but harder to read in print. Thus, these are the most suitable fonts for websites. They are commonly used in smaller texts. (best known examples: Arial, Verdana, Source Sans Pro)

Our other 'rules' regarding the font families cover the size, types as well as attributes. A website has to have a 'flow', a visual unity and the fonts/typefaces are a big part of that. This is why you ought to be careful when you choose them.

Don't use more than two/three types of font families on a website. It will be hard to read as well as confusing for the readers. Their attention will be divided towards the different font types and in the worst case scenario they might decide to leave your website having a bad taste in their mouth. You should not take that risk. You can use a font for the titles/subtitles, a different font for the text, maybe another one for the contact details in the footer … but don't go to the other extreme.

What is the message you want to get through? This is closely related to the type of business that you own. For example, if you have a hairdressing salon, don't use font families such as 'Molot', because that one is more suitable for a construction business. You should use something more 'classy' like the font called 'Georgia' or a handwriting font like ‘Marck Script’, depending on the case. The problem of choosing fatter or thinner typefaces is again under the 'jurisdiction' of your business type. Make sure the font is relevant and suitable.

Sizes are also crucial. Font families are a tiny, yet so important part of the design. Even the little details like choosing the right font size can either improve or ruin the whole website's design. Therefore, you have to be certain that the size is appropriate: not too big or too small. One the one hand, consider the readers: too small sized titles and subtitles will make them lose their interest. On the other hand, take into account your own interests: if you have special promotions or you want to emphasize some news, use bigger font sizes.

Adding attributes (bold, italic, underline, colour etc.) can also be a little bit tricky. Again, you should not forget that sometimes 'less is more' and that these can either help or ruin the whole design. All of the attributes are meant to raise attention. I'm going to highlight one of them. Colour – if you colour a text you have to choose a suitable colour, one that is compatible with your overall design.

Finally, as a last piece of advice: if you want your website to look similar or almost the same on different computers (PC, Mac) use one of the above mentioned fonts: Arial or Verdana. Now you know the do's and don'ts of using font families, try to apply them to your website. You will surely like the results!