All too often, it seems we are faced with difficult typographic design choices. While some people are more tolerant than others when it comes to reading type against a busy background, there are some techniques you can employ, with relative ease, to improve the readability and the impact of your designs.
We’ll look at some tricks that you can accomplish easily in Photoshop, and I’ll wrap up with a list of pointers to some great resources for further reading.
Here’s a typical example. In this case, given the busy and colorful background, neither black nor white type stand out sufficiently to make for easy reading:
One technique to create text that stands out from the background is to use a complementary or contrasting color. In this case, using a bright blue sampled directly from the image improves the situation a little, and stands out while still maintaining some continuity:
The results still leave something to be desired, though. Using a bright green to contrast with the red of the gifts would be much too garish and hard on the eyes. Time to resort to our little bag of tricks:
Method 1: Place a semi-transparent backdrop behind the text:
In this example, we create a new layer under the text. Drag out a rectangular marquee selection, and fill the selected area with white. Reduce the Opacity of the layer to about 45%, or to taste. The result is subtle, but makes a huge difference in readability:
Method 2: Add a stroke to the text with Layer Styles:
In this case, simply selecting the type layer, and adding a layer style of “Stroke” set to black color, provides a striking contrast and improved legibility. Use with care, and don’t make the stroke too thick:
In this case, we used a bright green, which fits the festive mood, but doesn’t provide as great a contrast as the black stroke:
Method 3: Add an Outer Glow to the text with Layer Styles:
Here, we’ve added an “Outer Glow” layer style. However, we’ve changed the color of the Outer Glow from the default yellowish color to black, and changed the blend mode of the glow from the default “Screen” to “Multiply.” Additionally, we increased the “Size” parameter until the effect was sufficiently visible. Note that this is similar to a drop shadow, except that in this case the dark shadow extends all the way around the text:
Method 4: Decrease the Layer Fill to 0%:
Here’s another variant using the default outer glow, with the “Size” parameter increased. However, in this case, the text layer’s “Fill” parameter is set to 0% (Not the Opacity). Setting the Fill to 0% makes the layer’s pixels invisible, but the layer style remains visible, giving a nice negative-space effect:
Still not good enough? Well…
Method 5: Mix it up!
Here we have the fill set to 0%, an outer glow, and we’ve added a “Bevel and Emboss” layer style with the default settings:
Last but not least, here’s the same as above with a gradient overlay layer style added, with the gradient colors set to a blue and yellow sampled from the image:
As you can see, the sky is the limit. There are so many things you can do to make that text stand out, improve readability, and give your designs greater IMPACT.
If you’d like to read further on text and typography, I’d like to recommend some excellent resources:
- Design By Firgs – Working with Typography – Part II – Part III A nice set of tutorials for designing with fonts
- Speckyboy Design Magazine – 42 Amazing Sources for Inspirational Typography
- I Love Typography – The name says it all
That should keep you going for awhile! Get out there and try some new things, don’t be afraid to experiment, and don’t be the victim of illegibility!