5 Things to Avoid When Displaying Text Content on Your Website

Here are five common mistakes that can easily be avoided to make your website a far more enjoyable experience. Even when the reader is not consciously aware of these mistakes, they will almost certainly experience discomfort and frustration at a subconscious level. This will contribute to a negative impression of your website and practice.

1) Poor contrast between font color and background color.

Poor contrast makes it difficult enough for people with perfect eye site to read. For those with less than perfect it’s a major strain.

The WCAG recommends using at least 4.5 to 1 contrast ratio (See https://www.w3.org/WAI/WCAG22/quickref/?versions=2.1)

One of the most common use violations is when text is placed on pictures. The variance in contrast from pictures adds to the difficulty of reading. There are a various techniques for overcoming this including positioning of the text so it always remains on an area of the picture with high contrast. This is not always easy given the dynamic positioning that is part of a responsive design. Another technique is to change the background where the block of text is positioned.

2) Line lengths greater than 90 characters.

Line lengths of 85 characters or less are optimal. After that readability becomes exponentially more difficult with each additional character. Book publishers have known this for centuries. It is surprising how often website developers ignore this. The worst offense is when the line length continues to increase to take the full width of the browser viewport. Today’s wide screens can easily display 150 to 200 characters, making them a laborious chore to read.

3) Use of italic font for long paragraphs or entire bodies of text.

Slanted letters disrupt the natural flow of reading. They are also extremely difficult for people with cognitive impairments, sight issues, or dyslexia.

Use italic judiciously and sparingly. For titles and headings use bold instead of italics.

4) Crowded text (inadequate spacing)

Densely packed text is tiring to the eyes. It is also difficult to scan. Most people initially don’t read text. Instead they passively scan it in an F shaped pattern until something captures their attention. Then, they actively start reading it. Keeping paragraph lengths short and providing lots of white space makes scanning easier. It also helps to group sections and use sub-headings for each of section.

5) Lack of visuals

Let’s face it, plain text is difficult to scan and is boring. Using visuals to break up long text makes it easier to scan, improves comprehension, and makes it more fun.

In summary by eliminating these five common mistakes your website will provide a far more enjoyable experience. This will attract more new clients. It will also lead to higher client satisfaction and retention.