The Art of Logo. Part II: Your Tools. Contrast | WebReference

The Art of Logo. Part II: Your Tools. Contrast

 
  Contrast
 
 

Proportions are mostly about sizes; contrast is (by contrast :-) about nearly anything.  You can't name a thing that could not be contrasted to some other thing based on any of its aspects: color, size, shape, font, texture, etc.  Contrast is an immensely powerful concept, probably the most powerful among the design tools.  Once you start analyzing, you will be surprised by the number of compositions where contrast is responsible for the overall arresting impression.

At first sight, contrast may seem to you a pretty simple, probably even primitive, concept.  You may even consider it a "binary" characteristic---i.e., either there is an outspoken contrast in the composition or there is none.  In reality, however, contrast relations represent a continuum with the infinity of intermediate "shades," or levels, of contrast.  One of the most important design skills is to choose the level of contrast that's necessary for your case.

  

[Fig.5]
Fig. 5  An example of purest possible contrast
When it comes to practice, this recommendation reveals what may be considered a paradox.  It turns out that contrast is the strongest when only one aspect is opposed in contrasting objects---only their size, or shape, or color, whereas all other aspects are equal or similar.  For instance, the two squares on Fig. 5 have contrasting colors, but their shape and size are the same.  This is the sort of "pure," amplified contrast which is recognized as such by everybody who knows the very word "contrast."  For a designer, however, this sort of contrast is too straightforward and even boring to be useful.  

 Thus, the first thing that you should do is to "soften" the contrast relation by opposing multiple aspects of objects.  Often the best approach is to have nearly all characteristics contrasted, leaving just a few common traits which will serve as a bridge between the members of a contrasting pair.  This is important, however, to have some features left in common, or the contrasting pair will be broken into separate unconnected objects and any contrast will be lost.  It's an excellent exercise for a designer to investigate contrast relations and to practice adjusting the level of contrast at wish.
[Fig.6]
Fig. 6  Now contrast in color is accompanied by contrast in size

[Fig.7]
Fig. 7  One more aspect: contrast in position (inside vs. outside)
Let's see how this works.  Imagine we've started from the arrangement of Fig. 5 and would like to weaken the contrast and make it more pleasing for the eye.  The first step is to accompany contrast in color by contrast in size (Fig. 6).  This looks better, but the composition still looks rather artificial.  We should add one more contrasting aspect, and this one may be a bit surprising to you---it's the position of the objects.  Indeed, on Fig. 6 both squares stand on the same horizontal level---they are "on equal terms" regarding their position.  But the move illustrated by Fig. 7 introduces another contrasting aspect: now one square is inside while the other is outside.  This certainly does well for the thing, looks like it starts to breathe!  

 We can make one more step in the same direction.  It may be argued, however, whether changing the inner square to its opposite, a disk, serves to further enhance the contrast or weakens it instead below the acceptable level.  But as we don't yet have anything except these two objects, we can go on and destroy one more tie between them without the fear of irrevocably breaking them apart.  The result might become a visual for an interesting logo composition (Fig. 8) provided that you keep the reserved approach and do not overencumber it with distracting details.
[Fig.8]
Fig. 8  A contrast-packed logo

[Fig.9]
Fig. 9  Contrasting background and foreground
Another real-world example is presented on Fig. 9.  Note how the two text layers, both containing the letters "RWC," are opposed: The background is big, faded, and blurred, while the foreground is less in size, dark, and crisp; in the background, the letter W is raised while in the foreground it's lowered; finally, the background letters are lowercase while the foreground are uppercase.  Such a consistent contrasting helps to establish a tense dynamic interrelation within the composition.  

 Now let's find out how the contrast can be expressed in various materials (from those we discussed in Part I).  In the realm of form, one may count such contradistinctions as big vs. small, horizontal vs. vertical, rectangular vs. circular; the multitude of choices is almost unlimited.  With colors, we can oppose hue, saturation, or brightness; among these, contrasting brightness is the most natural choice for the reasons I've explained in Part I.  

 Probably the most tricky business is contrasting fonts.  The widely known opposition of serif vs. sans serif fonts is of little help, since these two varieties of fonts are simply too different, not contrasting, and it's extremely difficult to create a balanced logo containing both serif and sans serif letters (although they can work happily together in a bigger composition such as an entire page, e.g. used for contrasting headings and body text).  For the same reasons, marrying all-lowercase and all-uppercase styles in one logo is not recommended.  Probably the only meaningful opposition that can be made with fonts is the contrast of different styles within one font family, such as normal, italics, and bold (an example of contrasting extra-bold and extra-light font varieties is shown on Fig. 10).
[Fig.10]
Fig. 10  Contrasting font styles

 Lastly, with finishes contrast is not frequently used.  A good logo must tolerate having all its finishes removed without much damage; this contradicts the function of contrast which often lies in the foundation of the entire design and thus cannot be sacrificed freely.  You can, however, decorate a contrast already expressed in form or color by applying contrasting textures (e.g. polished vs. rough or raised with a drop shadow vs. flat).  


Created: Feb. 21, 1997
Revised: Feb. 22, 1997

URL: https://www.webreference.com/dlab/9702/contrast.html