Chapter 5. Contrast
Contrast is one of the most effective ways to add visual interest to your page and to create an organizational hierarchy among different elements. For contrast to be effective, however, it must be strong. Don’t be a wimp.
The Principle of Contrast states: Contrast various elements of the piece to draw a reader’s eye into the page. If two items are not exactly the same, then make them different. Really different.
Contrast not only serves to draw in the eye, but you can use it to organize information, clarify the hierarchy, guide a reader around the page, and provide a focus.
Contrast can be created in many ways. You can contrast large type with small type; a graceful oldstyle font with a bold sans serif font; a thin line with a thick line; a cool color with a warm color; a smooth texture with a rough texture; a horizontal element (such as a long line of text) with a vertical element (such as a tall, narrow column of text); widely spaced lines with closely packed lines; a small graphic with a large graphic.
But don’t be a wimp. If two elements are sort of different but not really, then you don’t have contrast, you have conflict. You cannot contrast 12-point type with 14-point type. You cannot contrast a half-point rule with a one-point rule. You cannot contrast dark brown with black. Get serious with your contrast!
Are these two the same guy? Are we supposed to see them as different or are we supposed to see them as the same?
If they are not the same, make them very different!
If the two “newsletters” below came across your desk, which one would you pick up first? They both have the same basic layout. They are both nice and neat. They both have the same information on the page. There is really only one difference: The newsletter on the right has more contrast.
typefaces
This is nice and neat, but there is not much that attracts your eyes to it. If eyes are not attracted to a piece, few will read it.
The source of the contrast below is obvious. A stronger, bolder typeface is used in the headlines and subheads. That typeface is repeated (Principle of Repetition, remember?) in the newsletter title. Because the title is now caps/lowercase, we can use a larger and bolder type size, which also helps reinforce the contrast. And because the headlines are so strong now, a dark band can be added across the top behind the title, again repeating the dark color and reinforcing the contrast.
typefaces
Can you feel how your eyes are drawn to this page, rather than to the previous page?
Contrast is crucial to the organization of information—a reader should always be able to glance at a document and instantly understand what’s going on.
typeface
The information is all there in this résumé and it’s pretty clean. If someone really wants to read it, they will—but it certainly doesn’t grab your attention.
And notice these problems:
Job titles are not clearly defined; they blend in with the body text.
The sections themselves are not clearly defined.
There are two alignments on the page: centered and flush left.
The amounts of space between the separate accomplishments are the same as the amount of space between sections.
The setup is inconsistent—sometimes the dates are at the beginning, sometimes at the end. Remember, consistency creates repetition.
Notice that not only is the page more attractive when contrast is used, but the purpose and organization of the document are much clearer. Your résumé is someone’s initial impression of you, so make it strong.
typefaces
The problems are easily corrected.
One alignment: Flush left. As you can see above, using only one alignment doesn’t mean everything is aligned along the same edge—it simply means everything is using the same alignment (all flush left or all flush right or all centered). Both the flush left lines above are very strong and reinforce each other (alignment and repetition).
The heads are strong—you instantly know what this document is and what the key points are (contrast).
Segments are separated by more space than are the individual lines of text (contrast of spatial relationships; proximity).
Degree and job titles are in bold (a repetition of the headline font)—the strong contrast lets you skim the important points.
The easiest way to add interesting contrast is with typefaces (which is the focus of the second half of this book). But don’t forget about rules (drawn lines), colors, spacing between elements, textures, and so on.
If you use a hairline rule between columns, use a strong 2- or 4-point rule when you need another—don’t use a half-point rule and a one-point rule on the same page. If you use a second color for accent, make sure the colors contrast—dark brown or dark blue doesn’t contrast effectively with black text.
There is a bit of contrast between the typefaces and between the rules, but the contrast is wimpy—are the rules supposed to be two different thicknesses? Or is it a mistake?
Now the strong contrast between the typefaces makes the piece more dynamic and eye-catching.
With a stronger contrast between the thicknesses of the rules, there is no risk of someone thinking it’s a mistake.
typefaces
This is simply another option using rules (this thick rule is behind the white type).
With contrast, the entire table is stronger and more sophisticated; it communicates more clearly.
If you use tall, narrow columns in your newsletter, perhaps use a strong headline to create a contrasting horizontal direction across the page.
Combine contrast with repetition, as in the page numbers or headlines or bullets or rules or spatial arrangements, to make a strong, unifying identity throughout an entire publication.
typefaces
In addition to the contrast in the typefaces in this postcard, there is also a contrast between the long, horizontal title and the tall, narrow, vertical columns. The narrow columns are a repetitive element, as well as an example of contrast.
The example below is a typical flyer. The biggest problem is that the lines of text are too long to read comfortably. Also, there is little to draw the reader’s eye into the text.
Design the headline so it will catch someone’s eye. Now that their eyes are on the page, create some contrast in the text so even if they don’t plan to read the whole thing, their eyes will be pulled to certain parts of it as they skim through it. Enhance this with alignments and use of proximity.
typeface
Where do you begin to improve this flyer? At least it’s not centered!
The lines are so long that a reader is automatically put off. When you have lots of text like this, experiment with using more than one column, as shown on the previous and opposite pages.
Pull out key phrases to set in bold so the visual contrasts attract the eye and lead the reader through the information.
Perhaps start off with the introductory bits of information so a reader begins with an understanding of the purpose of the flyer. It’s less of a commitment to read the little pieces, so you can seduce the reader’s eye into the piece by providing an introductory path.
Don’t be afraid to make some items small to create a contrast with the larger items, and don’t be afraid to allow blank space! Once you pull readers in with the focal point, they will read the smaller print if they are interested. If they’re not interested, it won’t matter how big you set it.
Notice all the other principles come into play: proximity, alignment, and repetition. They work together to create the total effect. Rarely will you use just one principle to design any page.
typefaces
We added some ornaments for visual interest and to provide an earthy feeling and add some interest and softness to the title. Since this flyer is to be reproduced on a copy machine on colored paper, we used various shades of gray for those ornaments.
Listen to your eyes as they scan through this document—can you feel how they are drawn to the bold text so you are almost forced to read at least those parts? If you can get people that far into your piece, they are bound to read more.
Contrast is probably the most fun of the design principles—and the most dramatic! A few simple changes can make the difference between an ordinary design and a powerful one.
typefaces
This rack card is a little flat. But it’s nice and clean and the centered alignment works well with the font, spacing, and bullets.
But it doesn’t have enough contrast within itself to compete with other cards in a rack.
Which of these two rack cards would you be most likely to pick out of the stand? This is the power of contrast: it gives you a lot more bang. Just a few simple changes, and the difference is amazing.
typefaces
This was a simple change in contrast. Since rack cards are usually printed on glossy card stock, it is easy to get a nice, rich black.
I lightened the red a little to make it stand out better on the black.
Train your Designer Eye: Name at least six changes that were made to this card. (Suggestions on page 228.)
Contrast, of course, is rarely the only concept that needs to be emphasized, but you’ll often find that if you add contrast, the other concepts seem to fall into place. Your elements of contrast, for instance, can sometimes be used as elements of repetition.
typefaces
This person wants to fill the space and the only way he knows how to do it is with all caps and centered text. There is very little contrast on the page to pull in your eyes, except perhaps the amazing pie.
You can see that this ad needs to have the information organized into logical units (Principle of Proximity).
It also needs to choose an alignment (Principle of Alignment).
It could use a repetitive element, which might be the cute font (Principle of Repetition).
And it needs contrast, which you will have to create.
Where to begin?
Although the ad below looks like a radical leap from the one on the opposite page, it is actually just a methodical application of the four basic principles, one at a time: Group things into logical proximity, use an alignment, find or create repetitive elements, and add contrast.
typefaces
Of course there are many possibilities for this ad. To begin with:
Let go of Times New Roman and Arial/Helvetica. Just eliminate them from your font choices. (Please let go of Sand as well.)
Let go of a centered alignment. I know it’s hard to do, but you must do it for now. Later, you can experiment with it again.
Find the most interesting or most important item on the page, and emphasize it! In this case, the most interesting is the pie and the most important is the name of the shop. Keep the most important things together so a reader doesn’t lose the focus.
Group the information into logical groups. Use space to set items apart or to connect them, not boxes.
Find elements you can repeat (including any elements of contrast).
And most importantly, add contrast.
Work through each concept one at a time. I guarantee you’ll be amazed at what you can create.
Train your Designer Eye: Name at least seven differences between this ad and the one on the previous page. These are the sorts of changes you’ll find yourself making as you try to fit a lot of information into a small space. (Suggestions on page 228.)
The example below is repeated from Chapter 2, where we discussed proximity. It’s nice and clean, but notice how much of a difference a little contrast can make.
Remember this postcard from page 19? It gains a little more strength with a strong left alignment.
typefaces
We gain even more contrast by letting go of the pale purple paper and adding some strong purple on the bright white.
Train your Designer Eye: Name at least five differences between these two cards. (Suggestions are on page 228).
No matter how complex or how simple a well-designed project is, there is probably some form of contrast that attracts your eyes to the page and makes you think someone actually spent the time to design it. Once you feel comfortable with the basic principles, go to the next step of really pushing yourself with ideas. See page 94 for some tips on idea gathering.
typeface
Although there is a lot going on here, it is easy to see the hierarchy of information through the contrast of elements. Plus there is one clearly centered alignment for the type.
typeface
Your eye might be drawn to this card simply because of its modesty. One form of contrast here is the contrast of the small, elegant type in a large field of white.
Summary of contrast
Contrast on a page draws our eyes to it; our eyes like contrast. If you are putting two elements on the page that are not the same (such as two typefaces or two line widths), they cannot be similar—for contrast to be effective, the two elements must be very different.
Contrast is kind of like matching wall paint when you need to cover a ding—you can’t sort of match the color; either you match it exactly or you repaint the entire wall. As my grandfather, an avid horseshoe player, always said, “Almost only counts in horseshoes and hand grenades.”
The basic purpose
Contrast has two purposes, and they’re inextricable from each other. One purpose is to create an interest on the page—if a page is interesting to look at, it is more likely to be read. The other is to aid in the organization of the information. A reader should be able to instantly understand the way the information is organized, the logical flow from one item to another. The contrasting elements should never serve to confuse the reader or to create a focus that is not supposed to be a focus.
How to get it
Add contrast through your typeface choices (see the second half of this book), line thicknesses, colors, shapes, sizes, space, etc. It is easy to find ways to add contrast, and it’s probably the most fun and satisfying way to add visual interest. The important thing is to be strong.
What to avoid
If you’re going to contrast, do it with strength. Avoid contrasting a sort-of-heavy line with a sort-of-heavier line. Avoid contrasting brown text with black headlines. Avoid using two or more typefaces that are similar. If the items are not exactly the same, make them different!