Simple is hard. That's my guiding principle. And so it is with the use of typography in web design, of fonts on the website - actually quite simple and yet quite complicated. That's why I want to show you today which typography basics you should consider in order to display text on your website in the best possible way.

It's no secret that many people find it difficult to express themselves clearly and comprehensibly. Why should this be easier via media? Typography exists to make this easier - communication. On the one hand, it is the science of fonts, and on the other, it is a design element used to present texts or content in a clever, target-oriented or "aesthetically pleasing" way. The fact that a distinction is made between micro-typography and macro-typography is irrelevant at this point.

Why typography basics in web design?

There is no question that fonts can enliven and visually enrich a website. Fonts - typefaces - are important elements of any good design. On the Internet, i.e. in web design, typography is subject to special conditions, which I would like to highlight here and which should help you to better understand the issue of fonts on websites.

"Good typography does not look for everything that is still possible, but asks for what is necessary."

- Kurt Weidemann

Websites are often not created by trained graphic designers or media designers, but are designed and implemented by career changers. This may explain why even the simplest graphic rules are disregarded on many websites. This becomes particularly clear when it comes to typography. The unrestrained use of poorly legible VERSALS, the lack of contrast between font color and background, as well as the confusing structure of the texts make it difficult for users to read.

But that's exactly what typography is all about: the legibility of texts. Why else would you have texts on your website if they are not easy and pleasant to read? It is said that opinions differ on what good readable texts should look like in the end. I can't understand it, because we have simple, proven and very sensible typographic rules in graphics to create texts that are easy to read. Just typography.

One of these is contrast - the color ratio between the font color and the background. In a forum, I once criticized a proudly presented web layout for precisely this reason. In the graphic, we call the phenomenon that the alleged web designer wanted to sell here "white eagle on a white background". In this case, he had dark gray continuous text on a light gray background, i.e. insufficient contrast.

It may look nice - probably a matter of taste - but it's difficult to read. I reported this back and found that it wasn't a good design for me if I could only read the text with difficulty. And I still have healthy eyes. What do those with impaired vision do? This is also an often underestimated problem - keyword accessibility. In any case, the designer took the view that this was his design and that he would do it this way. We've all been there: "You can do it that way, but then it just sucks."

For me, this is further proof of how little knowledge there is about the legibility of texts, i.e. good typography. During my training as a media designer (print) many years ago, I had an experienced graphic designer and typographer from whom I was able to learn a lot.

Web design and typography

In web design, however, we have other requirements for typography besides readability, namely technical ones. Good readability on the Internet means that the website must load quickly. So when integrating fonts, we are dealing with WordPress performance.

It must also be ensured that the texts are readable in the same way on as many output devices as possible, which is another challenge. In the end, with the possibilities offered by the markup language CSS, you have so many options for intervening in the typography of a website that things quickly become more complex than expected.

And, of course, we want to have well-structured text that also increases readability, avoids fatigue and has an effect on Google, i.e. on the search engine ranking. Examples include the heading tags H1, H2, H3 etc., the use of lists and markup forms such as bold/strong and em/i, as well as paragraph marks and other useful HTML elements.

I am a friend of standard fonts. Let's get that out of the way. I don't think it's really necessary to integrate your own special fonts on a website. An example of why you should integrate your own font is the CI font. In other words, a font specially developed for the company that has an important function in the corporate identity. Or you are a really good designer, artist or photographer and attach importance to an extravagant or very individual design-heavy appearance. In this case, however, it is not necessarily about large blocks of text or written information.

A custom CI font is usually used by larger companies that operate with their own IT department and a server farm. There are no performance problems and the embedding of CI fonts is technically monitored.

If you are a designer and want to show what you can do, it is advisable to use existing typography services - proven web fonts - in order to integrate the desired font securely and efficiently into your own website.

Sometimes it also seems possible to convert the desired font style into web-compatible formats and integrate them individually. Whether this always works perfectly in the long term is another matter. That's why I prefer Google Fonts in such cases, because it's fast, secure and easy to use. But this is perhaps also a matter of taste.

These 10 typography rules will help you

