Why Should We Pay Attention to Typography
Introduction
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 have to read a text that requires a lot of effort to differentiate the letters.
Sometimes we have to read a text that is too small in size and with bad contrast.
Sometimes we have to read a 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 provides information that you need to pay attention to in order to create an easy and accessible text content.
EXERCISE
Let’s look at the examples below. Which of them would you consider easy to read? Each of the fonts is the same size.
As you probably know, you can find thousands of different fonts. I imagine 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 following guidelines on making the 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 myself the following 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 blind people
- 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.
2. SIZE & STYLE VS Size & Style
The size of the font should be easy to read. The recommended font size for websites should amount to at least 16 px (12pt) for fonts which are easy to read like sans serif: Arial, Helvetica, Verdana, Tahoma, etc
Some of the fonts above look as if they differed in size, although they are all the same size.
What is important for this size are additional variations, such as 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 a proper font you have to think about:
- How long the text is
- What the structure and style look like (line space, tracking, kerning, alignment, exposing a particular part of the text, dots, etc..)
- How many characters there are in each line
- How often the font is used (well-known fonts are easier to read than a completely new one)
The recommended length of text per 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.
Other examples of different font variations.
3. SANS SERIF & SERIF
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.
Legibility vs readability
Legibility 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.
Insights:
- sans serif fonts provide mirror opposites for letters: p, q, b, d
- for some sans serif fonts, the letters „I” and „l” look the same or almost the same (exceptions are e.g. Verdana, Tahoma)
- serif fonts have unique letter identifiers
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
Logo: Products Sans
Search: Arial Regular
Gmail: Google Sans, Roboto, and Arial
- ZOOM
Fonts: Arial, Helvetica, Lato
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
4. COLOURS
To meet minimum colour requirements of WCAG standards you should follow level AA conformance.
What does it mean?
Remember that 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 are there purely for decoration, aren’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.
PASSED EXAMPLE
FAILED EXAMPLE
PARTIALLY PASSED EXAMPLE
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 that are accessible for everyone we have to remember about colour blind people.
5. 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.
DON’T STRETCH THE FONT
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.
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?
6. 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
CENTRAL VISION LOSS
BLURRED VISION
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.
Sources:
keys-to-accessible-web-typography
designing-accessible-content-typography-font-styling-and-structure
Be a part of
