Why it’s important to choose the right typeface for your website.

In addition to the colour palette, the typeface or font of a website is one of the most important and influential factors in the visual user experience. The right font types relate to the design of the website and make the content (even) more enjoyable to read.

The opposite is true for typefaces that do not fit the design of your website and consequently turn away visitors who would rather spend their time browsing alternative and competing sites.

Here at the Kokos Agency, we reveal some of our top tips for designing with typefaces that can take your web content to the next level.

1. It all starts with the basics and a good plan

Typography is the science of typefaces, which skilled designers learn and use as a basis for design. We have the anatomy of letters in our little fingers, and we can quote you at least 100 different types. Our knowledge helps us to easily find the right typeface in the flood of thousands on the web and use it as a starting point for your website design plan.

[image]

Already have a plan? How many levels of titles do you want to have? What about metatext, such as author bylines on articles or photo captions? You’ll immediately realise that your website contains more different fonts than you think.

There are basically four types of typefaces: serif, sans serif, slab serif and script.

1. Serif families have specially shaped terminals – serifs – and the thickness of the horizontal and vertical lines is visibly different. Designers love them when designing longer printed texts, as the horizontal serifs are an excellent guide for the reader’s eyes.
2. On the web, it’s a slightly different story, as we prefer to use sans serif typefaces for text, which help the website visitor read long texts by using the same width of horizontal and vertical lines.
3. Slab serifs are a combination of the above two types. They are characterised by angular serif endings, which are best suited for formal headings, CTA buttons or website highlights.
4. Script typefaces are rare on the web because their complexity makes them difficult to read at small sizes.

[image]

2. Tone and mood

Businesses that sell online products and services for other businesses certainly do not have the same tone of communication as an online hiking blog. Once you know the tone of your website, you can visually emphasise this with the right type family.

[image]

3. Readability and legibility

People often confuse readability with legibility. Legibility is the recognition of a single letter in a font, while readability is the level of ease with which a font can be read (especially in large blocks of text). The legibility of a font certainly affects its readability, but so do the font size, contrast with the background and the cut of the font.

A font that is perfectly legible at one size may become difficult to read at another size. In bold type, it may look blurred or too condensed on smaller screens. Dark text on an even darker background is definitely not readable.

[image]

FUN FACT: Many type families do not support Slovenian alphabets. To avoid unnecessary design headaches, designers often don’t use them or find the best visual alternative.

4. Combining and number of letter families

“Two fonts are enough!” or “Oops, three at most, because then it’s really too much!”

Less is definitely more when it comes to type families on the web. Our website also uses just one typeface, but using more than one is a great way to add visual interest and reinforce the visual hierarchy of your website.

Contrast between fonts is the essence we are looking for when combining different typefaces. Do you use serif fonts for headlines? Then we recommend a sans serif font for individual paragraphs. The visual contrast helps the reader to distinguish between the individual building blocks and thus helps to organise the information on the web page more easily.

[image]

5. Licensing and organisation

Finally, we come to the question “Where do I get good fonts?”

Quality typefaces do not always have to be purchased. Designers at Kokos Agency often use Google Fonts for easy integration on websites, which do not require a special licence due to their availability. Designers with an Adobe Creative Cloud licence can also access the Adobe Fonts collection, and all the fonts on their computer can be easily stored, combined and organised using FontBase.

[image]

Finding the right fonts for your website requires experimenting and trying out different options until you find the one that works for you. To help you choose and make your decision easier, we are here to help you find the best typeface for your website.