The top and very simple rules: Less is more. Take people's reading habits into account. Orientate yourself towards websites that present extensive editorial texts and learn.

The legibility of texts is subject to certain scientifically based rules. These concern not only the font itself, but also its surroundings, the contrast, the clarity and structure of the text and the sharpness of its margins.

1. font size

It depends on the font and is based on the basic design of the website. Please note that the user has the option of changing the font size in their browser or smartphone at any time. Try to use relative font sizes, i.e. %, EM/REM or small/normal/medium/large.

2. line width

This is clearly underestimated. It was determined which text width people still like to read: It is a width up to a maximum of around 70 characters, i.e. a standard A4 text width of a Word document. Just take a look at SPIEGEL ONLINE and the like to see how wide their text blocks are.

3. line spacing

For optimum readability, the so-called line-height, i.e. the space between the individual lines of a text - including the height of a paragraph - is of great importance. Depending on the font, a good 140-150 % line-height has proven itself on the web.

4. running width

This is the space between the letters, which is manipulated by "letter-spacing". You should be very careful here and only use this design option with caution - for certain headings, for example. If in doubt, do not set it.

5. contrast

The ratio between color and background color is called contrast. This should be very high for continuous text. The maximum contrast is of course black text on a white background. This is easy to read.

6. structure

This means: well and semantically correctly structured texts! In HTML, this means, for example, the heading tags H1/H2/H3, the paragraph markers, list markups, the intelligent use of highlighting using bold, italics and color. This has a direct effect on readability and also on the Google ranking.

7. maximum of two fonts

One font per website, book or document is often sufficient. In special cases, more will work, but you should be careful when using more than 2 fonts per document.

8. capitals

Avoid capital letters in headings and in the menu. They are difficult to read. However, if it concerns individual words, for example in the NAVIGATION, you can use capitals. However, do not write in capital letters, but use CSS to solve this using "text-transform:uppercase".

9. standard fonts

If in doubt and as a fallback, you should choose tried and tested system fonts. Arial, Verdana, Georgia are such perfectly legible system fonts that are available for almost all output devices and are always displayed well.

A fallback in CSS is the subsequent font, such as for BMW: "bmwTypeWebBoldAll", "Arial", "Helvetica",sans-serif; here Arial, Helvetica and Sans Serif (i.e. the first font available under Sans Serif) are the fallbacks that are displayed if the font before it ("bmwTypeWebBoldAll") is not available.

10. further training

My tip: Learn more about typography through workshops, books and magazines or by watching a YouTube video on the subject. I can recommend this video, for example. Although Sven Wolfermann advises against system fonts in his presentation at "MobileTechCon" - unlike me - he provides a lot of valuable information on the topic here!

Font design with CSS: Does it make sense?

A word about font design, or more precisely, settings using CSS: Not least since the introduction of CSS3, developers have had subtle setting options for the fonts of a WordPress website at their disposal. But do they really always make sense? What do I use them for and when? What do I want to achieve? Legibility? A beautiful design? Not all coders - or their customers - seem to think about this. They sometimes do everything that is possible. Not only do they change the line-height, which sometimes causes problems with heights, spacing and positioning, but they also change the letter-spacing or put shadows around the text ("text-shadow"). It's bad what you sometimes see.

I would therefore advise you to be very careful with these settings and to use these techniques with caution. They don't work everywhere and even hinder the display on small displays. Then you have to undo the instructions for the desktop via "Media Queries", which in turn costs time and code. Does this really make sense? The answer should be very clear and precise.

Font styles for the web: the web fonts

By the way: BMW uses the following on its website: font-family: "bmwTypeWebBoldAll", "Arial", "Helvetica",sans-serif;font-weight: normal; - in body text, Arial as normal. Amazon also uses Arial on its store website. Apple, on the other hand, naturally uses its own font as a web font. The oil company TEXACO uses Adobe Fonts. Just a few examples.

Fortunately, there are now many providers of web fonts that work well and are generally easy to integrate. Unfortunately, these "web fonts" are usually subject to a charge, with prices varying greatly. In addition to Google Fonts, the following are examples: Adobe Fonts (Typekit), Webtype, Adobe Edge Web Fonts and many more - a matter of taste.

