You might practice information design every day and not know it. Information design refers to transforming complex, unorganized or unstructured information into meaningful and easily-accessed content. Sound familiar?
Information design is multi-disciplinary. It’s concerned with visual presentation, the structure and organization of content, the accessibility of information and how it is used. When information design is effective, communication is clear, accessible, usable and in our case, capable of being learned. Here are some principles related to paragraph text design that should be useful to instructional designers.
1. Left-justify paragraphs
Left-justifying paragraphs of text is good. Centering paragraphs of text is bad. Skilled readers automatically move their eyes to the same left margin and down one line when reading paragaphs. If the text is centered, the automatic movements of the eye end up at the wrong place. This slows down reading and could interfere with comprehension. Read the paragraph below and see if it slows you down.
A paragraph of centered text is difficult to read.
2. Place text on a quiet background
When the background is noisy, it provides extraneous visual cues that disrupt word perception. If you’re using a background photo, simply place a slightly transparent box of a solid color behind the text. The photo will show through ever so slightly and the text will be easy to read. In the example below, text placed on a solid color is more readable than if it were placed directly over the photograph.
Text on a textured background detracts from readability
Text on a quiet background is easier to read.
3. Avoid underlining words
According to Robin Williams, author of The Non-Designers Type Book, the underline interferes with the letters it is emphasizing. It’s a throwback to typewriters, when there were few options for showing emphasis. According to me, avoid using the underline because readers will think it’s a hyperlink, as in the link to the book above. For emphasis, use bold or italics.
Underline is old school, use bold or italics for emphasis
4. Use high contrast between text and background
Research shows that higher levels of contrast between text and background generally lead to greater readability (Hall et al. 2004). Contrast is the difference between two colors, often perceived in terms of the intensity of a color or its saturation. A color’s saturation has a numeric value, which you can find in both Photoshop (use the HSB palette) and PowerPoint (select the HSL palette). When the text and background colors are of a similar saturation it reduces contrast. In addition, the contrast in brightness or luminance also improves readability.
High contrast improves readability
5. Use dark text on a light background
Studies show that reading dark text on a light background is easier than the reverse (Hall et al. 2004). The eyes won’t tire as easily and it seems to be a preference among readers. Even though dark on light has a high contrast, we need a well-lit background to succeed at reading quickly on the computer screen. Some cases where light on dark can usually work include presentations in a large room, large titles and anywhere the text is brief.
Light on dark reduces readability for most people
6. Limit the range of color values in a gradient text box
It’s hard to know what text color to use when a gradient fill has a wide range of lightness to darkness, also known as a color’s value. When the background changes drastically, the text color might only have a sufficiently high contrast in a part of the text box. On the other hand, a gradient with a limited range of colors has an acceptable level of contrast across the entire text box.
Limit the range of light to dark in a gradient
According to the Information Design Network, “Wherever relatively complex information needs to be made easier to understand, or tailored to the needs of a specific ‘specialist’ or cultural community, the ‘user-oriented’ methods of information design can be employed.” I’d say that eLearning, job aids, participant manuals and other instructional materials can benefit from the best practices of text-based information design.
What are your tips for designing with text?
Related Articles and Resources
Information Design Handbook: Book Review (article on this site)
We Design Information Too (article on this site)
International Institute for Information Design (organization)
Instructional and Information Design Degree Program (university program)
InfoDesign: Understanding by Design (website)
Reference:
Hall, Richard H. and Patrick Hanna, 2004. The impact of web page text-background colour combinations on readability, retention, aesthetics and behavioural intention. Behaviour and Information Technology: 23, 183-185.
Hi Thiagi,
I plan to write an article about typeface. Of course, you have to think about your audience and the content. I think you have more leeway when it comes to large type for headlines and such. As to body text, there is as to whether serif or sans serif is easier to read online. Some research states that serifs lead people through the text more easily. This may be more true for print than web, however.
Connie
Useful tips. I am also curious about your take on different font styles.
Thanks for these useful tips, I wish magazine publishers would take note. With so much new media, I am always on the lookout for ways to communicate effectively.