web typography study guide

Creating Contrast

Coloring type for emphasis is another method commonly used to create visual hierarchy.

However, it is almost impossible to see a color by itself in isolation from its surroundings. Any given color is perceived differently when combined with a range of other colors. Bauhaus master Johannes Itten and one of his students, Joseph Albers, made an in-depth study of color theory and the interaction of colors.

Therefore, to consider a color choice for type, the designer must look at it with its environment. Contrast should be one of the major considerations when choosing colors for typography.

With different colors there is also a hierarchy of emphasis. For instance, yellow stands out more than red on a blue background [fig.1]. Straight black text on a white background can be a little harsh, so many designers experiment with variations of darker grays, such as charcoal gray (#333333). To design something monochromatic, different tints and shades can be used to emulate the effect of type weight [fig.2].

tip  The rule of creating color contrast to enhance hierary and readability is: Create contrast between values, not hues.

    Value is the relative lightness or darkness of a color.

    Hue is the technical term for what people usually describe as the attribute of a color: red, purple, blue, etc.

For instance, a medium-value blue sitting on top of a medium-value red produces some contrast; people can see the difference between the two. But when two colors of similar value are together, it produces color vibration. The line where the blue and the red meet seems to oscillate bewteen the two. It almost feels like the text is pulsing [fig.3].

This technique can be used if the designer's goal is to produce something really vibrant—but it's hard on the eyes, and most people will find it annoying.