«We perceive before we understand. Typography works like background music: You don't listen, but unconsciously it creates atmosphere.»

These words were once said by typography and design expert Erik Spiekermann in an interview with the digital business magazine t3n. How important the choice of the correct Webfont is and on which you should pay attention thereby, I will more exactly explain to you in the following Blog post.

What are webfonts?

Web fonts are fonts that are not installed locally on the computer, but are loaded directly from an external web server. To use them, a browser must support the functionality of web fonts - as is already the case with standard browsers such as Google Chrome, Mozilla Firefox or Safari. This means that the desired fonts do not have to be installed on a computer in order to display web pages correctly, but are stored in the CSS of the respective website.

But what is the difference between desktop and system fonts?

Desktop fonts are mainly used for print products. Web fonts on the other hand – as the name suggests – are used for web applications. For example, desktop fonts on the web are first downloaded from a «font library» and then installed on the computer.

So are system fonts. These are already preinstalled on most operating systems and are therefore considered standard fonts. These are fonts that are known to be available almost everywhere and are displayed in the same way – so-called «Web Safe Fonts».

When there were no web fonts yet, all typography on a website was solved with system fonts. Today these are only used as a «fallback» in the programming code. This means that if the stored web font cannot be loaded, a system font is used instead. But anyway, at least since the times of iOS and Android, you can no longer rely on so-called web-safe fonts, because mobile operating systems have different fonts preinstalled than desktop systems.

Advantages and disadvantages of web fonts

Web fonts now definitely have more advantages than disadvantages. The biggest advantage is, as already mentioned, that fonts are loaded directly from a web server and do not need to be installed. Another advantage is the good readability of web fonts. They are scalable, zoomable and high resolution. This promises an optimal display on all devices. In addition, access to web fonts is very easy, as there are countless font libraries – but more on this later. In contrast, the choice of preinstalled system fonts is very limited, which makes it almost impossible to personalize a website or adapt it to the corporate design of the company.

The biggest disadvantage of web fonts is the loading time, because they have to be downloaded from a server first, just like the website itself. There are, however, various ways to integrate web fonts correctly in order to reduce the increased loading time. A further disadvantage is the copyright law, which prohibits the passing on of licensed web fonts to third parties. By purchasing Pay as you go (price per number of page impressions) or Pay Once licenses (one-time fee), these fonts can also be used. 
 

Typography as a design element

Now you are probably asking yourself why typography is so important on the web. Surely you have already come across a website and wanted to leave it right away because the layout didn't appeal to you or because you had such a bad time finding your way around that you were «chased away« so to speak. 

As Erik Spiekermann was already quoted in the introduction, typography is not the main component of a web page, but it should not be underestimated.

Typography is like a picture, a design element that must be used sensibly and properly. If the choice of web fonts is not reconsidered, it can disfigure the whole website. When developing a corporate design, it is also very important to find a typographical solution that works for print as well as web.

What distinguishes good typography?

The requirements for good typography are very similar for web and print. However, by following these typographic principles, it can be guaranteed: 

• Readability: Choose fonts that are easy to read 
• Font size: The font size of scrolling text should be about 16 – 20 px (this can vary depending on the font)
• Contrast: The contrast between background and font color should be as high as possible
• Line length: Ideally, line lengths on the web should not exceed 50 – 80 lines per line
• LS: Choose a line spacing large enough to create more white space and thus better legibility
• Capital letters: Avoid capital letters in the whole text for running text
• Form: Letter shapes should be clearly distinguishable from each other so that the eye does not confuse the letters. 
• Alignment: Text alignment: A left-aligned flutter set (standard) is recommended, because the eye is used to it

There is, however, a great deal of design freedom with regard to the choice & placement of fonts, provided that legibility is guaranteed. So the interaction of fonts, so-called font mixtures, is also very important. On a website you should never use more than three fonts, as this can quickly appear unstructured and confusing. If you decide to use more than one font on your website, they should complement each other, but not be too similar. A good example of this is to combine a serif font with a sans serif. If you don't want to work with multiple fonts, you can use different font styles. But here, too, you should not exaggerate, because it is well known that «less is more». Either way, a hierarchy should be defined among the different fonts, sizes and weights.

These font classes exist

As mentioned above, typography is only perceived in the background, but it should not be underestimated. The character of a font can arouse emotions in the reader and helps to underline the message of the text. In typography there are numerous font characters that can be roughly categorized into the following groups: Antiqua or serif fonts, sans serif fonts, writing and handwriting fonts, fracture fonts, decorative and display fonts, and technical fonts (mono spaced). I will introduce you to the three most important classes here:

Antiqua or serif typefaces

The antiqua or serif typeface is characterized by its small horizontal strokes at the end of the letter bars. The main advantage of serifs is the optical guidance so that the reader does not slip in the line. They are therefore particularly suitable for long text passages. Serif fonts appear serious, traditional, matter-of-fact, conservative, high-quality and sophisticated. For example, they are often used in the fashion or hotel industry, but also for law firms or commercial enterprises.

Sans serif fonts

There are also sans serif fonts. They appear very clear and precise due to their optically equal strokes. Sans serif fonts are basically suitable for any application thanks to their good legibility. Whether as headlines or for long text passages. They are modern, clean, technical and elegant. For example, sans serif fonts are often used in innovative & future-oriented industries.

scripts and handwritings

Finally, I will introduce you to writing and handwriting. These can be recognized by their curved nature and the letter connections which imitate handwriting. They are mainly used for headlines or decorative applications. Writing and handwriting should never be written in capital letters only, as they are hardly legible. Their effect is elegant, creative, playful, cheerful, solemn and also luxurious. They are often used in the luxury sector, for organic products or in creative companies.

This is how you get your perfect web font.

1. Where do I want to use the font?
Consider whether the text in question will be used on a website or on a print product. If you want to use both products, ask yourself if the font you choose is suitable and available for both web and print applications?

2. How long is my text?
Is it just a headline or a continuous text? Which font is used to draw attention to it and ensure optimum legibility? 

3. What is the content of the text?
Which associations should be awakened by the chosen font? As you have already read above, a serif font can evoke different feelings than a sans serif font, and a cursive font expresses a different feeling.

4. Who is my target group?
Have you already thought about the reading ability of your target group? Do you want to address an older or younger audience? And in which situation is your website visited for how long (desktop or mobile users)? Does the reader want to deal with the topic or just want to inform himself? 

5. In which language is my text written?
Does the character set of your desired font contain all required letters, umlauts (ä, ö, ü, è, é, à) and special characters (+, -, ?, !, &, %) for the corresponding language?
 

The most popular web font libraries

As you have read before, there are countless font libraries that offer a large selection of fonts. Probably the best known is Google Fonts. This open source font provider is free, the fonts work in any browser and the integration is quick and easy. Another free provider is Font Squirrel. 

Paid libraries include Adobe Fonts – formerly Typekit (included in Creative Cloud subscriptions), the web font library Linotype, as well as the popular provider MyFonts. There are of course many more providers. However, these are the most common ones.

Conclusion

Web fonts offer a good possibility to personalize your website or to adapt it to the corporate design of your company. The impact on the loading speed of a website regarding web fonts can, as you now know, be reduced with a professional integration. And if you also consider our tips to find the right typography for your website, nothing can go wrong.

Do you have any further questions or inputs? We look forward to your comments.