You can see evidence of the most basic aspects of contrast in any Web page or magazine. The headline text is always different from the body text. It’s often bigger and bolder; it can also be in a different typeface. Headlines make it easy to skip from one story to the next and get a cursory understanding of the news; news writers make it easy for people to read only the headlines in a newspaper or Web site.
Figure 7. Contrast in action. “Cadets” by skeeze is in the Public Domain, CC0.
Contrast is important because the human eye is drawn not necessarily to size, but to difference. When everything looks the same, it’s difficult to focus on any one thing. When something is different, it stands out. Contrast helps draw the reader’s eyes to certain elements in the text, and it also helps the reader follow the flow of the information and assess which items are most important and require immediate attention. Contrast creates readability.
Some documents, like business letters or academic papers, have fewer contrasting elements, but even basic elements such as line spacing and paragraph breaks help indicate where a chunk of related information begins and ends. When a document has few or no contrasting elements, nothing stands out. The document isn’t easy to scan, and it doesn’t invite the reader into the text. It’s harder to parse, making it difficult for readers to glean information easily and quickly, which may be their aim.
The following elements can help you create a friendly, appealing sense of contrast in your documents:
CONTRAST ELEMENT: SIZE
The human eye moves toward things because they’re different, not because they’re large or small. The eye is impressed by novelty more than by size, color, or any other visual characteristic. There are all sorts of scientific theories about why this is so, but in short, it’s not so much that making something bigger makes it more noticeable. A person’s height, for example, isn’t so noticeable until the principle of contrast comes into effect.
Figure 8. The Fierce Five, the US gold medalists in team artistic gymnastics at the 2012 London Olympics, meet President Obama at the White House. They look fierce, but not so small. Starting third from left: Aly Raisman, Gabby Douglas, McKayla Maroney, Kyla Ross, and Jordyn Wieber. “P111512PS-0165” by Obama White House is in the Public Domain.
In the image below, the contrast in height is more apparent, adding to the visual drama.
Figure 9. “Barack Obama with artistic gymnastic McKayla Maroney” by Pete Souza is in the Public Domain. Pictures like these are popular online memes.
There is such a thing as too much size contrast: think of those web sites with huge type or an overly enthusiastic use of the CAPS LOCK key. Still, some size contrast is essential to draw the reader’s eye.
CONTRAST ELEMENT: FONTS
A typeface is a collection of fonts. The distinction between the terms typeface and font stretches back to the days of typesetting: hand-placing individual letters made of wood or metal, inking them, and rolling paper over them. These were called typefaces. Within each typeface, there were a variety of font styles and weights, such as bold or italic, and sizes, identified by point size (12 point, 10 point, and so on). In the digital age, most people use the words typeface and font interchangeably, though the distinction still matters to experts like designers and typographers.
What’s important to most people is that we all have a huge variety of font families to choose from. Times New Roman, Arial, Bookman, Georgia, and Garamond typefaces are familiar to many of us. It’s important to choose a font (a particular size, style, and weight within a typeface) that fits our purpose. Some, like script and handwriting typefaces, are difficult to read and so aren’t appropriate for body text. Some typefaces work well as headlines: Franklin Gothic Condensed and Caslon are two typefaces often used for newspaper headlines.
It’s also important to distinguish between serif and sans-serif fonts. Sans serif fonts, like Helvetica or Futura, are simple and smooth; the letters don’t display the “feet” and ornamentation (serifs) that serif fonts do. Sans serif fonts are often used for headlines, but serif fonts are more likely to be used for body text. Many typographers think serif fonts (also called Roman fonts) make large blocks of body text easier to read. Some of the preference is really just about tradition.
Figure 10. Three common sans serif typefaces (font families). Image Credit: Roger Koslowski, Typefaces-sansserif, CC BY-SA 3.0
As shown in Figure 11, below, typeface families often contain many sizes and styles—light, regular, bold, italic, condensed, lower case letters, upper case letters, small caps, schoolbook, old style, and so on.
Figure 11. Some elements of the Helvetica typeface family.(Public Domain image)
The number of font families and styles within those families is constantly growing, and playing with font styles can be seductive. But technical communication documents are not the place to display your artistic interpretation of meaning by choosing an elaborate and ornate font for a word, sentence, or paragraph. The guiding principle for font selection in technical writing is: keep it simple and easy on the eye.
CONTRAST ELEMENT: DIRECTION OR POSITION
Changing the direction or orientation of text, or using graphic elements like lines, banners, or screens (smaller transparent or opaque boxes, often in a color that contrasts with the background), can draw attention to a particular section of a document or can help create a pattern in a document.
Figure 12. Note the image oriented on the diagonal and the opaque screen against which the text and logo are set. Sharp! “Tucker Torpedo Brochure” by Alden Jewell is licensed under CC BY-SA 2.0
CONTRAST ELEMENT: ALIGNMENT
A change in alignment can create visual interest and add functionality to a document. Most students are familiar with how to align type. MLA and APA style, for example, mandate a centered title and left-aligned body text. MLA Works Cited pages call for a hanging indent of ½ inch. In the case of MLA or APA works cited pages, the indentation also serves a purpose, allowing readers to skim vertically down the left side of the page and more easily locate the last name of authors quoted in the paper.
Too much playing around with alignment can, however, impede ease of reading. Text in reports and other text-heavy documents should almost always be left-aligned. Though it may be tempting to use full justification, which creates an even margin on both the left and right sides of the document, doing so causes awkward spacing between words in each line of text in order to make the right margin appear smooth. This awkward spacing makes the text physically more difficult to read. Unless you are using a sophisticated software application that is capable of virtual typesetting, avoid using full justification in documents. Likewise, while centering text is effective for titles, it is not effective for multiple rows of text within a document. The reader’s eye will be jumping all over the page trying to follow the text flow.
Look what happens when the text of complete sentences
is centered
in an attempt to create emphasis or focus on
a particular couple of sentences or a paragraph. It makes it very difficult
for the eye to follow and read the text.
Use centering for titles, but not for individual paragraphs or more than a single line of text that you wish to draw attention to.
Images are often placed in a particular location on a page (or slide) to draw readers’ attention in one direction or another. Consistent alignment with slight variations to provide interest is particularly important in PowerPoint presentations. As readers progress through the slide deck, if the headlines and text blocks are not aligned identically, the text and headlines will appear to jump around on the screen in a distracting way.
CONTRAST ELEMENT: GRAPHICS
When trying to create contrast—difference—breaking up huge blocks of text with a variety of graphic elements can add visual appeal and interest. But it’s helpful to remember the architectural aphorism “less is more.” Think of all the publications and web sites you’ve seen whose designers thought it was awesome to make text bold AND underlined AND multicolored AND flashing. With a bright yellow background. And lots of animated GIFs.
There are situations, though, where putting a great deal of information into a graphic can provide a clearer picture of a process, even though the image, such as the infographic below in Figure 14, can look crowded. Effective use of color can help clarify the information for readers.
Figure 14: Complicated issues are sometimes hard to express visually. “How Our Laws Are Made” by Mike Wirth and Dr. Suzanne Cooper-Guasco is licensed under CC BY 3.0.
CONTRAST ELEMENT: COLOR
Color contrast can help certain elements stand out and can create a sense of drama. But again, less is more. Avoid using too many colors and make sure color combinations are compatible. Insufficient color contrast between text and background elements makes text difficult to read. Too much color contrast (red text against a black background, for instance) also interferes with text visibility.
The image below uses only four colors, but to great affect.
Figure 13. Less really can be more. “One-Third of a Nation, a Living Newspaper play by the Federal Theatre Project” by https://commons.wikimedia.org/wiki/File:One-Third-of-a-Nation-Poster-2.jpg is in the Public Domain
The artist used other contrast elements, such as font variations, alignment, and negative space to create a striking and effective graphic. The image below also uses only a few colors to accomplish its mission.
Figure 15: Contrasting color in text, images, and design elements. Image Credit: “Credit Card Debt in the US” by GDS Infographics is licensed under CC BY 2.0.
CONTRAST ELEMENT: USE OF NEGATIVE OR “WHITE” SPACE
Sometimes, the best way to use contrast to attract a reader’s attention is to go negative. The absence of content provides air and space and draws the reader’s attention to the content itself. Negative space, or white space, is the space around text, images, and other elements in a document. It makes documents of all kinds (digital and print) simple, readable, and inviting. A large amount of negative space in a document is associated with the minimalist, high-end look that speaks of elegance.
Figure 16: Case in point. High-end. “French laundry carte” by EncMstr is in the Public Domain.
Each of these types of contrast functions to enhance the accessibility and readability of your documents. Use them to your advantage.
