5 min read

A Guide To Typography in Web Design

As per studies, more than ninety percent of the information available online, is in the form of the written word. Thus ensuring that your written content is legible and readable by your audience is critical. Typography in web design is “the art and technique of arranging type in order to make language visible” (Wikipedia). In other words, it is the way in which designers arrange and style text on the web. While typography is quite underrated from a design perspective, it can completely change the entire user experience. If the text or information on your website is not legible, your audience may never return to your website.

Typography web design

Thus as a web designer it is crucial to invest some time into the typography website design. Typography plays a critical role on any website by ensuring that your audience can comfortably read and process all your text. By focusing on the look and readability of your words, you can improve your audience’s user experience and ensure that your readers won’t be challenged by your text. 

Let us understand what is web typography and then understand a few basic guidelines that designers can follow to improve the typography of their website.

What is website typography?

As we discussed in our introduction, typography in UX design is basically how your text looks to your reader; or in other words, how the words and text appear on the screen. Thus typography in web design basically applies to how text appears on the website. There are a lot of considerations to account for in website typography. 

Website Typography

Digital text needs to be designed keeping in mind the following:

  1. Ease of reading for users
  2. Shorter attention spans – there are an endless number of website options available on the web
  3. Skimmability – users are generally looking for very specific information when they land on your website, and they want to be able to find it fast
  4. Accessibility – information on your website needs to be accessible to all kinds of users
  5. Legible across devices – since not all users access websites on their desktop, your typography needs to be legible across any digital device and screen size, from a mobile to a laptop.

Typography is a combination of fonts, colours and styling and how we present the text on the webpage. All of these details together create a comfortable reading experience for your user. 

Before we go into the essential guidelines for web typography, let us look at some typography basics and understand the terminology used in the field of web typography. 

Typefaces and Fonts

A typeface is a specific look and feel that is applied to a set of alphabets and numerical characters. A font is a particular instance of a typeface that has a specific weight and may have other special style characteristics such as italicised or non-italicised, rounded or unrounded. 

Type and Fonts

An example of the best typeface is Helvetica, and an example of a font is Helvetica Light, Helvetica Regular etc.

Thus a typeface is actually a broad style category for a set of specific fonts. 

There are two broad font styles – serif and sans-serif. A serif is a stylistic projection off the main stroke of a letter. Fonts with this styling are called serif fonts and those without are called sans-serif fonts. 

Script is another style used in web typography which replicates the style created by handwriting. Since it is harder to read than serif and sans-serif style fonts, it is usually used in very special cases like prominent headings.

Kerning

Kerning is the horizontal space between two characters. Some fonts have smaller kernings, while others are wider to improve legibility. Most fonts have specific kernings between different pairings of characters so that letters fit together snugly.

Kerning

Tracking

Tracking is also similar to kerning, in the sense that it also describes the spacing between letters. However tracking is used to describe the overall spacing between letters of an entire line or a block of text rather than just two letters.

Tracking

Leading 

Leading is the vertical spacing between lines of text. Leading can be expressed as single-spaced or double-spaced or be expressed in units of pixels or points.

Leading

Hierarchy

In a webpage, the order of text from most prominent to least prominent is what comprises the hierarchy. Hierarchy is extremely important to make a page navigation friendly. It helps readers jump to the section most relevant to them.

Hierarchy

Let us now look at the 9 important guidelines in web typography.

  1. Limit the number of typefaces

To maintain consistency and visual cohesion in your content, use just two typefaces across your website. Use typefaces that are visually compatible yet distinguishable from one another. For most websites one typeface should suffice, if you use different fonts within it for different headings and body text.

2. Use a san serif font for body text

Sans serif fonts are thought to be more readable for digital texts. Serif texts can be used in titles, headings, quotes or more decorative sections. While sans serif text should be used for large blocks of text that require more effort to read.

3. Stick to web-safe fonts

Web safe fonts are those that are compatible for a variety of browsers and devices. Since riders are accustomed to these fonts, they are less likely to distracted by the appearance of your text which allows them to scan it more quickly.

4. Size your text appropriately

A common guideline is to set all website text to a minimum size of 16px. This is the smallest font that most people can read without needing to zoom in. However headings should always be larger than body text. 

5. Don’t use all caps

Capitalised text is unnecessary and distracting. To highlight or emphasise body text, you can choose to make it bold. This is more readable and visually pleasing.

6. Use colours carefully and intentionally

The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for most text, and 3:1 for large, bolded text. Use free tools to check the contrast between your font and background colour to ensure it is readable. It is also better to keep the body text a uniform colour. 

7. Stick to 40 to 80 characters per line

This is the optimum number of characters that your users can read without being distracted or bored. 

8. Provide sufficient spacing between lines 

For body text, start with a spacing of 1.5, which means that the leading is 50% the height of the text line. For headings, this distance should be slightly greater. For between paragraphs, start with a spacing of 2.5 and adjust up or down from there.

9. Eliminate text animations

Text animations can affect readability and could be inconvenient for readers.

Conclusion

While it is important to keep these guidelines in mind, web designers are also free to experiment with a variety of styles to see what works best for their website. For the best typography design, ensure that you adequately test your website with beta testers. User testing is essential to ensure that your text content is readable.

Published by Antara Bhargava

Sr. UX Designer

Antara Bhargava Sr. UX Designer