Vip World's Blog

Why should we pay attention to typography?

Aleksandra Pietrasz
Sep 24, 2020

There is a plethora of content generated everyday with the advent of digital technologies. But, what use is the content if it is not readable?  

Sometimes we are forced to read text that takes more effort to differentiate the letters.

Sometimes we are forced to read text that is too small in size and with bad contrast.

Sometimes we are forced to read text that is displayed for a very short time.

These cases narrate that even reading short blocks of the text brings us dissatisfaction, but dissatisfaction can be acceptable sometimes. The irritation is highlighted when we read large texts that are uncomfortable to the eye to comprehend. It becomes a big problem when the text we need to comprehend is essential and needs to be responded necessarily but it is simply not readable.So, how should we create content to make sure that the reader is able to read and comprehend everything without extra effort? This article shares the information that you need to pay attention to in order to create an easy and accessible text content.

EXERCISE

Let’s think, which of the following examples is easy to read? Each of the fonts has the same size.

Five examples of different types of font


As you probably know, you can find thousands of different fonts. I believe that sometimes you feel overwhelmed and have trouble choosing the best font for your project. 

Previously, whenever I had to create a presentation or an essay, I got obligatory guidelines such as type of font, size, text alignment  etc. but the mentor or boss never considered to follow guidelines on making text easy to read. Sometimes, when I had to create something without any mandatory requirements, I just browsed a few fonts in the program and chose the one that looked best without considering any aspects of accessible texts.

Now, everything has changed. When choosing a font, I ask questions.

Who will use it? 

Who will ADDITIONALLY use it?

After that, I try to consider good practices to make sure that users who suffer from different disabilities and difficulties can deal with the text, and in the end, they are not forced to wipe sweat from their forehead. 

Who should we focus on?

  •  visually impaired people
  •  colour blindness 
  •  people who suffer from reading disorders
  •  elderly people

Creating texts for the above-mentioned groups will ensure that you can create an accessible text that will be easy to use for most people.

1. SIZE & STYLE VS Size & Style

Comparison the same font size differs from one font to another

The size of the font should be easy to read. The recommended size for websites to amount at least 16 px (12pt) for fonts which are easy to read like sans serif:

Arial, Helvetica, Verdana, Tahoma, etc.

Some of the fonts on the right look like a different font size, although they all have the same size.

What is important for this size is additional variations like bold, italic, or underlined versions as well as CAPITAL or small letters.

Sometimes recommended fonts that are set in a specific way can be less accessible.

If you would like to pick up a proper font you have to think about:

  • how long is the text 
  • how the structure and style look (line space, tracking, kerning, alignment, exposing part of the text, dots, etc..)
  • how many characters are in every line
  • how often the font is used (well-known fonts are easier to read than a completely new one)

The recommended length of a text in line to allow comfortable reading should contain around 65 signs. The acceptable length is from 45 to 75 letters.

* Shorter blocks of text are fine for marginal texts, captions, labels, forms.

Recommended length of the text in line - 65 signs

Other examples of different variations of fonts.

The text examples with different settings

2. SANS SERIF & SERIF

Examples of sans and sans serif fonts

For online reading, sans-serif fonts (e.g. Arial, Verdana, Tahoma) are generally considered more legible than serif fonts (Times New Roman), narrow fonts, or decorative fonts. Decorative and narrow fonts in particular should be reserved for headlines and decorative texts only which are short.

BUT 

Unfortunately, some sans serif fonts consist of letters that look similar, and people who suffer from reading problems have more difficulties to read them.

Readability vs legibility 

Readability refers to how easy it is to distinguish one letter from another, and readability refers to how easy it is to read a block of text.

Examples of letter that looks the same or similar

Insights: 

  • sans serif fonts provide mirror opposites for letters: p, q, b, d
  • some of sans serif fonts provide the „I” „l” which looks the same or almost the same (exceptions e.g. Verdana, Tahoma)
  • serif fonts have unique letter identifiers 
