Join Ina Saltz for an in-depth discussion in this video Creating typographic contrast with font choices, part of Typography: Color Contrast and Scale.
A simple definition of contrast is the degree of difference between one thing and another. In this chapter, we'll look at how creating contrast in your typography can power up your projects. A great way to create contrast is to work with a type face that has a broad family of weights. I love the type family, Vitesse. It has six different weights, more than enough to choose from in order to create strong contrasting for most projects, and because it is a slabbed Seraph you can see that it is not only the bolder weight of the vertical strokes that increases, but it is also the weight of the seraphs that adds to the overall power of the weight shift from light to dark.
Here's an example of how using good typographic contrast can add power to key words in a headline. Yes the heavier weight adds importance to the keywords. But it's the contrast between the keywords and the other words in the lighter weight type that amplifies the meaning of the text. This principle works the same way within body copy as it does with display type. Within the body copy, a shift to a bolder weight highlights the article that is the reference point for this letter from a reader.
In this info-graphic, typographic weight has been used in the white areas to separate the dates, the number of millions, and the m for millions itself. And the headline, "Brew it Yourself Coffee Sales" is more visually dynamic when it is separated into two parts using weight contrast. This iPad app has some nice examples of using bolder typographic weight to liven up content in the layout.
The subhead pops out a few phrases that have active imagery. Feel like a kid again! Improve your health! You'll be amazed where it will take you! These visual breaks within the text help engage the reader. Here, the shift to a heavier or bolder weight highlights the active words starting each sentence. Look how a lively and inviting design can be created using only text.
With a strong shift in weight, you can create some real drama. Give it a try. Use shifts in typographic weight in your font choices and your projects will also be better than fine.
- Creating tonal weight with type
- Selecting and using color
- Creating contrast with size
- Lifting type on complex backgrounds
- Adding drama with typographic scale