ADVERTISEMENT



Google       

Home -> Law Blog Directory -> Legal Writing Blogs -> Set in Style

OR PHONE (866) 635-1838 for Bankruptcy Help, (866) 635-6190 for Divorce,
(866) 635-2689 for Personal Injury or (866) 635-9402 for Criminal Defense

Find a Local Lawyer

Bankruptcy (866) 635-1838
Divorce (866) 635-6190
Personal Injury (866) 635-2689
Criminal Defense (866) 635-9402

Bookmark

Legal Writing

: Set in Style

More Type & Image ? Responding to Readers

ADVERTISEMENTS

This is part of a series titled Type & Image.

It’s about how you can set type on an image so it looks good and is very legible.

The whole discussion began with this comp I found at a law firm’s web site:

Type on image from Nutter's home page

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.

If you want to know how we came up with that as our goal, read the series. It starts right here.

______
Let’s start out with this familiar image:

Picture of the Supreme Court building with Article III, Section 1 of the U.S. Constitution -- The judicial Power of the United States shall be vested in one Supreme Court, and in such inferior Courts as the Congress may from time to time ordain and establish.

Here’s the same image with the same copy set in a very different way:
Picture of the Supreme Court building

The judicial Power of the United States
shall be vested in one Supreme Court,
and in such inferior Courts Congress may
from time to time ordain and establish.

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? 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:

busy background with stylish overprint

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. If I can do it, then some law firm that charges clients $400 per hour has no good reason not to. (Being too cheap for your own good is not a good reason.)

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.

Full post as published by Set in Style on March 26, 2010 (boomark / email).

Bloggers, promote your law blog by nominating your blog for inclusion in USLaw.com's Law Blog Directory and RSS Reader. Benefits described.
Lawsuits and Settlements

Related Searches

























































































































US Law
#1 Online Legal Resource













Your Blog Subscriptions
Subscribe to blogs

10,000+ Law Job Listings
Lawyer . Police . Paralegal . Etc
Earn a law-related degree
Are you the author of this blog? Adding USLaw.com to your Blogroll increases relevance. You qualify to display a USLaw Network badge.
Suggest changes to this blog's description or nominate another for inclusion. Register for updates.


Practice Area
Zip Code:

Contact a Lawyer Now!






0.0188 secs (new cache)