Blog

One element that is often overlooked when optimizing websites is the formatting of the text. The importance of this component, however, is clearly related to a childishly simple principle: if visitors are unable or unwilling to read a piece of text, your message won’t be conveyed and will certainly not convert visitors.

In this article, we therefore set out how you can increase your online conversions by thinking about six principles relating to the fonts and legibility of the text on your website.

# 1 Font face

The University of Michigan has studied the use of different fonts. This showed that a command written in a legible font was considered easier than one in a difficult to read font. Another result was that people saw the difficult to read assignments as something that would cost more time than the legible assignments. Furthermore, numerous studies have shown that people exhibit certain behaviors faster when they require less effort. It also turns out that using a legible font may contribute to the extent in which websites are able to convince and seduce visitors to take action (such as buying a product or service).

With or without serifs

Serif fonts are characterized by the absence of thin horizontal strokes at the end of the letter. Serif fonts on the other hand do have those strokes (colored red in the picture). The function of these transverse bars was to guide the eyes between the successive letters. While there have been numerous studies on the difference in legibility between serif and sans serif fonts (both analogue and the web) over the past century they show no clear distinction. Although the general opinion seems to be that on the web sans-serif should be used, this opinion doesn’t seem to be based on thorough examination. For this reason, it is also not yet possible to give a well-founded best practice. The best advice here is therefore to see if the choice for a particular font increases or decreases conversion for your website.

# 2 Font Size

In addition to the selected font the font size that is used is of great importance for the readability. In the famous article “16 Pixels For Body Copy. Anything Less Is A Costly Mistake” it is stated that each site should use a font size of 16 pixels of greater for the body text. This statement is supported by statistics such as that only about fifty percent of the light gets through the retina of a 40-year old compared to a 20-year old. With 60-year olds, this is further reduced to about twenty percent. This means that the older a visitor to your website is, the more difficulty they will have to read the (small) letters that are on it. As previously stated: A text that visitors are unable or unwillingly to read is very unlikely to convert them . Take this into account when choosing the font size for your website.

Visual impairment

Data from the World Health Organization shows that approximately 3-5 % of people worldwide are visually impaired. These people tend to have more even difficulty (or won’t be able at all) to read small text on a website.

Mobile devices

“In 2014 more people worldwide will surf the internet with a mobile device than people with a desktop computer”Research by Forrester Research shows that in 2014 more people worldwide will surf the internet with a mobile device than people with a desktop computer. Because of this stormy rise of mobile devices, it’s more important than every to think about the font size of your website. By using techniques such as media queries you can dynamically adjust the font size of your website based on the available screen width. When this technique is applied to the entire website, a responsive website can be built that also takes in account for example the size of headings and the number of words per line. When mobile users are presented with the desktop website, they will be forced to zoom in on the text to read it. With this additional action, visitors will soon lose the overview of the website. Thoughts such as “Was that ‘Order now’ button on the left-hand side or the right-hand side of the website” are detrimental to the conversion rate of a website.

# 3 Contrast

The contrast of the text refers to the difference in darkness between the text and the background. Earlier designers loved to put white text on light gray background, or in extreme cases, red text on a green background. Although these times may largely belong to the past, it won’t hurt anyone to emphasize that a good contrast between the text and the background is very important for readability (and thus the possibility of a conversion).

100% Easy-2-Read

In the so-called ‘100% Easy-2-Read Standard’ the experts of Information Architects say that a good contrast is of great importance, but also that a too big contrast (black on white) is not recommended. They provide a benchmark ‘#333 on #fff’, representing a dark gray (as opposed to deep black) on a white background.

#4 length

In addition to factors previously mentioned like font, font size and contrast, there is a lesser-known factor that also contributes to the readability of a text, namely the line length. This factor refers to the number of characters (or sometimes words) each horizontal line contains. There are two potential problems related to the line length, namely too long lines or too short line. With long lines the eyes must travel a great distance to the left of the screen after completing a line, which takes a lot of mental effort. With too short lines on the other hands, the flow from reading a piece of well-formed text disappears.

Rule of thumb

As a rule of thumb one should use 50-75 characters (including spaces) per line. This rule of thumb is proposed by usability institute Baymard. Remember when determining the appropriate line length of course that there are now hundreds of different screen sizes, all of which have their own optimal line length. Using the media queries mentioned above could be a great solution for this issue. To determine the optimal line length (and text size and line spacing) for each screen, the Golden Ratio Typography Calculator can be used.

# 5 Section length

“One should first explain a complex idea in a short introductory paragraph”As the second to last point we will discuss the structure of paragraphs. In an article on how to contribute to an increased conversion ‘The Content Marketing Institute’ suggests that optimal paragraph counts 4 to 5 line heights. This advice is given to avoid long paragraphs that are frightening to look at. It is stated that if the text should be in one paragraph, one should first explain a complex idea in a short introductory paragraph, which is then followed by other sections in which the concept is further explored.

Distance between paragraphs

Keep in mind that a suitable distance between sections should also be present. As a rule of thumb the distance from the end of one paragraph and the start of another one should be big enough to notice, but also small enough to keep the text as a whole. If you look at the page from a distance (where you can’t read the actual text) you should still be able to identify which parts belong together. If the sections appear to be separate entities of their own, the distance is too large.

# 6 Scannability

In addition to the readability of the text, the scannability is also important. The primary reason for this is that research by the Nielsen Norman Group shows that Internet users read only 20-28 % of the text on a website. Different elements of a Web site can contribute to increased legibility.

Headings

Make sure the main heading of the text (usually the title) gives a clear picture of the content of the text. Because the title will be the first indication of the content of the text, it should pull the visitor in and encourage them to read the text.

Sub-headings

In addition to a main heading should be sub-headings should also be used. These headings (which are scaled based on the relative importance) should be placed over each new paragraph. This way, visitors don’t have to read the entire paragraph in order to know what it is about. Good sub-headings will allow visitors to scan a text to see if it contains the information they’re looking for.

Lists

• Quick overview of existing information
• Clear structure
• Shown without unnecessary words

Bold and skewed printed

By using words or phrases printed in bold or italics, these components can easily be identified, which increases the scannability of the text considerably. Please note that this should be used sparingly. Also be sure to avoid using underlined text, because visitors associate this with a link.

Conclusion

The above six factors will improve the readability and reliability of the text on a website significantly. Given that a visitor who cannot or won’t read a text probably won’t convert as well, it is important to take this into account. In summary, this comes down to:

• Choosing a legible font
• With legible font size
• Sufficient contrast
• The right length of lines
• Distinct sections

Which values are optimal for your website can only be determined by testing.

---

Dutch translation: Impact van Lettertypes en Leesbaarheid op Conversie

---