This chapter is from the book
This chapter is from the book
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
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.
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.*
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.
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).
Focusing On: Altering Photos to Assist Legibility
)
The previous spread demonstrated ways of treating and assisting type to safeguard legibility. Here, the focus is on ways of altering photographs to do the same.
Pretty much any designer can benefit from an understanding of basic Photoshop tools and effects. And that’s all that’s been called upon here to keep the headline in the three examples at right clear and readable in spite of the visually active photo they’re sitting over.
New to Photoshop? Two of the first things you should become acquainted with are adjustment layers and layer masks. Adjustment layers are layers that don’t contain images but rather apply effects to whatever sits beneath them (effects that darken, lighten, alter colors, and much more). Apply layer masks to adjustment layers to control exactly where their adjustments show up. The three sets of samples to the right were created using layer masks and show how various adjustment layers affected the original image shown above.
Want some practice working with adjustment layers and layer masks? Try the exercises on the next spread.
)
In this sample, an image-darkening CURVES adjustment layer was applied to the image. A gradated window was created at the bottom of the adjustment layer’s mask to produce the effect shown at top. The headline type is now visible, and otherwise would have been difficult to see against the image’s complex visual content.
Keep in mind that you can also apply these headline-protecting treatments when adding blocks of text to photographs.
)
An opposite strategy was used to handle the look of this image: A lightened area was created at the top of the photo to preserve the legibility of a headline that would have otherwise struggled for clarity.
Photoshop provides a strong set of controls for modifying the effects of adjustment layers and their masks. Each treatment on this spread could have been made either more subtle or more pronounced with only minor changes to their settings.
)
The left side of this image was neither darkened nor lightened. In this case, it’s values were confined to a mid-range of grays using both a CURVES and a HUE/SATURATION adjustment layer. The resulting backdrop-area provides a perfect setting for the placement of a colored headline.
Your Turn To: Mix Type and Background Imagery
This image-plus-type exercise has as much to do with altering photographs as it does with working with type. And why not? Designers regularly find themselves melding photos with type when creating layouts, and image-related skills often need to be applied hand-in-hand with typographic know-how.
Exploring type-over-photo solutions
The instructions for this project are simple. Select a few favorite photos from your personal cache (you do have a sizable personal cache of digital images, right?), open the images in Photoshop, set some type over the top of your images, and then use adjustment layers and their layer masks (mentioned at the start of the previous spread) to protect the legibility of your word(s).
What sort of text could you add to your photos? Take a look at the facing page for ideas.
In addition to adding adjustment layers to support the legibility of your type, also be open to trying out any other Photoshop effects you think might be of help. (You could apply effects directly to your text, too, as talked about on pages 155–157).
If you’re brand new to Photoshop or your experience with this program is limited, this might be a great time to go through a tutorial that covers things like adjustment layers, layer masks, blend modes, and special effects (alternatively just consult the Help menu and figure things out while you work on this project).
Not only will this exercise give you ideas for future client-based jobs, it’ll also stock you with possible solutions the next time you want to create a custom-made card for a friend, a piece of wall-art for your office, or a purely artistic weekend project.
Ideas: How about adding the name of a person, place, or thing to your photo? Or what about adding a favorite passage of text, a brief comment, or a journal-like entry?
)
)
)
)