TypeTalk: Mastering Type and Color

4

Next to the actual words themselves, color is one of the most powerful tools in typographic communications. Not only is color used to enhance the overall look and attractiveness of a design, but it can also help create emphasis and hierarchy, establish and reinforce a brand, evoke an emotion, as well as set a specific mood. In many cases, color is what the eye notices first. It can be the element that attracts an audience, whether it be a magazine, advertisement, logo, packaging or product, signage, brochure, poster, greeting card, and a lot more. Specifically, it can enhance the impact of information when used in headlines, subheads, bulleted lists, pull quotes, initial letters, and other typographic elements. For branding, color can create and/or reinforce an identity, as well as impart a feeling of familiarity to its audience.

Color can be used for the actual type, or used in the background to help emphasize the type, which might be black, white, or a color. It can attract and influence a viewer in both overt and subtle ways: color can create visual excitement and variety while drawing the eye to important words, points, or other information you wish to highlight.

The Psychology of Color

What color is used as well as how and where to use it are critical to communicating a particular message. Color can be used to draw attention to important elements, but it can also be used to communicate specific themes and moods. Red, the strongest color in design, is used to indicate power, energy and urgency; blue for a sense of calm, trust and security; green for prosperity, money, healing and environmental themes; pink for love, romance and femininity, and so on. Keep in mind that colors can have different connotations in other cultures, so be sure to do your research when designing for these audiences.

Red is a power color that is best used in moderation for the most effectiveness.

Red is a power color that is best used in moderation for the most effectiveness.

The color green is suggestive of the holidays, and is used for those exact words as well as to emphasize the closing text in this ad.

The color green is suggestive of the holidays, and is used for those exact words as well as to emphasize the closing text in this ad.

While there is not a high degree of contrast between the mustard type and the gray background, there is enough mass in the type to enable it to be easily readable.

While there is not a high degree of contrast between the mustard type and the gray background, there is enough mass in the type to enable it to be easily readable.

The readability of this creative headline treatment is hindered by the lack of enough contrast between the outlined lettering and its background: the orange banner stands out more than the actual words.

The readability of this creative headline treatment is hindered by the lack of enough contrast between the outlined lettering and its background: the orange banner stands out more than the actual words.

Red on blue doesn’t always read well when they are close in value, but this combo works well here due to the light blue background.

Red on blue doesn’t always read well when they are close in value, but this combo works well here due to the light blue background.

Tips for successful use of color

Take these points into consideration whenever using color:

Create strong contrast between text and background for optimum readability. Similar colors or close values of any colors (the degree of lightness or darkness) will make the text and background blend together, reducing contrast and ease of reading.

Less is more. Too many colors or too many instances of color dilute effectiveness by overwhelming the eye with too many highlights. Color is like an accessory: the more ‘bling’, the less direction it gives to the readers as to where to look at first.

Maintain a consistent palette and color usage throughout. This will keep the overall look of the design or project cohesive so the viewer knows it is all part of the same article, campaign, brand, or identity.

Keep in mind that any design should work well before color is applied. Color should be used to enhance an already successful layout and design, not used as a band-aid for a poor or weak composition.

This split color headline treatment is highly readable against a potentially challenging background photograph.

This split color headline treatment is highly readable against a potentially challenging background photograph.

G.Color

Sometimes the best color for a headline that sits atop a busy photograph is black or white, as illustrated on the above two examples.

Sometimes the best color for a headline that sits atop a busy photograph is black or white, as illustrated on the above two examples.

The use of the color burgundy (pun intended?) works well to highlight the headline, as well as to serve as a background banner for the three subheads.

The use of the color burgundy (pun intended?) works well to highlight the headline, as well as to serve as a background banner for the three subheads.

K.Color

Color is a great way to highlight subheads, whether used as a background color (upper), or for the actual type (lower).

Color is a great way to highlight subheads, whether used as a background color (upper), or for the actual type (lower).

N.Color

Color can be used in non-typographic ways to organize or convey information. (Note the color key for the lower image is on the bottom of that page, which is not shown.)

Color can be used in non-typographic ways to organize or convey information. (Note the color key for the lower image is on the bottom of that page, which is not shown.)

Color and Production Issues

