typography basics webdesign

Typography Basics for Your Next Project

Simple is hard. That is 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 would like to show you today which typography basics you should consider in order to display text on your website in the best possible way.

It is no secret that it is difficult for many people to express themselves clearly and understandably. Why should that be easier via media? To make this easier - communication - there is typography. On the one hand, it is the study of fonts, on the other hand, it is a design element to present texts or contents in a clever, appropriate or "aesthetically pleasing" way. The fact that a distinction is made between microtypography and macrotypography is not relevant here.

Why Typography Basics in Web Design?

typography basics webfonts

There is no question that fonts can enliven and visually enrich a website. Fonts are important elements of any good design. On the Internet, i.e. in web design, the matter of typography is subject to special conditions, which I would like to illuminate here and which should help you to better understand the matter 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 made 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 colour and background, as well as the confused structure of the texts make it difficult for users to read.

But that's what typography is all about: the readability of the texts. Otherwise, what is the point of having texts on the website if they are not good and pleasant to read? Allegedly, opinions differ as to what legible texts should look like in the end. I can't understand it, because in graphics we have simple, proven and very sensible typographical rules for creating legible texts. Typography, after all.

One of them is contrast - that is, the colour ratio between the font colour and the background. In a forum I had once criticised a proudly presented web layout for exactly 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 a dark grey continuous text on a light grey background, i.e. insufficient contrast.

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

For me, this is further proof of how little knowledge there is about the readability of texts, i.e. about good typography. In 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

typography basics webfonts

In web design, however, we have other requirements for typography than readability, namely technical ones. Good readability on the internet means that the website loads quickly. So when it comes to integrating fonts, we are dealing with WordPress performance.

In addition, it must be ensured that the texts are as readable as possible on all output devices, which is another challenge. In the end, with the possibilities of the CSS markup language, you have so many ways to intervene in the typography of a website that things quickly become more complex than expected.

And of course we want to have a well-structured text that also increases readability, avoids fatigue and has an effect on Google, i.e. on the ranking in the search engine. For example, the heading tags H1, H2, H3, etc., the use of lists and mark-ups 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 me say that first. I mean, it's not 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 that has been specially developed for the company and 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. But then it is not necessarily about large blocks of text or written information.

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

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

Sometimes it also seems to be a given to transform the desired typeface into web-compatible formats and to integrate them individually. Whether this always works properly in the long run is another matter. That is why I prefer Google Fonts in such cases, because it is fast, secure and easy to use. But this too is perhaps a matter of taste.

"*" indicates required fields

I would like to subscribe to the newsletter to be informed about new blog articles, ebooks, features and news about WordPress. I can withdraw my consent at any time. Please note our Privacy Policy.
This field is for validation and should not be changed.

These 10 typography rules will help you

typography basics webfonts

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

The readability of texts is subject to certain scientifically based rules. They concern not only the typeface itself, but also its surroundings, the contrast, the clarity and structure of the texts and the sharpness of their edges.

1. font size

It depends on the font and is based on the basic design of the website. Please note that the user always has the possibility to change the font size in his browser or smartphone. Try to take relative font sizes, i.e. %, EM/REM or small/normal/medium/large.

2. line width

This is clearly underestimated. It was determined what text width people still like to read: It is a maximum width 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 optimal readability, the so-called bleed-through, i.e. the distance between the individual lines of a text - also 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.

4th barrel width

This is the distance between the letters, which is manipulated by the letter-spacing. You need to be particularly careful and use this design option only with caution. Just use it for certain headings, for example. If in doubt, don't make any adjustments.

5. contrast

The relationship 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 makes the text 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 marks, list mark-ups, the intelligent use of highlighting by means of bold, italics and colour. This has a direct effect on readability and also on Google's ranking.

7. a maximum of two font types

Often one font per website, book or document is enough. In special cases, more may work, but you should be careful with the use of more than 2 fonts per document.

8. capitals

Do not use capitals in headings and in the menu. They are difficult to read. However, if you are dealing with individual words, for example in the NAVIGATION, you can use capitals. But do not write them in capital letters, but use CSS to solve the problem with "text-transform:uppercase".

9. standard fonts

In case of doubt and as a fallback, you should choose tried and tested system fonts. Arial, Verdana, Georgia are such excellently readable system fonts, which are available on almost all output devices and are always displayed well.

A fallback in CSS is the font after it, such as in 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. training

My tip: Educate yourself on typography through workshops, books and magazines, or even by watching a YouTube video on the subject. I can recommend this video, for example. Although Sven Wolfermann advises against system fonts in his lecture at the "MobileTechCon" - in contrast to 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 setting it using CSS: Not least since the introduction of CSS3, developers have subtle setting options for the fonts of a WordPress website. But do they really always make sense? What do I use them for and when? What do I want to achieve? Readability? Beautiful design? Not all coders - or their clients - seem to think about that. They sometimes do everything 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 is terrible what can sometimes be seen.

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

Fonts for the web: the web fonts

