Navigation

Mixing Type and Imagery: How to Manage a Controlled Collision

How To, Typography, Web Design | Jul 15, 2010

By setting images in type, you are able to express more than words or pictures can alone.

The effect packs a lot of information into a tight space. But it can get ugly if the text and imagery are at odds with each other.

Designers can steer clear of disaster by keeping their purpose in mind: expressing the idea clearly should trump the “wow” factor of the technique.

Setting images directly in text mixes the straightforward communication of words with the emotional effect of photos.

Words state, and photos express. But when images get lost or text becomes muddled, or both, we get conflict. Images and text can be harmonized seamlessly, but only if we follow some guidelines that balance the readability of both. Read on to find out how to effectively mix text and imagery.

 

Balancing Text and Image Readability

Think of letterforms as picture frames… albeit unusual ones. Setting an image in text requires that you remove chunks from the picture. To retain the readability of the image, you’ll have to decide which parts of the image matter. It’s best if the letterforms don’t intrude too much on the picture.

sample of how letters cut into photos

Above, two triangles cut into the photo from the top and bottom. That’s good for the text, which is now a recognizable “N,” but bad for the photo, because some detail has been removed from the focal point of the image (i.e. the flower).

To figure out how images and text can (and can’t) mix, we begin with the letterforms. The obvious starting point is choosing the right type weight.

sample of text too thin for the photo within

Myriad Pro Light is legible at the point size shown above. The edges of the letters are clear, and most of the colors contrast well against the background. But the photo is reduced to an abstract texture.

thicker text shows more image

Changing the typeface to Myriad Pro Black reveals more of the photo. The text is harder to read because there’s more detail to catch the eye, but the word “Spring” is legible.

Choosing a thick typeface isn’t enough. We can improve image legibility another step by tracking the word, thus applying Gestalt principles—specifically “reification,” a term from Gestalt psychology that describes how we make whole images and shapes with our minds even when our eyes are given only pieces or hints.

better kerning helps the photo

Above, the letters are kerned together to create a more coherent “stage” on which the photo can appear.

In detail 1, the letterforms are deliberately overlapped to show entire shapes within the photo—but not so much that they obscure the word.

In detail 2, three letters with vertical sides are spaced far enough apart that you can recognize them as letters, but are close enough to let the flower’s petals “hop” across the white gaps. The black lines show implied lines that people connect subconsciously. At least one more Gestalt line of sight hops across letters in the word above. If you see it, leave a comment below.

Tight kerning tends to create solid blocks, which look interesting but can be cumbersome. The solution is to leave gaps between matching (or parallel) lines but to tighten areas that don’t naturally fit together.

careful kerning keeps letters readable

Here, letters with matching lines (such as the vertical sides of “r,” “i,” and “n”) aren’t as easy to read when pressed together. That open space is good for photos but bad for letters. Of course, attaching letters whose shapes match isn’t always a bad idea, but they should be as legible as possible.

 

Mo’ Photos, Mo’ Problems

One photo and a short word is easy. Multiple photos across two lines requires more effort.

sample of twelve letters with many different images

“Active summer” conjures a certain kind of imagery. The composition above has some merit. It shows a variety of photos: portraits, macros, landscapes. The text is set into an even block. And the typeface is thick enough to show most of the imagery. But there are problems.

diagram of the problems

While a few things work well, the composition is riddled with problems. Specifics are labeled in the diagram above, but most have the same cause: the letters and photos interfere with each other. We can resolve the issues by making slight changes.

improved composition with photos

Our major changes here include:

  • The image of the person in “S” is moved to the “e” in “active.”
  • New images are set in the “m,” “e” and “r” in “summer.”
  • The image of the person in the “e” in “summer” is moved to the “u.”
  • The river image is moved from the “i” to the “S” in summer and is shrunk to reveal its source.
  • The diving board is moved to the “i,” and the diver is fit into the dot above.
diagram of the solutions and remaining problems

It’s better, but not perfect. The second “m” is still lost in the background. Also, adding photos with vibrant colors widens the color palette, which can be a problem. Let’s try again.

remaining solutions

We can give thin borders to the “e” in “active” and the second “m” in “summer.” The borders here are deliberately kept faint (45% opacity) to avoid drawing attention to themselves. We can also give the “S” in “summer” a border, but only where necessary (on the whitewater). Borders are necessary only where light-colored elements meet the white background.

The “r” in “summer” features white clouds that blend into the background. But the designer decided that the “r” shape was still legible, so a border was unnecessary.

Sometimes solutions appear when you are looking for problems. During our third round of changes above, for example, the designer isolated the cannonball diver from the background, which creates a more direct interaction between the image and text.

The final touch is to blend the colors. This unifies each word.

photos in text, tinted

