It’s about how you can set type on an image so it looks good and is very legible.
Since the firm’s site uses variable text on a variable image, we set a lofty goal for this series: how to set very legible captions to foreign-language films.
Zoom in on this page, and then zoom way out.
As you do, notice how the copy in the bottom photo looks good at any level of zoom (even if it doesn’t provide enough contrast with all of the background); not so with the copy in the top photo (which is so lacking in contrast with part of the image).
The difference? Yes, the copy in the bottom photo has a drop shadow. That’s obvious. What’s not so obvious is that the copy in the bottom photo is set in HTML; the copy in the top photo is part of the photo.
Click and drag the two photos. Notice that the copy moves along with one photo, but not the other.
______
One reader writes:
“Why set the copy as part of the image? Why not set it as HTML that overprints the image?”
A most excellent question.
One big reason for setting copy as part of an image (rather than setting it in HTML) is you know just how it’s going to look (assuming you do it correctly). And you have much, much, much more control over style.
When you set the copy as part of the image, you can get real fancy and do astounding things like this:

NOTE: zoom in and out on this image (a very busy Times Square at night) that includes very stylized type. See how the type maintains its quality at any level of zoom, even though it’s set as part of the image. Now that’s Set in Style.
You can’t do that with HTML.
There are lots of things you can’t do with HTML right now. But things are changing.
Not long ago, you couldn’t set a drop shadow in HTML.
In the not-so-distant future, you can expect HTML editors to let you do much of what you now need Illustrator or Photoshop to do.
Heck . . . in the not-so-distant future, you’ll be able to resize images with no loss in quality, and type will always render well.
______
Another reader writes:
“In your posts on placing text on an image, I think you forgot something. When you replace text with a graphic, search engines can no longer find it. A search engine won’t find the text of Article III, Section 1 you used in your image because it’s part of the image, rather than text.”
What a fascination we have with search engines and search engine optimization and key words and most frequently used phrases and Google searches and such.
The reader’s right, to a point.
Search engines are great at reading text, but they don’t read images well at all. A search engine has no idea that a picture of a tree is a picture of a tree. That is, unless you use tags to specify that it’s a picture of a tree.
Move the cursor over the picture (of the Supreme Court building with the sky in the background) that has the copy set as part of the picture. After a second or so, hover text appears describing the picture, and the text of Article III, Section 1.
Search engines can and do read hover text, so if you want to include copy as part of an image and have search engines find it, just put it in the tag that holds the hover text.
But . . . wait a second. Why do you want a search engine to know your site has the text of Article III, Section 1?
Why?
Have you been swept up in the SEO madness that’s given rise to a cottage industry to help potential clients searching for information on Personal Injury Lawyers in the Lower Part of Manhattan Who Offer Free Counseling to Those Who’ve Been Injured in a Traffic Accident? What good will it do you to let search engines know that your site includes the text of Article III, Section 1?
______
Yet another reader writes:
“In your series on Type & Image, you use software I don’t have and software I wouldn’t know how to use if I did have it. I don’t know the first thing about Photoshop or Illustrator. So, how can I apply what you teach?”
Great question.
If you don’t know your way around Photoshop and Illustrator, your best bet is to hire someone who does. Or, if you know your Photoshop and Illustrator but you haven’t donated several thousand dollars to Adobe to get your own copies of them, go to Kinko’s and rent a computer that’s got those apps.
But let me ask you this: what the heck are you doing setting variable copy on variable images?
Have you lost your mind?
This is the web, not some foreign-language film.
Or have you got your eye on the future web, the one that will offer a much richer experience than today’s web?
If you do, good for you.