Putting Text Over Images: Make it Legible!

When choosing the elements for a disc design, we often go with a full color image over the entire background. This is a great way to add color and look really commercial. The problem arises when adding text. Often the text is hard to read and makes our entire project seem amateurish - the opposite of what we were trying to achieve! I'm going to show you a few solutions to this very common concern.

You can see in Figure A, I have two examples of a full color image covering the background of a disc face. The image is this really cool close up of a guitar, which is perfect for this hypothetical project of mine. The first thing to try with your text is as simple as text color. The image on the left shows my track list in black and is really hard to read. So on the right, I simply swapped the text color to white. This is a little better. Sometimes switching from a dark to a light color, or vise versa, is all you need to do, but it didn't solve the problem in this example. Moving on.

When the text color doesn't solve the problem, try a drop shadow or back glow. Figure B shows the black text with a light glow behind it and the white text shows a dark drop shadow. Having that contrast right around the lettering really makes it more legible. You might like this solution, or you might want to try one of these others.

When the drop shadow or back glow doesn't offer a big enough contrast, why not try a band of color? In Figure C I demonstrate a light band of color running behind the black text and a dark band of color running behind the white text. This utilizes the same concept as the drop shadow, but is a cleaner, less busy look. When doing bands of color behind text, I will usually sample a color from the image, in this case I used an off white and a dark brownish red.

Finally, Figure D shows a little different version of the previous solution. Instead of a hard edged stripe, you can take a color from a solid on the edge to a blend into the photo. This is a bit more subtle of a solution. You can see I sampled a brighter color for the background behind the white text in this example.

In every case, I'm playing with contrast to make the lettering stand out. You can combine drop shadows with color banding and blending with back glow. Don't be afraid to try something new. In Figure E I've put a solid band of color behind one line of text over a blended background on the left example and put a drop shadow on the text over a solid band background. I even put a drop shadow on the solid band behind the text.

Don't be intimidated, just take one element at a time. Change the text color, add a drop shadow, try a band of color. You'll have legible text before you know it and will really have taken your design to the next level.