Tips for Designing with Type on a Photo


One of the best techniques to have in your toolkit is designing with type on and around images. But it can also be one of the toughest concepts to pull off successfully. You have to have the right photo, a good eye for typography and know what you want to accomplish to make the most of adding type to an image. If you feel like you are ready to take on the challenge, here are a few tips for making it work.

Table of Contents

How to Use a Text Over an Image

1. Add Contrast


Text has to be readable to be successful. Make sure that text varies in color enough to be seen in combination with the photo. If you have a photo with a dark background, opt for white (or light colored) text. If your photo has a light background, go with a dark-colored type treatment.

Contrast can also refer to the size of text in relationship to what is happening in the image. Lettering should work with (not against) the image. In the Pack website above, for example, the image is big and bold while the type is thin and light. The elements work together but they contain and element of contrast.

2. Make Text Part of the Image


Sometimes it just works that text becomes – or is – part of the image you are working with. This can be tough to achieve and only works in limited cases. You either need a simple image and word to work with, such as the McLaren treatment above, or an image that is taken with text in it.

3. Follow the Visual Flow


Working with the visual flow of an image is one of the most important tips when it comes to working with text and photos. You need words to fit into logical parts of an image. And please be careful not to put text over important parts of an image, such as the main action in a photo, faces or the product you are trying to showcase.

In terms of visual flow, look for spaces for text where the subjects of the image would look. Both examples about lead you from the body language or eyes of the person in the photo to the text. The flow of each is spot-on.