Web typography guide

Typography

Definitive guide to website typography: design for readability

Choosing a font is easy: all you have to do is open the drop-down menu and click on a name. Choosing the right font, on the other hand, is not so simple. It involves a long list of considerations and is one of the most important decisions you'll make during the process of designing your website.

Professional designers usually learn the basics of typography as part of their studies. However, as more and more people learn about Website Builder or similar tools participate in website creation, understanding website typography becomes increasingly important even for non-designers. So, to brush up on the basics of website typography, this article provides tips you can use when choosing a font for your website to ensure the best reading experience for your audience.

What is website typography?

Every website has text, and where there is text, there is typography. Broadly defined, website typography determines the appearance of the text on the website. It's how the words appear on the page, both the styling (the font, the size, the spacing) and how the text appears on the page.

The combination of all these elements should aim to ensure easy readability of the text. In addition, the website typography should also take into account the following:

  • Shorter attention spans, especially online;
  • Accessibility because people interact with online texts in different ways;
  • Skimmability, as people often don't have time to read the entire text;
  • Different screen sizes as users browse websites on different devices.

The most important thing to know about typography is this: If it works, you won't notice it. If it doesn't work, you probably won't stay on the site long enough.

Web typography terms

To better understand web typography and eventually introduce it to your website, let's first cover some basic typography terms and understand how they can be applied to web typography.

1. fonts

A font is a specific look and set of characteristics applied to a group of alphabetic, numeric and punctuation elements. If "Aren't these the fonts?" was your first question, you're not alone: this is a common misconception.

The font is a particular instance of a typeface; they are parts of the typeface. They are then distinguished by their weight (bold or light), size (14px or 24px), or other stylizations (italic, underlined, etc.). To give an example, Helvetica Bold (16px) and Helvetica Regular Italic (24px) are fonts , and they are part of the Helvetica typeface. Fonts are often referred to as font families, as they are a broad term for fonts with similar characteristics.

Informative image

Many fonts correspond to only two typefaces: serif and sans-serif. Serif fonts usually contain small embellishments at the end, Sans-Serif fonts do not. Here's an easy way to tell them apart: "Sans" in French means without.

Font Image

Apart from these two, other fonts are also available, one of which is Script. However, these types are less commonly used on the web because they are harder to read on screens.

Photo Inspiration Image

2. undercutting

Kerning is the horizontal distance between the two characters of a word. Different fonts have different kerning to improve readability and avoid awkward gaps in words. Kerning can also differ between different characters of the same word for the same purposes.

Text Alternatives

In the second case, kerning is added between repeated Ts to improve readability.

3. tracking

Similar to kerning, tracking is also the spacing between letters. However, instead of the spacing between two individual characters, tracking is the spacing between all the letters in a word or line. And like kerning, it is also adjusted to improve readability, emphasize a word, or serve other purposes.

Tracking

4. line spacing

Line spacing, or line height, is the term for line spacing in typography and plays an essential role in making the text on your website readable. By increasing line spacing, you increase the space between lines, which generally improves readability. For good readability, line spacing should generally be about 30 % larger than the font size. For example, if your letter size is 20 pixels, a line spacing of 26 pixels is recommended.

Line spacing

Proper use of white space in text should improve text comprehension because it visually separates the content into digestible parts and does not clutter the page.

5. hierarchy

Hierarchy is the order of the text on your website. Most websites, especially text-heavy ones (like blog posts), try to divide text into smaller sections to make them more digestible and manageable. These sections are called headings.

Text hierarchies allow readers to jump through the text and see the sections that are more important or that they are looking for. They also allow you to highlight which parts of the text are critical, while others are secondary information.

On websites, text hierarchy can be emphasized by different fonts, font sizes, colors or other features. For example, in this article, web typography terms are a heading 2 (H2,) while the terms mentioned are heading 3 (H3). These H3 sections are increasingly specific, and their appearance indicates that they are a subsection of a more general topic . The title of the blog is usually heading 1 (H1). Here is an example of the text hierarchy displayed in our text editor.

Hierarchy

Selection of the best font for reading on the screen

Digital design is evolving rapidly. A few years ago, there were only a handful of fonts to choose from, but today the selection runs into the thousands. These fonts were created for the screen and have nuances and details that make them readable on different devices.

That being said, there are a few things you need to consider when choosing a font for your website. They will make the reading experience on your website much more pleasant and provide a better customer experience.

1. limit the number of fonts used to a minimum

A good rule is to stick to one or two font families. If you exceed that number, your text and website will look unstructured, unprofessional, and sometimes even confusing. The same goes for font sizes: Too many sizes, especially when mixed together, can make for a pretty chaotic viewing experience.

Different fonts

Once you've chosen your font families, stick with them throughout the site. If you choose two font families, it's important to make sure they complement each other or at least harmonize.

Books of the months image

Take a look at the following examples of font combinations. Although the fonts in the first image belong to different font families and appear to be quite different, none of them overshadows the other. The two fonts are well balanced and make a harmonious combination.

Fonts

Now let's look at another font pairing. In this example of the Baskerville + Impact combination, Impact far outshines Baskerville. It draws attention to itself and creates the possibility that the first part of the text will be ignored.

Font images

2. try to stick to standard fonts

Through platforms like Google Fonts, you have thousands of fonts at your disposal, giving you exciting opportunities to try something new and exciting. However, one thing can go wrong: Overly complicated fonts can be distracting to your website visitors. To avoid this, try to stick with standard fonts unless there's a really special occasion that requires custom fonts. Experimenting with fonts is fun, but it's important to remember that the goal of good typography is to get people to read the content.

3. use a font that looks good on different devices

People access your website from a variety of devices, from smartphones and tablets to PCs. To ensure your website remains accessible to readers, opt for fonts that look good and are readable on different screens. Start by using a font that looks good at different sizes. One such example is the Roboto font shown in the image below.

Text Sizes

Avoid cursive or ornate fonts. They look very nice, but as they decrease in size they become less legible, as with the Comforter Brush font below.

Text Fonts

Font pairing for your website

Now, let's take a look at some beautiful font pairs that you can use for your website to achieve a balanced and beautiful look.

1. lora & merriweather

Font Pairing for Website

2. roboto & Archivo Black

Roboto & Archivo Black

3rd Bebas New & Old Standard TT

Bebas New & Old Standard TT

Conclusion

Armed with these website typography tips and know-how, you now have enough knowledge to start experimenting. Play around with your website typography to find font and style combinations that both look good and ensure your visitors have a great experience. If you have the resources, organize a user test to see how people respond to your typographic choices. Or simply ask a few friends for feedback. This will give you insight into the readability of your copy and whether it's achieving the desired goal.

Picture of Silvio Mazenauer

Silvio Mazenauer

For more than 20 years, I've been helping our customers get up to speed with web hosting, domains, websites or cPanel. And I'm here to help you too.

Your FREE digital work platform. With XtraMail you have your office with you everywhere.

Experience your eMail like never before with XtraMail.

Your email solution for private and business: XtraMail Webmail. With e-mails, video conferences, documents, calendars, contacts and a mobile app - plus over 40 other useful functions.

xtramail webmail teamwork