Comparison the same letters for sans and sans serif font

The black “pbqd” character string is covered by the green inverted character string. There are noticeable black strokes that let us distinguish each of these letters.

Fonts known by users - example

  1. GOOGLE

Logo: Products Sans

Search: Arial Regular

Gmail: Google Sans, Roboto, and Arial

  1. ZOOM

Fonts: Arial, Helvetica, Lato

The screenshot from ZOOM App website


IMPORTANT!

Some sans serif fonts have extended e.g. Arial type family includes more styles: Rounded (Light, Regular, Bold, Extra Bold); Monospaced (Regular, Oblique, Bold, Bold Oblique).

Therefore, it is important not to imply a font name, but rather how it looks and which version we use


3.  COLOURS


To meet minimum colour requirements of WCAG standards you should follow level AA conformance. 

What does it mean?

Remember the visual presentation of text and images of text should have a contrast ratio of at least 4.5:1 on AA level (minimum) and of at least 7:1 on AAA level (enhanced). If you would like to use different colours than black/other dark/other bright/ white, I encourage you to check the contrast ratio of your colour combinations first. Here is a link to a free tool to check colour contrast.


For this requirement exist of course exceptions:

Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; 

Incidental: Text, or images of text that are part of an inactive user interface component; that is there purely for decoration, isn’t visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Contrast guidelines based on WCAG standards


PASSED EXAMPLE

passed colour contrast

FAILED EXAMPLE

failed colour contrast

PARTIALLY PASSED EXAMPLE

partially passed color contrast

Colors meet the requirements on AA level and for AAA but only for fonts over 18pt

(18 pt = 13,5 px) 

Brightness and color diff has failed.

If we want to provide fonts accessible for everyone we have to remember about colour blindness people.

colour contrast if you are suffer from colour blindness


4. OTHER GOOD PRACTISES


LESS MEANS BETTER

Less fonts =more harmony. Of course, perfect harmony is not always our goal. Isn't it? 

However, be careful not to move from a bold composition to a complete flap.

Example of text which a few different types of font

DON’T STRETCH THE FONT

Example of stretched text

If you are working on graphics and putting text in it, be careful not to stretch the text too much, because the result is not the best in most cases! Moreover, stretched fonts make it more difficult to read them.


DISTANCE BETWEEN LETTERS

Keeping the right distance between the letters is very important. It is worth paying attention to this, because it allows you to significantly increase the aesthetics of everything you write.

Sometimes what seems nice, catchy and interesting often doesn't go hand in hand with accessibility.
Example modern graphic - the red-blue overlapping text
Author/Copyright holder: Bolden. Copyright terms and licence: Fair Use

Modern text style


Above I paid attention to the most important things related to typography in my opinion.

Now you can go back for the first exercise above to pay attention one more time on the examples. Which of them would like to use?


5. EXAMPLES OF VISUAL DISTORTION

Below, I would like to show you the common visual defects that will help you understand what visually impaired people have to deal with when reading a text. 

TUNNEL VISION

tunnel vision


CENTRAL VISION LOSS

Central vision loss

BLURRED VISION

blurred vision

PLUS DEFECT

plus defect

So, why should we think more about typography while creating text content? 

Because, a lot of users deal with other dysfunctions because of which they can't read a text easily.

If we consider most tips related to typography and think more about our viewers, we can create something accessible for everyone. 

This is what we should be most concerned about, so that our content reaches as many people as possible.

Creating something for people who don’t have any difficulties related to vision or reading is not a big deal... The challenge begins when we want to create something beautiful and aesthetic to the eye but also easily readable

The end


SOURCES

keys-to-accessible-web-typography

designing-accessible-content-typography-font-styling-and-structure

w3.org/TR/WCAG21/

accessibility.digital.gov/visual-design/typography

picture

accessibility.psu.edu/fontsize