Typography Basics: The Most Important Rules for Designing Your Website

Mark Max Henckel Updated on 21.10.2020
14 Min.
typography basics webdesign
Last updated on 21.10.2020

Easy is hard. That's my guiding principle. And that's exactly how it is with typography in web design and fonts on websites. There's actually a lot more going on in something that appears so simple. In this article, I'd like to show you how to best present texts on your website using some basic rules of typography.

Everyone knows how difficult it can be to express yourself clearly and understandably. So why should it be any easier via media? We have typography to make communication easier. On the one hand, typography is the discipline of fonts. On the other hand, it's a design element for presenting texts or content for a specific aim or in a clever, "aesthetically pleasing" way. A distinction is made between microtypography and macrotypography but this isn't relevant for what we're covering today.

Typography in web design: Why is it so important?

typography basics webfonts

Fonts can undoubtedly invigorate and visually enrich a website. Fonts, also called typefaces, are important elements of any good design. Typography is subject to special conditions on the internet, i.e. in web design, and I'd like to shed some light on these.

"Good typography does not look for all that is possible, but asks for what is necessary."
Kurt Weidemann

In many cases, it's not trained graphic or media designers who are designing and implementing websites. Instead, these tasks are often carried out by people coming in from other industries. This could explain why on many sites even the most basic of graphic rules are disregarded. The situation is glaringly apparent when we look at typography in particular. Basic errors such as the unrestrained use of poorly legible capital letters, the lack of contrast between font color and background, and the confusing structure of texts all make reading far more difficult for the user.

But legibility is the crux of typography! Why else have texts on your website unless they're easy and pleasant to read? Some people claim opinions are divided on what easily legible texts should look ultimately look like. But I find this hard to believe. In graphic design, we have simple, proven and very useful typographical rules, which we use to create easily legible texts. That's what typography is.

One of these rules is contrast, the color relationship between the font color and the background. I once called out a proudly presented web layout for exactly this reason in a forum. In graphic design, we call the phenomenon the alleged web designer was trying to sell a "white eagle on white background". The contrast in this example was extremely bad with a dark gray body text on a light gray background.

While this may have been to some people's taste and nice to look at, the text was extremely difficult to read. I commented that I wouldn't consider something well-designed if I'm barely able to read the text. My eyesight is also relatively good, what about people with limited vision? Accessibility is often an overlooked issue. In any case, the designer took the position that it was his design and that's exactly how he wanted to do it. There are times where you'd just like to shout "you can do it your way but your way is rubbish!".

For me, this is further proof of how little is known about the readability of texts, i.e. about good typography. During my training as a media designer for print many years ago, I learned an awful lot from an experienced graphic designer and typographer who I worked with.

Web design & typography: The particular challenges

typography basics webfonts

In web design, however, we have other requirements for typography than just readability, namely technical challenges. How quickly a site loads counts towards its readability. So when it comes to integrating fonts, we're also dealing with website performance.

We need to ensure texts are equally legible on as many output devices as possible and this represents a further challenge. Ultimately, the markup language CSS provides such a sheer number of ways to alter the typography of a website that things quickly become more complex than you'd have anticipated.

At the end of the day, we all want to have well-structured texts that also increase readability, prevent fatigue, and have an effect on your ranking in search engines like Google. Examples include headline tags H1, H2, H3 etc., the use of lists and markup forms such as bold/strong and cursive (em/i), paragraph marks, and other useful HTML elements.

Let me get one thing straight first, I'm a huge fan of using standard fonts. You don't really need to have your own special fonts on your website. Of course, there are some valid reasons why you might want to introduce your own font. A corporate typeface that is developed especially for a company and has an important function in corporate identity, for example. Or perhaps you're a really good designer, artist, or photographer and it's very important to you that the design appears extravagant or very personalized.  But even then, the focus isn't necessarily on having large blocks of text or written information.

A custom corporate typeface is usually used by larger companies that operate with their own IT department and server farm. This way the website is unlikely to encounter any performance problems and the embedding of corporate typefaces can be overseen technically.

If you're a designer and want to show what you can do, I recommend relying on existing services - on tried-and-tested web fonts - in the typography. This enables you to integrate the chosen font into your own website in a secure and high-performance manner.

Sometimes you might want to convert the desired typeface into formats suitable for the web and to integrate them individually. Whether this will continue to run smoothly later on is another matter. That's why I prefer Google Fonts, because it's fast, safe, and easy to use. Again, this might just be a question of personal preference.

These 10 typography rules will help you

typography basics webfonts

The overriding rule is: Less is more. Consider people's reading habits. Orient yourself towards websites with extensive editorial texts and learn from them.

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

1. Font size

The font size depends on the font and on the basic design of the website. Don't forget the user can change 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 length

The importance of line length is greatly underestimated. Research was carried out to find what the maximum line length that people will comfortably read is. The result: up to a maximum of about 70 characters, i.e. a standard A4 text width of a Word document. Just have a look at sites like SPIEGEL ONLINE to see how wide their text blocks are.

