The web is 95% typography. How do we make sure that everyone can read the content of our website?
The web is 95% typography.
It’s safe to say that a large part of accessibility of digital content lies in typography. Users generally come to a website to find specific information, and even in 2020, most of this information will be in written form. But how do we make sure that everyone can read the content of our website? Even those users with impaired vision, reading disabilities, and colour blindness?
At Contrast, we take accessibility very seriously and that’s why selecting an appropriate typeface for text usage is an important step in our design process.
Along with accessibility, the choice of typeface determines the tone of a design and can affect the user’s feelings towards it. Just like people would judge you if you show up at a gala night in your favourite sweatpants and hoodie, web typography can make and break your website’s first impression. Don’t be that person, don’t give users an excuse to misunderstand your brand or even your business. Keep reading!
There are many factors that influence the choice of typeface.
First of all, you should consider the core message of your design. Bad typographic choices can distract from your message, while good choices help reinforce meaning, and can positively influence viewers’ feelings toward the design and ultimately toward the brand. As Inga said in her blog post about the role of brand identity in UX/UI design: “Typefaces have their own personalities and can appeal to certain perceptions.” (read the entire post here)
Reading actual text samples and knowing context and audience is also fundamental. Are you designing a web page for an investment company? For a restaurant’s booking application? Are users going to read the content from a desktop or a mobile phone? All these considerations will influence your choice of typeface.
Similarly, it is important to consider suitability as a functional matter. There are certain typefaces which are mainly used in body copy as they are easy to read such as Times New Roman and Arial, and others that are better suited for display or decorative purposes. Especially the latter category can have a big impact on the design – and particularly on legibility – if used incorrectly.
Legibility is a key element in a well-designed web page. Words need to be distinguishable and letters need to be clear in their forms for a text to be properly legible. A common legibility issue with many typefaces is that the number 1, capital i and lowercase l are nearly indistinguishable. Let's look at the example below.
Legibility is compromised when it’s hard to distinguish letters with similar forms
Let’s get a bit more technical and typography-geeky now. How do we pick a typeface that is legible, especially for small sizes (14, 16, 18 pixels) body texts?
In the blog post “Bring rhythm to your website!”, we have already talked about body text as the base of vertical rhythm in a web page and how the content is crucial for determining typeface, font size, line-length and line-height.
In a content-first design approach, when typesetting for a web page, the best starting point is again the body text. As we said earlier, users spend most of their time on the web looking at text, therefore it is important to provide a flawless and comfortable reading experience.
But first, let's make a concept clear: is it typeface or font we are talking about? Today the two terms are wrongfully used indifferently. The typeface is the design, it is what we identify with a name - Times New Roman or Roboto. Font is when the letters with that typeface need size or weight - 10 point bold, for example.
Roboto bold and 60 pt (on the left) and Roboto italic 48 pt (on the right) would be two different fonts, but the same typeface.
There are two majors goals you want to achieve when typesetting your body text: the optimal typeface needs to be legible and accessible, and work naturally with your design. There are a few characteristics to look for when selecting a typeface: x-height, apertures, spacing, length of ascenders and descenders, and number of styles and weights.
X-height is the vertical size of a lowercase x, as measured from the baseline (the imaginary line upon which all letters sit). When the x-height is too small in relation to the height of the capital letters of the typeface, it might cause words to be illegible in smaller sizes. Likewise, if the x-height is too tall, it might cause some letters to be difficult to distinguish (for example n and h).
Garamond (left) has a small x-height. Minion Pro (center) has a decent x-height. Lora (right) has a generous x-height.
Apertures are the opening gaps in letters such as c, e, and s. Open apertures (referring to big opening gaps) are essential to deciphering letters in smaller sizes and bad viewing conditions. On the other hand, closed apertures can affect legibility in such cases. Let’s consider the difference between the typefaces Arial and Helvetica in the example below.
Myriad Pro (left) has larger apertures than Helvetica (right).
Letter-spacing is an essential characteristic to look at in a typeface, especially in web typography. Just like a web page should have a well established rhythm (vertical and horizontal), a well designed typeface has a good rhythm in the space within and around letters. This is important as even spacing speeds up the reading process. To understand this concept better let’s look at the example below.
Officina Sans ITC Pro has even rhythm.
Ascenders refer to the parts of letters that extend above the baseline (such as the strokes of d, b and t), while descenders refer to the strokes that extend below the baseline (letters such as q, g and p). For good legibility, a typeface should have easily distinguishable ascenders and descenders.
Helvetica (left) has less distinguishable ascender and shorter descender than Noto Sans (center). Noto Serif (right), however, has more distinctive ascender and descender than both of the sans serif typefaces.
When selecting a typeface, it is advisable to consider the amount of styles and weights it provides. While some super type families might have up to 50 styles, you should be sure to have at least four styles: regular, italic, bold, and bold italic. Not only does this give you enough basic flexibility for styling your texts, it also has an impact on the browser behaviour: if your typeface does not have an italic style and/or bold style in the font files, the browser will try to compensate by either tilting letters to look italic or doubling them to look bold. Without the true italic and bold styles, the result not only looks less than pleasant, it will also affect legibility.
True italic Sabon (left) vs. faux italic Sabon (right)
True bold Sabon (left) vs. faux bold Sabon (right)
Choosing a typeface is much more than following a “gut feeling” or copying a website you like. There are thousands of fonts available for designers and not-designers to choose from. However, when it comes to picking the right typeface for a digital interface, there are many factors to take into account, especially if you are pursuing the noble cause of accessibility.