The advantage of these services is obvious: you have no license worries (see "Attention: Licenses!" below), the fonts work and there is help, or more precisely, instructions on how to integrate the fonts on your own website (i.e. support or forums). The tariffs can often be extended and you have a certain selection of exciting fonts.

The misunderstanding with Google Fonts

When the GDPR was made mandatory for everyone in May 2018, the online community was terrified of using Google Fonts. People were afraid that the use of Google web fonts - Google as the "data octopus" against which this legislation was directed - would not comply with data protection laws and that they would therefore risk expensive warnings.

This still widespread fear highlights the great confusion that unfortunately still surrounds the GDPR. To the benefit of lawyers and web law firms, of course. If you have concluded an order processing agreement with Google for the use of Google Analytics and refer to the use of fonts - and, in case of doubt, cookies - in the privacy policy, the problem is off the table.

If you are still afraid, you can also integrate all Google fonts locally, i.e. download the Google web fonts and save them on your own web space.

In addition, the performance was repeatedly criticized, which was allegedly so bad when the fonts were loaded via Google. This fails to mention that Google has a fast and extremely stable server architecture and that there are still fallbacks (see above). In addition, you load the fonts from a different URL, which can be done at the same time as loading the files from your own server. But once again you are dependent on Google.

Attention: Loading times!

The matter is quite simple. Externally integrated web fonts can increase the loading time of the WordPress website. So can the code required to integrate your own fonts into the WordPress website. Only the standard fonts, the system fonts on users' computers and smartphones, do not require any loading time because they are not loaded via a server and not via the internet.

Or to put it another way: if your WordPress website needs fast loading times, perhaps it doesn't have the appropriate WordPress hosting behind it and the company doesn't have a CI font that absolutely has to be integrated, I would always go for standard. In other words, system fonts, like Amazon does with Arial. That makes sense.

Of course, this is not about the kilobytes of fonts to be loaded. It's about the fact that they come on top, i.e. have to be downloaded additionally, and that the server that is supposed to deliver them may be weak at the moment. This does not look good and is ... avoidable.

Attention: Licenses!

The licenses for the fonts used should always be taken into account. If you use Google Fonts or system fonts, which are loaded from the user's computer, you are on the safe WordPress website. For all other fonts that you use on your website, you have to make sure that you have the license for them. And this can quickly become quite expensive. Whether it is to use it on your own website or whether it is a free font, which sometimes causes other problems, for example when we think of the German umlauts and the Eszett (ß).

To avoid all these problems, I rely on system fonts or Google Fonts. If the customer absolutely wants their own font, you should generously include the cost of this in the calculation, as the integration of external fonts into the website can sometimes cause some problems. For example, with the CSS instructions and here, for example, what I always find really bad, when searching for the correct font name in order to be able to control the font correctly for displaying the HTML tags.

Integrate your own fonts

With web fonts and/or custom fonts that you have made usable for your WordPress website via a tool, you can quickly run into a number of problems for your WordPress website. The following phenomena often occur:

