Drop (the) Shadows

Drop shadows. They’re a very common element in the world of graphic design. And they’re very easy to implement, from the high-level design packages to software for beginners. As a result they get used a lot. The reasoning goes something like this:

“I need to typeset a headline. There we go. I sure did pick a nice font. But it’s not special enough. It’s not eye catching. What can I do to give it some oomph? I know, I’ll add a drop shadow! There we go. Now my headline pops and my layout looks designed.”

Look, I’ve used drop shadows countless times throughout my career as a designer. I still use them (with restraint) today. But I’ve found two things to be true of drop shadows. First, their use often makes the text less readable. And second, their use is often “necessary” due to a poor layout. The more experienced I get at design, the more I shun the shadow.

Drop shadows can make text less readable

Readability boils down to two main factors: spacing and contrast. And it’s contrast that comes into play with drop shadows. A quick fact to remember about contrast. You cannot have more contrast than black on white or white on black. What about black type on top of hot pink? Nope. Pink is closer to black than white is, therefore there’s less contrast. How about white type on top of a deep blue background? Again, blue is closer to white than black is, so black provides more contrast.

An everyday problem designers face is placing text on top of a color that has a value close to 50% gray. Take the color orange for example. If you were to convert a deep orange to grayscale, you would end up with close to 50% gray. When it comes to contrast, you need to think of colors in terms of their value. Ask yourself, “If this color was converted to grayscale, what percentage of gray would it be?” If you put olive green text on top of an orange background, the text will only be discernable due to differences in hue. The values are almost equal and the contrast is close to nonexistent.

So back to the initial problem. You have to add contrasting text atop an orange background. You’re left with only half of the value scale to work with: the top half or the bottom half. In order to maximize your contrast, your text should be either 100% white or 100% black. Either solution will be fine and perfectly acceptable, though neither will have tons of contrast.

Now let’s introduce drop shadows into the scenario. Will the white text or the black text benefit from a black drop shadow? Naturally, the white will. Remember earlier I stated that the maximum contrast comes from white and black being used together. By adding a dark drop shadow, your white text is now partially surrounded by black or at least a darker orange. Adding a drop shadow to black text has the opposite effect. It decreases contrast as you’re darkening the orange around the black text.

That was a simple scenario with a clear answer. But the everyday situations you’ll find yourself facing are not always clear cut. Though contrast errors with drop shadows are usually committed by those that have little design experience, it’s surprising how often they can be spotted in professional layouts. Remember to visualize your colors as gray when making your decision. And eliminate the thought that adding elements to text somehow makes them better, more interesting, or more attention getting. This includes things like drop shadows, embossing, gradient fills, and other “enhancements” that Photoshop allows you to easily implement.

One last comment on readability. I mentioned readability is also a matter of spacing. Drop shadows are an additional element you’re adding to the layout. They add visual clutter around the letters and around the words. They fill up the white space that is between and around letters. This may not be a huge deal for headlines, but it is with smaller headers and body copy as drop shadows can quickly make them look garish and muddy.

Drop shadows are patches for poor layouts

That’s a pretty bold statement and obviously not true 100% of the time. But I think you’ll find it’s at least partially true the vast majority of the time. Just today I was designing a 300 x 250 web ad. I created a slick graphic that was circular and contained alternating areas of dark and light, and placed the client’s orange logo atop this graphic. As the logo’s background was both dark and light, I added a black drop shadow over the light areas and a white drop shadow over the dark areas. That definitely increased the contrast and made the brand logo easier to read.

But as I was about to send this off to the client, I looked at the solution I cobbled together and realized what a mess it was. What kind of layout had I created that would require such a bandage? I could only conclude my layout had problems. Specifically, I was trying to place an important text-based logo atop a busy, multi-valued image. That’s bad design. I rethought and reworked my layout, and ended up with a much cleaner and successful solution that I could proudly present to my client.

In conclusion, I will say that subtle drop shadows have their place and can be used with elegance. But the statements above still apply (to a lesser degree) and they should only be used when there is a reason.