Week 11 Page 3: Using Contrast for Creative Typography

Contrasting Type

You can really spice up your pages by handling type creatively. This doesn't mean that every word on the page has to be in a different fancy font.

• Contrast works better when used selectively.
• Using multiple contrasting fonts (3 or more) creates conflict not contrast.
• Stick to no more than 2 fonts per design (3 if it's an absolute necessity).
• Reserve the creativity for certain elements that you really want to stand out, e.g. headings, top banners etc.

Contrast is the primary method of creating dynamic and interesting type. Look at the examples of contrasting type in the slide image above. Why do the ones on the left appear stronger and more dynamic than those on the right? The colors are the same, but notice the way the type is handled.

In the examples above, the word "dynamic" is much better communicated by the angled script typeface than the static centered type. The headline on the bottom left is more interesting but less legible. If interest is a higher design priority than legibility then use the fancy typeface!

In the slide below, look at the examples of type contrasts. Some are very dynamic, others are more subtle.

Type Contrast Example #1:

Can you see type contrasts being used in this site? Why not make a list of all the ways in which the designer used contrast to convey the meaning and mood? Which words did the designer choose to emphasize and why?

Type Contrast Example #2:

The type contrasts are more subtle at this site but they help the reader interpret the content more efficiently (large white capitals for headings, smaller blue capitals for subheadings, and black smaller type for text). The contrast is applied consistently to the content to create a predictable hierarchy.

Think about experimenting with contrasts in lowercase/capitals, regular/italic or letter spacing (not just color, font and size):

• http://www.jibevisuals.com/ Links to an external site. (Archived Version)