From slight shifts in hue to outright monotones, each word above receives varying degrees of tint. Despite the variety of subjects, scales and angles, similar colors helps each word stand on its own. Is this necessary? It depends on one’s goals.

If tying the words together is more important than having realistic color, then the technique above could work. But tinting is a solution that should be applied only if there’s a problem—that is, only if the intended meaning is getting lost.

 

Reduce, Reuse and Recycle Photos

One last problem with this composition is the sheer number of images used. Each letter seems to contain a distinct photo; if purchased as stock art, 12 photos could run up a big tab.

In fact, only seven photos were used in this composition. Two of the seven were used only once. One was used three times. Take a look:

seven images used over twelve letters

Setting photos into letterforms always requires cropping, so busy images—like the photo of the four people—can be cut in different ways and reused many times.

 

Changing Text to Fit Imagery

The two words we just dealt with, “Active Summer,” are set in the same typeface but in different point sizes to keep their edges consistent. When using one letter per image, the design decision is arbitrary. When dealing with a single image, however, the shape of the text is critical; keeping the overall text shape as close to the image’s proportions as possible is best. For example:

samples of text shapes

“Espresso House” is a long phrase, poorly suited to a 4×3 image. The solution is to adapt the text to fit the photo:

  • The words are stacked to create a block.
  • The word “house” is enlarged so that its left and right edges match those of “espresso.”
  • The “H” in “house” is uppercase, but shrunk to match the height of “ouse.” As little space as possible is left between the two words.
  • Though not always desirable, here the descender in “espresso” is allowed to meet the “o” in “house.”

Legibility is important but to some degree subjective. Certain techniques favor the image, and others favor the text. This interplay is left to the designer, who understands the goals of the task.

examples of emphasis on the text vs image

We can emphasize the text by increasing contrast around the edges of the letters (left). To emphasize the image, we show the faded image in the white space between the letters (right). “Ghosting” muddles the text but shows the image as a whole.

 

How to Set Images in Text with Photoshop

There are many ways to overlay images onto text, but these examples were created with a recipe developed by trial and error.

technique, step 1

First, set the text in a Photoshop document. This composition is 615 pixels wide because that fits Webdesigner Depot’s specs. When creating your own, fit the size to your project.

To see the edges of the letters clearly, start with black text on a white background. When you’re finished, set the text layer’s opacity to 20%.

palette, step 1

Above, the Photoshop layers palette in the first step.

technique, step 2

Second, flatten the word into the background to create gray letters on solid white. Then retype the letters, one per layer, using the background as a guide.

palette, step 2

Above, the Photoshop layers palette in the second step.

technique, step 3

Third, add photos or parts of photos to the composition as separate layers. “Clipping” the layers (Layer → Create Clipping Mask) lets the top layer (in this case, each photo) appear only where the underlying layer (each letter) appears.

palette, step 3

Above, the Photoshop layers palette as we add photos.

technique, step 4

Repeat as needed.

 

Adapting the Idea

Any photo, illustration or texture can work with text in this way. The key is to strike the right balance of clarity between text and imagery.

composition that mixes non-photo imagery with text


Written exclusively for Webdesigner Depot by Ben Gremillion. Ben is a freelance web designer who solves communication problems with better design.

How do you manage the collision of type and imagery? Please share your thoughts below…