typography basics webfonts

By the way: BMW uses on its website as just seen this: font-family: "bmwTypeWebBoldAll", "Arial", "Helvetica",sans-serif;font-weight: normal; - in the body text quite normal Arial. 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. Only as small examples.

Fortunately, there are now many providers of web fonts that work well and are usually easy to integrate. Unfortunately, these "web fonts" usually have to be paid for, and the prices vary greatly. As examples, besides Google Fonts, we would like to mention: Adobe Fonts (Typekit), Webtype, Adobe Edge Web Fon ts and many more - a matter of taste.

The advantage of these services is obvious: you don't have to worry about licences (see below "Attention: Licences!"), 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 plans are often expandable and you have a certain selection of exciting fonts.

The great Google Fonts misunderstanding

When the so-called GDPR was made mandatory for everyone in Mai 2018, the net community panicked about the use of Google Fonts. People were afraid that the use of Google Web Fonts - Google as a "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 illuminates the unfortunately still ongoing great confusion around the GDPR. To the benefit of lawyers and web law firms, of course. If one has concluded an order processing agreement with Google because of the use of Google Analytics and refers to the use of the fonts - and in case of doubt to 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, which was allegedly so bad when the fonts were loaded via Google, was repeatedly denounced. It remains unmentioned that Google has a fast and extremely stable server architecture and that there are still fallbacks (see above). Moreover, you load the fonts from another URL, which can happen at the same time as loading the files from your own server. But once again you are dependent on Google.

Caution: Loading times!

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

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

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

Attention: Licenses!

One thing that must be considered in any case is the licences for the fonts used. If you use Google Fonts or system fonts, which are loaded from the user's computer, you are on a safe WordPress website. With all other fonts that you use on your website, you have to make sure that you have the licence for them. And this can quickly become quite expensive. Whether it's to use it on your own website or whether it's a free font that sometimes causes other worries, if we think of the German umlauts and the eszett (ß), for example.

To avoid all these problems, I use system fonts or Google Fonts. If the customer absolutely wants his own font, you should include the effort for it generously in the calculation, because the integration of external fonts into the website can sometimes cause some problems. For example, with the CSS instructions and here for example, which I always find really bad, with the search for the correct font name in order to be able to access the font correctly for the display of the HTML tags.

Integrate your own fonts

typography basics webfonts

With web fonts and/or your own fonts, which you have made usable for your WordPress website via a tool, you can quickly run into a number of problems for your WordPress website. It is not uncommon for the following phenomena to occur:

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

In order 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 Webfont Generator. Then you load all the formats of your font into a directory on your server and include them in your stylesheet (CSS file) with the path as follows:

@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 the matter is - and thus how error-prone.

Then you can use them in your CSS code and assign them to classes and IDs. This way, some errors can occur that I do not want to deal with here. As before: I recommend standard or system fonts or Google Fonts, which you simply embed 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

typography basics webfonts

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

Although it's a strategic decision, which of course has to be discussed with the customer, I can't see a single argument in favor of a web font or a separate font for mobile devices.

Of course, not all system fonts available for the desktop are available for smartphones. But from my point of view, it is not important here whether you've chosen this or that font for the Android system. It's all about fast information and good readability. 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 conclude that a separate font for mobile display is superfluous. On the one hand, the font affects the loading speed of the mobile WordPress website, which is of particular importance when retrieved 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 a sophisticated web font?

The most important things are always the legibility and what we want to achieve: Imparting knowledge, literary entertainment, buying a product, making contact, ordering a newsletter, or viewing the address. And you don't need a special font or web font to do any of these things.

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 the pre-installed ones from CSS3 onwards, you can use the settings for these web fonts.

Conclusion on the typography basics

You should consider very carefully whether a system font will do just as well 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 content of the texts, which of course plays a decisive role. But that is another topic. Don't underestimate the issue 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 font or an external font, or whether you want to use standard fonts, or more precisely, system fonts. If you decide to use your own font, 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 the computer or smartphone and that are loaded from there are tried and tested and do not require any loading time. This is even more true for 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 web font. If a WordPress theme already has Google Fonts on board, of course I use that. Because otherwise I have to screw the whole thing up or overwrite it. That doesn't really make sense.

If it is not clearly part of a company's corporate identity, having your own font is gimmicky. And most clients have neither time nor money for that. Many roads lead to Rome - but probably not the wrong use of typography on a website and in web design. With system fonts, with standard fonts, wonderful designs and great websites can be created and filled. Using them is the safer way and will remain so for quite some time. Perhaps it is a matter of taste, but perhaps this is the most sensible approach to the subject of fonts on websites.

Your questions about the typography basics

What questions do you have about typography basics? Feel free to use the comment function. You want to be informed about new postson the topic of WordPress, web design and more? Then follow us on Twitter, Facebook, LinkedIn or via our newsletter.

Did you like the article?

Your rating helps us improve our future content.

Post a comment

Your email address will not be published. Required fields are marked with *.