Treat Your Text Well! Do’s and Don’ts of Text Treatment


The way text is formatted can measurably influence productivity and user satisfaction.

We work with modern software through so called GUIs – graphical user interfaces. And yet, most information being displayed on the screen is text-based. The way text is formatted can measurably influence productivity and user satisfaction. While most software ergonomic rules are eternally true, there is at least one that has changed in the last 10 years.

This article presents the most important do’s and don’ts of text treatment.

Readability and Legibility

But before we get started, it is helpful to make the distinction between readability and legibility:

Readability

The ease with which written text can be read and understood. For example, do readers understand a certain paragraph?

Legibility

The ease with which characters (and in consequence words) can be recognized and distinguished. For example, do readers recognize a “t” for a “t”?

Accordingly, legibility is one of the drivers of readability. In the following you’ll see rules relating to both of these concepts.

Related Article: Are UX and CX One and the Same?

Text Size

An old rule states that this is the single most effective variable to increase usability. We can only perceive visual cues that extend 1 minute of arc, which corresponds to a 1/60 degree viewing angle or roughly half a pixel on a standard computer monitor. The International Standards Organization states:

“Character heights of 20 to 22 minutes of arc are preferred for the most tasks. The minimum character height shall be 16 minutes of arc.” ISO 9241-303

That minimum translates to an upper-case character height of 2.33 mm (0.092 in). The challenge is that the physical size of text on a computer screen depends on many factors including the screen resolution. To simplify the matter, the Web Content Accessibility Guidelines (WCAG 2.1) calls for the ability of users to resize text up to 200% and otherwise considers 14 points as a normal and 18 points as a large font size.

Color Contrast 

Without sufficient contrast between text and its background, it can be hard to decipher letters and words. The Web Content Accessibility Guidelines (WCAG 2.1) require a contrast ratio of 4.5:1 for normally sized text (generally 14 points) and 3:1 for large fonts (at least 18 points or 14 points bold). The contrast ratio is based on the relative luminance (brightness normalized from 0 to 1) of the text and background colors.

Display Polarity

Whereas the previous paragraph talked about the contrast level between text and background, display polarity refers to whether dark text is shown on a light background (“positive polarity”) or vice versa (“negative polarity”).

ISO standard 9241-303 states that “for most tasks, positive polarity is preferable.” The reasons are that dark text on a light background:

  • Avoids the need for bright-to-dark adaptation for the eyes when users in a light office environment look away from the screen and then back. Dark adoption takes much longer than light adoption.
  • Causes less eye strain.
  • Improves legibility, owing to better recognition of characters at the same contrast, especially for older people.
  • Shows less reflections on the screen from lamps or windows.

Related Article: Usability Testing: 7 Metrics to Assess Ease of Use

Font Type

The many fonts we have available can be categorized into serif and sans-serif fonts. Serifs are the little strokes at the ends of letters.

picture 2 font type

These little “feet” improve legibility in continuous text because they help to structure and discriminate characters. This is based on experimental findings showing that the endings of a character are the most important properties to identify a letter. Classic software ergonomics said that sans-serif fonts are preferred on screens, because due to lower screen resolutions (compared to print) serif fonts look fuzzier, especially at small sizes. With the emergence of retina displays about 10 years ago, this rule has changed. It is one of the very few software ergonomic rules that has been revised. Retina displays exceed the resolution power of our eyes, so the serifs can be shown crisp even in small text.

Letter Case

We can write words and sentences in lowercase, uppercase, or mixed case.

picture 3 letter case

Most human factors specialists say that mixed case text is preferable and yields the highest reading speeds for the following reasons:

  • The upper and lower extensions of lowercase letters (ascenders like in b, f, h, and descenders like in g, j, p) create the shape typical for a specific word and therefore boost legibility.
  • Additionally, mixed case helps to understand the sentence structure as uppercase is used in the first letter of names or at the beginning of a sentence.

There are opposing findings, however. IN EXPERIMENTS IT WAS SHOWN THAT DUE TO ITS SIZE UPPERCASE IS MORE LEGIBLE IN TERMS OF READING SPEED THAN THE OTHER CASE STYLES, ESPECIALLY FOR VISUALLY-IMPAIRED PEOPLE.

I personally am in the mixed-case camp and believe that for people with normal vision all uppercase like shown above is harder to read than mixed-case. In fact, New York City in 2010 spent $28 million to exchange their 250,000 street signs from all uppercase to mixed case.

Text Orientation

Most texts we see on computer screens (as well as in print media, billboards, etc.) is horizontally oriented. Sometimes we see rotated text, e.g. chart labels that have been rotated at a 45 degree angle, or 90 degree rotated labels on vertical sliders. Rarely we see a marquee-style text orientation where the letters are below each other.

picture 4 text orientation

According to scientific studies and ISO standard 9241-143, horizontal text should be used as it provides the highest reading speed. While there is no difference between right or left-rotated text, marquee-style provides the worst performance and should be avoided. There is also another reason why marquee-style is sub-optimal: it consumes more real estate than the other orientation variants. On screens with high information densities this is a disadvantage.

Text Alignment

In continuous text such as in paragraphs, text should be left-aligned (also called “ragged right”). This supports the reading direction we are using in the western world. In cultures where you read from right to left, the text should be right-aligned. Justified text that creates clean edges on both sides is not recommendable because it creates white spaces that create the visual impression of vertical rivers (shown in blue below) that are distracting.

picture 5 text alignment

When text is used in forms, the following rules from ISO standard 9241-143 apply:



Source link

We will be happy to hear your thoughts

Leave a reply

Logo
Reset Password
Shopping cart