• Flickering font when loading the WordPress website (not uncommon, sometimes you see a different font until the CSS overwrites it with the web font.
• Longer loading times due to very complex fonts (rather rare).
• More common are blurring of the font, distortion due to faulty rendering (on certain systems).

To be able to display the desired font on as many output devices as possible, you need different variants of the same font. "TTF" is clear and well-known, but you also need "EOT" and the two "WOFF" variants. This is essential if you want to integrate your own fonts into your WordPress website. You can generate these formats for free with the web font generator. Then load all the formats of your font into a directory on your server and integrate them into your stylesheet (CSS file) with the following path:

@font-face {
font-family: 'Dein Font';
font-style: normal;
font-weight: normal;
src: local('Dein Font'),
      url('/deinfont.woff2') format('woff2'),
      url('/deinfont.woff') format('woff'),
      url('/deinfont.ttf') format('ttf'),
      url('/deinfont.eot') format('eot');
}

@font-face {
font-family: 'Dein Font';
font-style: italic;
font-weight: normal;
src: local('Dein Font Italic'), vbx
      url('/deinfont-italic.woff2') format('woff2'),
      url('/deinfont-italic.woff') format('woff'),
      url('/deinfont-italic.ttf') format('ttf'),
      url('/deinfont-italic.eot') format('eot');
}

You can see from this @font-face code, which integrates your font, how complex it is - and therefore how error-prone.

Then you can use them in your CSS code and assign them to the classes and IDs. Some errors can occur in this way, which I do not want to deal with here. As before: I recommend standard or system fonts or Google fonts, which you simply integrate via the linked file in the header of the website:

<link href='https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i' rel='stylesheet' type='text/css'>

Typography and mobile presentation

This aspect is generally neglected. In my opinion, it is absolutely not necessary to load a special font on a small display or a smartphone. What about the fallbacks, the system fonts for cell phones? When I create a mobile WordPress website or have to optimize it for mobile, the first thing I do is of course save the loading time by downloading a web font or a custom font.

Although it is a strategic decision that must of course be discussed with the customer, I cannot see a single argument in favor of a web font or a separate font in the mobile display.

Of course, not all system fonts that are available for the desktop are available on the smartphone. But from my point of view, it doesn't matter whether you have chosen this or that font for the Android system. It's all about quick information and good legibility. This is definitely guaranteed on Android and Apple with their web-safe fonts.

If we look at the matter from two essential points of view, namely loading speed and design, we have to come to the conclusion that a separate font for mobile display is superfluous. On the one hand, the font impairs the loading speed of the mobile WordPress website, which is particularly important when it is called up at the bus stop. On the other hand, we have (hopefully) reduced the content and design of the mobile version of the website to the essentials for these reasons. Why load another fancy web font?

The essential thing is always readability or what we want to achieve: Imparting knowledge, literary entertainment, purchasing a product, making contact, ordering a newsletter or viewing the address. And for that, I don't think you need a special font or a web font.

Web-safe fonts

You should definitely check whether one of the system fonts is suitable for your project. A complete collection of so-called web-safe CSS instructions for system fonts, or more precisely web-safe fonts, can be found on CSS Font Stack.

What are web-safe fonts? Web-safe fonts are fonts that are pre-installed in many operating systems. Although not all systems have the same fonts installed, you can use a web safe block of CSS settings to select multiple fonts that look similar and are installed on the different systems you want to support. If you want to use fonts other than pre-installed fonts from CSS3 onwards, you can use the settings for these web fonts.

Conclusion on the basics of typography

You should think very carefully about whether a system font is just as good or even better than a web font or your own font. Proven fonts such as Verdana, Arial, Trebuchet, Georgia, Times New Roman and others can be used without hesitation, as they are always legible. And we haven't yet talked about the quality of the text content, which of course plays a decisive role. But that's another topic. Don't underestimate the topic of typography on websites. Consider the technical aspects, such as loading time or umlauts in the fonts, but also the user-friendliness of your typographic design, i.e. legibility, contrast and line height.

Think carefully about whether you want to use your own or an external font or whether you want to use standard fonts, or more precisely system fonts. If you decide to use your own fonts, ask yourself whether you can use this font or a similar variant with Google Fonts. Or whether you really want to integrate the fonts manually via CSS and load them onto the server in all formats beforehand. The standard fonts that the user has on their computer or smartphone and that are loaded from there are tried and tested and do not require any loading time. This applies all the more to mobile loading, when displaying your WordPress website on smartphones.

For me personally, there is usually not much to be said for using an external font or a web font. If a WordPress theme already has Google Fonts on board, I use that of course. Because otherwise I have to unscrew or overwrite the whole thing. That doesn't really make sense.

If it is not clearly part of a company's corporate identity, a separate font is a gimmick. And most customers have neither the time nor the money for that. Many roads lead to Rome - but the wrong use of typography on a website and in web design probably does not. System fonts and standard fonts can be used to create and fill wonderful designs and great websites. Using them is the safer way and will remain so for some time to come. Maybe it's a matter of taste, but perhaps this is the most sensible approach to fonts on websites.