Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Typography

  • Print
  • + Share This
This chapter is from the book

Type Against Backdrop

Type is almost always there to be read. Sure, there are times when words or characters are set on a page purely as a visual backdrop or as peripheral matter, but those cases are relatively rare. The rest of the time, type needs to be presented clearly and legibly.

Which brings us to the topic of type-over-backdrop. Few things can interfere with the legibility of an other-wise perfectly readable headline or block of text than a visually competing background color, image, or pattern. It’s very important, then, that you take whatever steps are needed to maintain the legibility of the type you set over a backdrop of any kind.

The good news here is that while digital media makes it easier than ever to place text over potentially troublesome colors, images, and patterns, it also provides designers with tools to solve just about any readability issue that comes up.

When discussing strategies for type legibility, it’s important that you fully understand the meaning of the term value as it relates to art and design. Value is how light or dark a color or a shade of gray is. A deep burgundy has a dark value. A pale blue has a light value. And the key to maintaining the readability of type that’s set over a backdrop is to make sure that there are strong differences between the value of the type and the value of the backdrop.

This is relatively easy to manage when you’re simply setting type over a single-color background. You just have to make sure your type is clearly darker or lighter than the color it’s sitting over.

Things get more complicated when type is set over a visually active backdrop—like a photo or a pattern—since the values in these backdrops can vary widely and abruptly. Stay tuned for more advice on handling backdrops such as these as the chapter continues.

The legibility factor

Just watch as the legibility of the text above rises, falls—and sometimes disappears completely—as it travels from backdrop to backdrop.

Except in the case of the white text, anyway: The white letters maintain their readability as they pass over the busy photograph because of a subtle and value-darkening drop shadow applied between them and the image (see pages 156–157 for more legibility-preserving techniques like this).

Never settle for almost when it comes to legibility. Always seek solutions that positively ensure that the text you set over a backdrop color, image, or pattern stands out clearly.

Solid backdrops

04fig25.jpg

Some designers are prone to feel lost when struggling with type-over-backdrop legibility issues. If you feel like you may be one of these designers, turn to this spread the next time you’re having trouble: Each of its logos (except for one) presents its type legibly and each has a lesson to offer.

First of all, a reminder: Value is critical (as mentioned on page 152). In the upper sample, dark type and a white line and tittle show up clearly against the mid-value gray backdrop over which they sit.

The lower example works simply by featuring type, line, and tittle that are clearly lighter than their dark gray backdrop.

04fig26.jpg

Get used to seeing value difference whether you’re looking at shades of gray or at colors. Painters have a saying: A color can’t be right if its value is wrong. This is true, always. No exceptions. So take this advice to heart whether you’re applying colors to a landscape painting or to a logo design.*

04fig27.jpg

Maintaining value differences is all the more important when backdrops become more complex, since they may also become more disruptive to type that sits on top of them.

The upper sample is a failure. Why? Because the blue and yellow in the background are so different in value that neither black nor white, nor any shade between, can simultaneously stand out against both colors. As a result, this logo’s lower type runs into serious legibility issues.

This problem is solved in the lower sample—not by altering the colors of the type but by lessening the differences in value between its backdrop’s colors.

04fig28.jpg

Which isn’t to say that there’s no way to use the backdrop that failed so miserably in the previous column. At top is a solution where a dark halo was added around the white type, and the logo’s line and tittle were changed from black to a light and bright yellow.

And what about adding a translucent layer of white between a busy backdrop and the text it holds? If all else fails—or if you’re simply a fan of this look—then this might be the solution you’re looking for when dealing with a busy backdrop.

Type over imagery

Here are ways of placing readable text over a visually active backdrop (an image, in this case). For starters—as shown in this column, and picking up where the previous page left off—you could put a translucent white (or lightly colored) panel between your text and its backdrop image.

The yellow header at the top of this page demonstrates how making type extra-large is another way of maintaining legibility. The mid-value yellow used to color this type would hardly help small text stand out against this spread’s photographic backdrop, but the hue succeeds here through a combination of its brightness and the image-spanning size of the type it fills.

You can use black—and dark colors—to create legibility-protecting panels for reversed type. Panels such as these can be presented as solids or as translucent shades.

Be opportunistic, too, when looking for ways to set type over busy background images. See the line of white type at the upper left corner of this page? Notice how the type is positioned just above some mountain tops before threading its way through a convenient gap in the clouds? This is no accident: The background image was placed in just such a way as to allow things to work out like this (and, in all honesty, Photoshop was used to remove one small cloud that originally stood in the way of the type’s path).

  • + Share This
  • 🔖 Save To Your Account