3. Line spacing

For optimum readability, the so-called "space between the lines", i.e. the distance 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% of "line-height" has proven successful online.

4. Character spacing

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: good and semantically correct structured texts! For example, in HTML this means the headline tags H1/H2/H3, the paragraph marks, list markups, the intelligent use of highlighting using bold, italics and color, and much more. Good structure has a direct effect on readability and also on Google rankings.

7. A maximum of two fonts

In many cases, one font is sufficient for a website, book, or document. More fonts might work in some special cases but you should be careful with more than two fonts in one document.

8. Capital letters

Don't use capitals in headings and in the menu as they're very hard to read. If it's just a single word, for example NAVIGATION, you can use capital letters. But don't write in capital letters, use CSS with "text-transform:uppercase" to do it.

9. Standard fonts

If in doubt and as a fallback, you should choose proven system fonts. The system fonts Arial, Verdana, Georgia are easily-readable fonts that are also displayed well on all output devices.

A fallback in CSS is the successor font. Let's take the website of BMW as an example: "bmwTypeWebBoldAll," "Arial," "Helvetica," sans-serif; Here Arial, Helvetica and Sans-Serif (the first font available under Sans-Serif) are the fallbacks that are displayed when the font in front of it ("bmwTypeWebBoldAll") is not available.

10. Further training

I recommend learning more about typography through workshops, books and magazines, or even YouTube videos on the subject. I can recommend this video as an example. Although presenter Sven and I disagree on using system fonts, his presentation from "MobileTechCon" provides a lot of valuable information on typography.

Font design with CSS: Does it make sense?

A word about designing or editing fonts using CSS: Not least since the introduction of CSS3 there have been subtle ways for developers to make changes to the fonts of a site. But does it always make sense to use them? What could I use the settings for and when? What do I want to achieve? Readability? Beautiful design? Not all coders, or their customers, seem to consider these points enough. Sometimes they just want to tinker with everything that's possible. Not only change the line-height, which sometimes causes problems with heights, distances and positioning, but also the letter-spacing or put shadows around the text ("text-shadow"“). Some of the things you see are truly bad.

For this reason, I advise you to be very careful with these settings and use the techniques with caution. They don't work everywhere and on they can even obstruct the display on small screens. Then you'll have to undo the rules for the desktop via "Media Queries", which again costs you time and code. Does that really make sense? The answer should be obvious.

Typefaces for the web: The web fonts

typography basics webfonts

By the way: On the BMW website, as we mentioned above, they also use this: font family: "bmwTypeWebBoldAll","Arial","Helvetica",sans-serif;font-weight: normal; - and Arial for the continuous text. Amazon also uses Arial. Apple, on the other hand, of course uses its own web font. The oil company TEXACO uses Adobe fonts. These are just a few examples of how web fonts are handled by different companies.

Fortunately, there are now many providers out there offering web fonts that work well and are easily integrated. Unfortunately, you do usually have to pay for web fonts and the prices vary greatly. Besides Google Fonts, which we'll get to later, other providers are worth mentioning: Adobe fonts (type kit), Webtype, Adobe Edge Web Fonts and there are many more out there. It's simply a question of preference.

The advantage of these services is obvious: You don't have to worry about licenses (see below "Caution: Licenses!"), the fonts work, and there is help or instructions for embedding the fonts on your own website (i.e. support or forums). The rates are often expandable and you have a selection of exciting fonts to choose from.

The great Google Fonts misunderstanding

When the GDPR came into effect for everyone in May 2018, the online community was afraid of using Google Fonts and panicked. They were afraid that by using Google FontsGoogle being a "data kraken", against which this legislation was directed, they wouldn't be complying with the data protection laws and would therefore risk costly legal warnings.

This still widespread fear highlights the ongoing confusion surrounding the GDPR. This is, of course, to the benefit of lawyers and IT law firms. If you've set up an order processing Google Analytics with Google and point out the use of fonts, and in case of doubt cookies, in the privacy policy, in the privacy statement, then the issue is solved.

If you're still concerned, you can integrate Google Fonts locally. This involves downloading the Google Web Fonts and saving them on your own webspace.

In addition, the performance when loading the fonts via Google directly was repeatedly criticized. The fact that Google has a fast and extremely stable server architecture and that there are still fallbacks (see above) wasn't mentioned. In addition, the fonts are loaded from a different URL, which can be done at the same time as loading the files from your own server. But you're once again reliant on Google.

Caution: Loading times!

It's quite simple. Externally integrated web fonts can increase the loading time of a site. The necessary code to integrate your own fonts into the site can too, however. Only the standard fonts, the system fonts on users' computers and smartphones, do not require loading time as they're not loaded via a server and not via the internet.