Share this post
Comments (no login required)
  • http://www.chooseavirb.com Dwaynne

    Great post. A should-read for new and seasoned designers alike, since great typography can really spell the difference between an OK designand a great one.

  • http://www.squiders.com Web Design Kent

    I’m not a fan of this effect myself, seems a bit old hat! I prefer readable text with the emotion controlled by selecting the right font for the job!

    • http://creativeaddict.co.za Lisa

      I agree. It’s not very elegant either

    • http://listoric.deviantart.com Listoric

      I also agree, but the tipps that come with it, how to place an object into an uncomfortable space to get the best result possible is a nice lesson learned.

      And maybe you want to create a retro style image or billboard, this really comes in handy.

  • http://www.creativeindividual.co.uk Laura

    Sweet article Ben. I’ve never been one to mix text and images in this way. But after the amount of detail you’ve went into, I just might have to give it ago =D

  • http://www.2sinfotech.com/ KC Rajpuit

    hey this is perfect topic to use image with text. thanks a lot. i ever think a logic about this.

  • http://www.michaelsaathoff.com Michael Saathoff

    i really like how this effect works on the Spring in Myriad Pro Light – not a huge fan of images in the thicker fonts, i seem to lose text in it. great post!

  • http://www.jcdesignlab.com Clervius

    When I was young, I used to play around with mixing image and text. I used to love the way they look, now when I look back, it seems like an expired, obsolete form of display.
    Though it is an intelligent way to combine the representation of both text and image, I think it has no place in 2010….. of course that’s IMHO.

  • http://www.jordanwalker.net Jordan Walker

    wonderful tutorial about masking images.

  • http://tookooldoggies.blogspot.com Elena

    This is great. You really helped me understand how kerning can improve text in a composition. Thank you for the fascinating read. :)

  • http://mutiarar06.student.ipb.ac.id mutti

    Wow, it’s very inspiring… I’ve never trying to mix text and image like this… I’m gonna try this.

  • http://www.andysmiff.co.uk Andy Smiff

    I’ve had a few clients ask for this kind of effect and found that an inner shadow on the lettering and a little tweaking round about can also make the text readable but the image clear. It’s a bit like using the text as a window to the image and gives great depth if done properly.

  • http://www.goblinridge.co.uk Ted Thompson

    Nice article, I don’t see this effect very often. Thanks for sharing”

  • http://trisr06.student.ipb.ac.id tee are

    nice article mate… i love to try it in my new design later…

    by the way, i love the Espresso House image

  • http://www.vivoocreative.co.uk Web Design Nottingham

    Very inspiring! thanks :=)

  • http://outsourcecom.wordpress.com Elizabeth K. Barone

    I’m not sure I really like the “Active Summer” one. I do like “Espresso,” “Colors” and “Solstice,” though. I don’t see how the ocean and cloud images in the original “Active Summer” I and E (in the word “Active”) were unclear. I can tell exactly what they are. The final image choices were a lot better, but I think the flowers next to each other in the A and C in “Active” was a bit overload, as well as all of the cool colors in the word “Summer.” I would have mixed them up a bit more, as “Active” seems to be very busy, and “Summer” is just monotone.

  • http://www.bebop-cafe.com BebopDesigner

    Absolutely brilliant! This the best explanation ever on “why it won’t work with your picture Mr. Client”
    This effect looks wonderful, but it takes a lot of skill, extra care and a good eye.
    A client just asked me today to this using a map and filling the regions with pictures. It was hard to explain why not. She agreed at the end but wasn’t really convinced.

    Thanks for such a useful post.

    Cheers

  • http://www.crearedesign.co.uk/ Jarkko Sibenberg

    This is an effect I use carefully. I too like the Myriad light in the ‘Spring’ example. The image is not readable, but it has quite nice pattern and a springy feel to it. The thin lines of the letters also support the fragile flower image better than the bolder ones.

    In the ‘Colors’ example I like the third step the most where only the first two letters have images in them. It doesn’t look finished, but I think it has more potential than the finished one. That one just looks a bit messy.

    I don’t really like the look on ‘Active Summer’ example, but maybe that’s just me. I’m sure it has it’s place somewhere. The idea behind it is quite inspiring though. Thanks for sharing.

  • http://www.pscyhed.be/wordpress Darkened Soul

    techniques already known for years, but all the issues u can have with this sort of designing was nicely written down in this post. good read!

  • http://www.zeeigil.com Eigil Hoeyrup

    Very well explained, though it is an effect that has to be used with a lot of caution. The one I like the best of the examples is actually the one called colors with only the “C” and “O” textured.

  • http://ekas0615.student.ipb.ac.id eka

    that is awesome. nice info. thank you so much for sharing..

  • http://www.erikbriones.com/ erik

    nice info! it appears very simple in this article, but finding a really good mix that works is rather difficult for me. ;)

  • http://bambang.wijonarko08.student.ipb.ac.id wij

    hmm…
    that’s wonderful and elegant design..
    thanks for tutorial…

  • http://karimul.makhtidi08.student.ipb.ac.id tedted

    great effect. i’ll try. thanks for sharing. it’s inspiring me

  • http://nofel.saputra08.student.ipb.ac.id/ nofel

    waw thats great :) i’ll try it hehe

  • http://hutomo.triasmoro08.student.ipb.ac.id Momo

    Hmmm… It’s Awesome.
    I’ll try for my next project.
    thanks bro..

  • http://ariefh08.student.ipb.ac.id Arief

    that is very nice text if we use image behind

  • http://www.thedevelopertuts.com Bratu Sebastian

    Well, that shows us how attracted we are to natural backgrounds, and being on typography only makes us more attracted to the whole thing.

    Great insight into typography. Although I don’t usually apply it a lot, being more of a programmer.

  • http://karimul.makhtidi08.student.ipb.ac.id dety

    it’s make text be colorful and artistic

  • http://oki.maulana08.student.ipb.ac.id oky

    i think it’s cool… i wanna try it…

  • http://rifkiaansyah08.student.ipb.ac.idq rifky

    absolutely genius!!!….i’ll try..

  • http://www.pressthebigredbutton.co.uk Russ

    Great post – this is one of those things that’s easy to do, but hard to do well. You see lots of examples where people haven’t taken the trouble to consider the points you cover and the work looks like a mess as a result.