Fonts, sizes and colours
[Narrator:] The font you select influences the readability of your printed and digital communications. Some fonts are easier to read than others. This is particularly important for users with a visual impairment or a learning disability such as dyslexia. You need to check how perceivable the single characters are. Is it easy to distinguish between the different letter shapes?
If the characters are large enough. Letters that are displayed too small cannot be read easily.
If there is enough space between the characters. Letters that are written too close to each other are difficult to recognise.
If the colour contrast is sufficient. This is also important for people with colour vision deficiencies, such as colour blindness.
So let's start to learn more about fonts from the point of view of accessibility. Fonts are categorised into families based on their characteristics.
Serif / sans-serif fonts
There are two major categories of fonts: serif and sans-serif fonts. A serif is a small line or stroke regularly attached to the end of a larger stroke in a letter or symbol. Let's look at a few examples.
Notice how these characters have a small decorative line at the end of their lines. This decoration is called a serif. Typical serif fonts are Times New Roman and Georgia. In contrast to this, sans-serif fonts have plain endings.
Some people find it difficult to read serif fonts because they distract the eyes and the brain from the overall shape of the letter. The use of serif fonts in digital publications can be problematic as the pixilation on screen can distort the serif, causing the word to blur around the edges. So, in general, sans-serif fonts are easier to read on screen, but not every sans-serif font has the same level of legibility.
Let’s have a look at the following example displayed using a Gill Sans font. Gill Sans is sans-serif, so it should be easy to read. As you can see in the example of the text '1 Illustration', the number 1, the uppercase i and the lowercase l all use the same shape for different characters. Let’s compare this to the same word using the font Verdana. Now the single characters are much easier to distinguish.
Cursive fonts
Cursive fonts resemble handwritten pen or brush strokes. They use artistic ornamentation and sometimes have strokes that connect the letters together. Because cursive fonts are generally more difficult to read, they are usually a poor choice in terms of usability or accessibility. Try to avoid them if possible.
Fantasy fonts
Fantasy fonts are primarily decorative and are not designed to be used as the main font for long texts. They vary considerably in their appearance and artistic content. Let’s have a look at some of them. As you can see, they are funny to look at, but you might not want to read a longer text using one of these fonts. Fantasy fonts are generally a poor choice for content in terms of readability.
Monospace fonts
Characters in monospace fonts always use the same width. Even characters that might seem to require different widths, such as an uppercase W and a lowercase i occupy the same width.
Common monospace fonts are Courier and Courier New. These fonts have the appearance of old typewriter font faces and are commonly used to display program code, HTML markup and other technical content. Even though they are easy to read, monospaced texts require more space and do not look very attractive.
Symbol fonts
Symbol fonts offer graphics in the form of a font file. They are not used for text. Some of the most popular symbol fonts are the Emoji characters, which are used to express the mood of an author.
Please note that, as symbol fonts present graphics, they need alternative text to be readable by users with visual impairments.
Number of fonts
Using too many different fonts can create a confusing visual layout, which is bad for all users, but may be especially difficult for users with reading disorders, learning disabilities or attention deficit disorders.
As you can see in the example, the different fonts are fighting for attention. Typically, different fonts are used to express different functionalities, for example a heading or a comment.
If you use different fonts without clear rules on when to use them, users can get confused. In general, limit the number of font families to a maximum of two or three, and stick to the same ones throughout the entire document or website.
Font size
Font size obviously influences the readability of a text. Make sure that the default font sizes are not too small. Small fonts may be illegible for some audiences.
It is very difficult to offer a precise recommendation, as the real font size depends on the size of the display, its resolution and the type of font. A more design-oriented font may be difficult to read using a small font size, whereas a monospaced font would be easy to read using that same font size. Depending on the type of media, different font sizes might be appropriate.
Here are some rules for the web. For traditional computer monitors, a font size of 12 to 14 points or pixels are generally recommended for the body of text. This might need to be adapted depending on your audience. If you are addressing elderly people or people with visual impairments, you will need to increase the font size.
The Web Content Accessibility
Guidelines, WCAG for short, recommend ensuring that text can be zoomed to 200% without damaging the layout.
Typographical layout
Paragraphs should be easily distinguishable from each other. By default, in most browsers, paragraphs are separated with white space above and below. When reading longer texts on screen, users have to scroll up and down within a page. When paragraphs are located too close to each other, readers can easily lose their place.
Here is a text that demonstrates how having white space between paragraphs help to distinguish between them better than if paragraphs are separated only by an indented first line.
Let’s look at another example of how space can improve text reading. In this example, the text is located too close to a graphic, which makes it unnecessarily difficult to recognise the characters starting a line. When we increase the spacing, the situation changes. We can easily detect the beginning of a line and the character with which it begins.
In general, documents with white space around text blocks are easier to read than documents in which the text blocks are located close to the document border or another text block. Extra space around the text provides a cleaner layout and helps the reader to focus on the text.
Colour contrast
Text is much easier to read when there is sufficient contrast between the text and the background. In the example, you can see how different colour contrasts influence the readability of text. Some quick advice: Always use the highest possible contrast.
Black text on a white background is the standard for both print and web. However, this combination is not ideal for all users. Users with very low vision can set the background to black and the text to white or yellow.
You can see examples of this for the different operating systems in the Assistive technology chapters. Some operating systems offer a dark mode for all users, which allows them to use a dark background by default.
The WCAG define contrast as a measure of the difference in perceived brightness between two colours. The lowest possible ratio is 1 to 1, for example a white text on a white background. The highest possible ratio is 21 to 1, for example black text on a white background. If the text and background colours are inverted, the contrast ratio remains the same. Here are some example values for colours on a white background.
The WCAG define the conformance level AA as a contrast of at least 4.5 to 1 for normal text and 3 to 1 for large text and graphics. This is a very technical description. Let’s see a more practical approach to test this.
We are using the Colour Contrast Analyzer. This software is available for free for macOS and Windows. You can find the download link below the video. Once the software is started, we can use the colour pickers to set the text and background colours of our document. The resulting colour-contrast ratio will appear in the application window. In this case, we have a ratio of 2 to 1. The WCAG results show us whether this ratio is sufficient for different conformance levels of the WCAG. In our example, the colour contrast would not pass any of the WCAG criteria.
Let's test another one. Here we have a ratio of just below 4.5 to 1. This would pass the contrast criteria of level AA for large text or non-text elements, but not for level AAA or regular text elements. This is a very easy way to check, isn’t it?
Avoid colour as information
As people with colour vision deficiencies cannot recognise one or more colours, they should be avoided as the only means to convey information.
Let’s assume you have a to-do list. Every item on your list is marked with a green or red circle. A green marker indicates a completed task, a red one indicates a task to be done. A user with red/green colour vision deficiency will just see grey markers.
The colour is the only information communicating the difference. If we add a form factor to the markers, e.g., a green checkmark and a red cross, then the meaning can be understood via the symbols even without the colour information.
A tip: If you want to make sure that your document or app does not only depend on colour information, switch your monitor to greyscale. For more information, see the colour section in the Assistive technology chapters of the single operating systems.
Colour checking
There are many tools to support you when testing colours. As an example, we are using Color Oracle, which is a free colour blindness simulator for Windows and macOS.
It helps you design for people with common colour vision impairments by showing in real time what they will see. You can find the download link below the video.
Let’s test this with our example of a to-do list. You can see how the colour vanishes.
Where to continue?
In this chapter you have learned what influence fonts, sizes and colours have on the accessibility of your digital publications. Depending on your personal interests, you could continue with one of the following chapters:
- Alternative text
- Text transcripts, captions and sign language
- Plain language
[Automated voice:] Accessibility. For more information visit: op.europa.eu/en/web/accessibility.