For accurate color reproduction with no surprises, observe these guidelines:

  • Make sure to accurately set the color mode, color palettes and swatch books within your software to match the output: print > CMYK and spot color; web and digital reproduction (including presentations) > RGB.
  • When selecting color for print, take into consideration the viewing surface and its reflective or absorption qualities, all of which can affect color, contrast and readability. This includes fabric, glass, metal, foil, ceramic, porous paper, etc.
  • When using color for media other than print (websites, e-readers, smartphones, film, etc.), check the appearance and color contrast on as many devices and delivery mechanisms as possible.
  • Never rely upon how color appears when proofed on low-resolution devices, as they cannot be depended upon for accurate color reproduction. Not only do these printers vary wildly from device to device as well as print to print, but keep in mind if you are designing for print which is CMYK, most desktop printers use RGB, which will always reproduce differently. (Make sure your clients are aware of this, and be sure to include an accurate color swatch when making presentations!)
  • When setting small text in process (CMYK) or RGB color, avoiding using typefaces with hairlines, thin serifs or other fine details that can lose their sharpness and definition when reproduced.

Used well, color is an eye-catching, appealing means to communicate and enhance your message. When choosing color, do it thoughtfully and with careful consideration to how it affects the entire project. The right choice(s) will attract your desired audience, set a mood and direct the viewer to the important information; poor choices can confuse and distract.

When using background color for text, make sure there is enough contrast for it to be readable. The white type on blue on the left works well, but the white type dropped out of lime green to its right is hard to read.

When using background color for text, make sure there is enough contrast for it to be readable. The white type on blue on the left works well, but the white type dropped out of lime green to its right is hard to read.

When dropping small white text out of a dark or black background, make sure the chosen typeface is heavy enough to be readable, especially with the possibility of ink spread. The thin white text in this example is a bit challenging to read, while the heavier type reads more easily.

When dropping small white text out of a dark or black background, make sure the chosen typeface is heavy enough to be readable, especially with the possibility of ink spread. The thin white text in this example is a bit challenging to read, while the heavier type reads more easily.

The black type on dark blue in this book cover is hard to read due to lack of enough contrast, while the type on the white and yellow to its right stands out.

The black type on dark blue in this book cover is hard to read due to lack of enough contrast, while the type on the white and yellow to its right stands out.

Thin headline type needs a background with even color values for optimum readability. The example on the left is harder to read as the image behind it has too many ’stripes’ of different values, while the one on the right works and reads well.

Thin headline type needs a background with even color values for optimum readability. The example on the left is harder to read as the image behind it has too many ’stripes’ of different values, while the one on the right works and reads well.

Type of any color can be hard to read when placed on a busy photograph or image with a wide range of color values.

Type of any color can be hard to read when placed on a busy photograph or image with a wide range of color values.

There is just not enough contrast between the tricked out headline and the background to make it easy to read.

There is just not enough contrast between the tricked out headline and the background to make it easy to read.

On the other hand, this thick, yellow script against a (mostly) darker background can easily be read.

On the other hand, this thick, yellow script against a (mostly) darker background can easily be read.

When a background image is very busy, sometimes the best solution is to place the type on a white or transparent box. Just don't overuse this technique as a crutch for all busy backgrounds.

When a background image is very busy, sometimes the best solution is to place the type on a white or transparent box. Just don’t overuse this technique as a crutch for all busy backgrounds.

Sometimes type works best in ‘plain old’ black and white, emphasized by a colored frame around it.

Sometimes type works best in ‘plain old’ black and white, emphasized by a colored frame around it.

An eye-catching way to add color to a headline is to drop an image out of the type.

An eye-catching way to add color to a headline is to drop an image out of the type.

Ilene Strizver is a noted typographic educator, author, designer and founder of The Type Studio in Westport, Connecticut. Her book, Type Rules! The designer’s guide to professional typography, is now in its 4th edition.
  • Crystal says:

    Why do people keep saying printers use RGB. I ask you, have you ever seen an RGB Sheetfed Press? I’ve been in printing 30 years and we always use CMYK. Please stop telling people printers use RGB. Couldn’t be further from the truth.

    • Desktop printers use RGB, while professional printing uses CMYK (and spot color), as you say. It can be confusing! I did clarify it in the article, so thanks for your comment.

      Ilene Strizver

      • If my memory is correct, desktop printers, including inkjets and laser printers, are called “RGB” printers because the drivers “prefer” to get RGB data and convert it either in-driver or in-printer. That is why they are referred to RGB printers. When using a professional RIP, the RIP bypasses the driver and sends CMYK data directly to the printer.

  • Just a note about color…
    Accessibility guidelines require that color not be used (by itself) to denote information. For example, the menu above showing soup/pasta would not be considered accessible (key or no key). The information must be repeated textually.

    Also, text on top of images or background color should be checked for color blindness distinction and color contrast. Photoshop and Illustrator have an option to view images/text with two of the most common types of color blindness. For color contrast, create a grayscale PDF and visually inspect.

  • >