Or in other words: If your site needs fast loading times but your hosting and the company behind it doesn't have CI font that absolutely must be integrated, I would always go for the standard. So with system fonts, as Amazon has done with Arial well. There's a point to it.

Of course, this isn't about the kilobytes of the fonts to be loaded. The point is that these are on top of everything else, so they have to be downloaded additionally and the server supposed to deliver them may be faltering. That doesn't look good and is... avoidable.

Attention: Licenses!

You need to pay attention to the licenses for the fonts used. If you use Google Fonts or system fonts, which are loaded from the user's computer, you're on the safe side. For all other fonts that you use on your website, you must make sure that you have the license to use them on your website, which can be quite expensive. Alternatively, you may be using a free font, which can cause other problems if special characters from different languages are not included, for example.

To avoid all these problems, I use system fonts or Google Fonts. If a customer absolutely insists on having their own font, the additional effort must be reflected in the price calculation. This estimate also shouldn't be too low as the integration of external fonts into the website can sometimes cause problems. These can arise, for example, with the CSS statements and when searching for the correct font name to be able to control the font for displaying the HTML tags correctly.

Integrate your own fonts

typography basics webfonts

You can quickly encounter a whole host of issues when using web fonts and/or your own fonts that you've made usable for your site via a tool. The following phenomena often occur:

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

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 include your own fonts on your website. You can download these formats for free with the web font generator tool. Then you load all formats of your font into a directory on your server and include them in 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 by this @font-face code, which integrates your writing, just how complex it is and therefore also prone to errors.

Then you can use them in your CSS code and assign them classes and IDs. Some errors may occur at this point which I'm not going to look at here. As I said, I recommend standard or system fonts or Google Fonts, which you simply include in the header of the website via the linked file:

Typography and mobile devices

typography basics webfonts

The subject of typography on mobile devices is generally overlooked. From my point of view, you don't need to load a special font on a small display or a smartphone. What about using fallbacks, the system fonts of mobile phones? If I'm creating or need to optimize a mobile site, the first thing I can do to improve loading time is to leave out downloading a webfont or own 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 two factors, 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 site, which is important if someone wants to access your site quickly at the bus stop. On the other hand, we've (hopefully) reduced the content and design of the mobile version of the website to the essentials for precisely these reasons. So 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 always check if one of the system fonts is suitable for your project. A complete collection of so-called web safe CSS rules for system fonts or web safe fonts can be found at www.cssfontstack.com.

Web safe fonts are fonts that are preinstalled in many operating systems. Although the same fonts are not installed on all systems, 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 preinstalled fonts from CSS3 onwards, you can use the settings for these web fonts instead.

Final Thoughts

You should really think about whether a system font could do the same or even a better job than a web font or your own font. You can use tried-and-test fonts like Verdana, Arial, Trebuchet, Georgia, Times New Roman and others without hesitation as they're always easy to read. We haven't even talked about the quality of the texts, which of course plays a decisive role. But that's a matter for another day. Do not underestimate the topic of typography on websites. Consider the technical aspects, such as loading time or special characters, and also the usability of your typographic design, i.e. readability, contrast, and row height.

Think carefully about whether you want to use your own or an external font or a standard or system font. If you do decide to go for a custom font, ask yourself whether you want to use this font or if a similar variant from Google Fonts can be used. Or if you really want to embed the fonts manually via CSS and upload them to the server in all formats beforehand. The standard fonts users have on their computer or smartphone are already tried-and-tested and require no loading time. This especially applies to mobile loading when your site is displayed on smartphones.

In my opinion, there's usually not much to be said for using an external font or web font. If a WordPress theme already has Google Fonts on board, I of course use them. Otherwise, I'd have to mess around with or overwrite the whole thing myself and that wouldn't really make sense.

If it's not a part of the corporate identity of a company, having a custom font is rather just a gimmick. And most customers have neither time nor money for this. Many roads lead to Rome - but you're not going to get there by using typography badly on a website and in web design. You can create wonderful designs and great websites with standard and system fonts. Using them is a safer option and will remain so in the foreseeable future. Again, maybe this is all just a matter of taste but perhaps it's the most sensible approach to fonts on websites.

Picture: Ksenia Makagonova | Unsplash
More pictures: Alexander Andrews [Unsplash], rawpixel [Pexels], Magda Ehlers [Pexels], Kristian Strand [Unsplash], Aaron Burden [Unsplash], RAIDBOXES

Mark Max Henckel - Web designer from Hamburg. Trained media designer (print), working as web designer since 2000. First at mobile.de, since 2003 self-employed. Since 2005 blogger on different topics on different own blogs. As a freelancer from 2007 and 2008 at SPIEGEL ONLINE, he was involved in the launch of eintages.de at the interface between programming and editorial office. Later at the SPIEGEL marketer Quality Channel (Spiegel QC/Spiegel Media). Freelancer for libri.de and various graphic & IT agencies. Since 2008 specialized in WordPress .

Related articles

Comments on this article

Write a comment

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