Set in Style

Consider the beginning of this press release:

EpsteinBeckerGreen Ranked Among Top Firms for Diversity by MultiCultural Law Magazine

7/22/2010

NEW YORK (July 22, 2010) – National law firm EpsteinBeckerGreen is pleased to announce that the Firm has been ranked among the leading law firms for diversity by MultiCultural Law magazine.

EpsteinBeckerGreen ranked 3^rd in the magazine’s listing for the “Top 50 Law Firms for Partners” and ranked 6^th in its “Top 25 Law Firms for African-Americans” listing. The Firm also ranked 21^st in its “Top 100 Law Firms for Women” listing.

“Our Firm is committed to maintaining a diverse workforce and fostering a work culture that promotes diversity in which our attorneys and staff members can develop to their fullest potential,” said Douglas Hastings, Chair of the Board of Directors and a Member of the Firm’s Health Care and Life Sciences practice in the Washington, D.C. office.

The reader’s eye is drawn to the second paragraph because of the greater spacing between the lines than in the surrounding paragraphs. The extra spacing is due to the use of superscripts in the ordinals (e.g., 3^rd).

Is there a better way of presenting the information?

Let’s see:

EpsteinBeckerGreen Ranked Among Top Firms for Diversity by MultiCultural Law Magazine

NEW YORK (July 22, 2010) – National law firm EpsteinBeckerGreen is pleased to announce it has been ranked among the leading law firms for diversity by MultiCultural Law magazine.

EpsteinBeckerGreen ranked:

#3 in “Top 50 Law Firms for Partners”
#6 in “Top 25 Law Firms for African-Americans”
#21 in “Top 100 Law Firms for Women”

“Our Firm is committed to maintaining a diverse workforce and fostering a work culture that promotes diversity in which our attorneys and staff members can develop to their fullest potential,” said Douglas Hastings, Chair of the Board of Directors and a Member of the Firm’s Health Care and Life Sciences practice in the Washington, D.C. office.

The advantage?

There are several:

1. It’s easier for readers* to parse a list when it is set as a list.
2. Setting this list as a list gives it greater emphasis — it’s likely to be the first thing a reader reads.
3. It looks more professional.

Of Special Note: The latest issue of Multicultural Law magazine was published in Fall of 2008.
Here’s the complete list of the Top 100 Law Firms for 2010; the list was ‘announced’ in May, 2010.

______
* It’s a very good thing to serve readers, to make it easier for them to read what you’ve published, especially when you hope to convert those readers from potential clients to the sort that pay.

You’re an attorney, not a typesetter.

You’re concerned with the wording of agreements, briefs, or contracts, not the details of how those words are rendered.

But — if your goal is to persuade — you should be concerned, and that’s because appearance matters: first impressions do too.

Let me say it again — the first impression someone has of what you wrote isn’t what you wrote; it’s the appearance of it.

If you think first impressions are important and good looks are good to have, then take my advice and apply it to whatever you’re producing — a brief or a client alert.

Set Heads in Sans-Serif Type, Like This

Type can be classified as Serif or San-Serif.

Sans-Serif type doesn’t have small strokes at the end of characters.

Serif type does.

Don’t Set Body Copy in Sans-Serif Type

For the sake of your readers, set your heads in Sans-Serif type, and set your copy in Serif type, like this.

Set the Heading of the Table of Contents with One Word

The correct way to set heading of a table of contents is with just one word — Contents

Hyphenate Justified Copy

Go to a book store. Grab a new hardcover book, and look at the copy in it.

I’ll bet you the copy’s justified. In other words, each line of type is the same length.

And it’s hyphenated. Look at the ends of lines along the right margin. Every so often, a line ends with a hyphen that breaks a word in two.

If you want your copy to look as good as can be, set it justified and hyphenated. Concern yourself with the consistency of the spacing between words, and don’t set the lines too wide or narrow.

If you hope to persuade, don’t forget how helpful small courtesies can be.

Put Just One Space after a Period — Not Two

Look at hardcover books, or magazines, or newspapers, or advertisements. Look at textbooks.

What you’ll find is one space, not two, after any type of stop. Using two instead of one now appears old-fashioned.

Use an Indent or Vertical Space to Indicate a New Paragraph — Not Both

You’re still in the book store looking at those hardcover books — the ones vying to be on the New York Times Best Seller list.

Find one that strikes you as especially attractive.

What you’ll find is that the table of contents is set with one word, heads are set in sans-serif type, copy is set in serif type and it’s hyphenated and justified, there’s just one space after a period, and each paragraph begins with an indent OR a space between it and the paragraph above it.

Imitate the Pros

Just go to a book store and see how the pros (those who sell print) do it. And then imitate the ones that look best.

Postscript

If you prefer to hear this from an attorney rather than an editor, visit Matthew Butterick’s  Typography for Lawyers.

I want to ask you a question. Before I do, I’d like you to read three paragraphs.

Here they are, just as they appear at Morrison & Foerster’s web site:

Those paragraphs are set in Arial bold.

Now look at those paragraphs set in Verdana regular.

Here’s the question: Which do you prefer to read: Arial bold, or Verdana regular?

Here’s the answer: Verdana regular. It’s much easier to read.

Here’s another question — why in the world would this firm set copy so it’s hard to read?

______
Here’s an experiment: zoom out of this page (by pressing CTRL –).

Zoom out several times, and you can see how the copy looks on devices with smaller displays.

If you want people with iPhones and Blackberries and such to visit your site and be pleased with the experience, make sure they can read your copy without strain.

And if you’re not a designer, but you need one, get one.

Ditto for copywriter, artist, or UI specialist.

If you need one, get one.

Note: A web site is like a house — if you build one but you don’t know how, the neighbors are sure to notice (and talk).

Have you ever seen a photograph that got fuzzier the closer you looked at it?

If you use the Internet, you have.

______
Let’s play Make Believe: Make believe you’re an attorney who charges clients between $500 and $800 per hour. You take considerable pride in your appearance. You wear expensive clothes that look brand new.

And you’re smart. Before you meet someone who might consider paying you $600 or $700 an hour, you tend to your appearance. If you’re about to make a first impression before a very attractive client, you want it to be terrific. Right?

______
Forget it!

The very attractive, potential client already has some impression of you.

How is that possible?

Curious about you, this potential client does some research. Before he contacts you, he wants a good idea of who you are, what your experience is, and who you know.

So . . . he sees your firm’s home page, and that makes an impression. Then he looks at your bio page. He quickly focuses on your visage — a photo of you taken when the firm’s web site was revised a few years back.

And that — along with the info in your bio — makes his impression of you much more definite.

That’s how it works. (People form their initial impressions of others in the blink of an eye.)

______
Let me ask you this (and remember, it’s still make believe) — does your photo resemble any of these? I mean, in terms of quality.

If so, the potential client’s early impression of you just took a deep turn for the worse, because it seems you don’t pay attention to detail, or don’t bother to fix obvious errors. He’s disturbed by the poor quality of what he sees, and he figures, “Any attorney who accepts such sloppy work can’t be worth $600 per hour.”

You might take great pride in your appearance, but your photo says you don’t. Just for that, you might not get the call; you might not get the opportunity to show the potential client just how sharp you are.

Don’t ever forget the potent power of first impressions.

______
That’s it for now, and make believe is over.

Tune in next time, and learn how to make sure photos of your attorneys don’t portray them as fuzzy attorneys.
.

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:

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:

This is part of a series titled Type & Image.

______
Some firms truly realize how important it is to look sharp — especially when the goal is to charge clients $600 per hour.

When it comes to setting type on a real image, Luce Forward is one of them.

Here’s just one example. It’s from the firm’s home page:

That’s pretty well set.

It would be nice to have more contrast between the type and the sky in the bottom line, but there are only four words in that line.

That’s considerably better than what’s at the home page of Nutter McClennen & Fish LLP:

______
Luce Forward presents itself better than Nutter. It seems more professional and classier than Nutter, and that’s the first impression one gets.

If Luce is worth $600 per hour, then Nutter’s worth $225 — just by the looks of it, that is.

This post is one in a series of posts on how to set type on an image.

The target audience for this series of posts includes those who want a web site or a blog to serve as an effective marketing or branding tool.

Let’s review what we’ve covered so far (in the previous four posts), in which we went from this (barely legible type):

to this (much more legible type):

What we’ve found is that:

• Strong contrast between foreground (type) and background is critical to legibility.
• TV commercials (and news broadcasts) provide good examples of excellent legibility.
• Study TV commercials (and such), and you’ll find that only rarely is type set on a real image.
• A notable exception is the foreign-language film with subtitles.
• When viewing such a film, people find a lack of legibility frustrating and annoying.
• To be most legible, type on a real image has to be stylized in some way.
• If the image is variable, or if both the image and the text are variable, as in a foreign-language film with subtitles, the text can be styled so it’s legible even when there’s no contrast at all between foreground and background.

And let’s remind ourselves on something basic — what any of this has to do with using a web site or a blog as a marketing or branding tool:

1. If people can’t read your copy, they won’t.
2. If they don’t, your effort to put that copy in front of them is wasted.
3. To be set in style, your type must be extremely legible.

In future posts regarding Type & Image, we’ll look at such things as:

• Setting type as a graphic that search engines can parse.
• How to set type on an image without expensive software.
• What you can do with a just a few thousand dollars worth of software.
• How to get your hands on a few thousand dollars worth of software for around $20.

Yesterday — in our search for a way to set very legible type on a real image — we went from this:

To this:

We did much to improve legibility, but we had to use more space.

Now the question is this: can we set the type so it’s legible and compact? That’s our goal.

So far, we’ve viewed our green type against a medium blue and light beige background. How would it look against a medium green background?

Another way of asking that question is this: what if there were hardly any contrast at all between the type and the current background?

Then we’d have this:

That doesn’t work at all.

We can change the color of the type so it has a strong contrast with a known image, but — since we don’t know what the image might be — we’re sure we can’t find a color that will work with all real images. Whatever color we pick could be a big part of an image.

Let’s see if we can make the type legible without changing its color.

Let’s add a drop shadow, like so:

That drop shadow goes a long way toward solving the problem of very low contrast between image and type.

Is there another effect we could use that yields better results?

Yes. Consider what happens when we add an outer-glow effect:

Very legible, right?

Now, let’s see if we can maintain legibility while putting more characters into a smaller space.

Here’s what happens when we make the type less bold:

Note that the type uses less space when we make it less bold.

Here’s what happens when we condense the type:

And here’s what happens when reduce the size of the type:

Not bad. It doesn’t require any more room, and it’s certainly more legible, than what we started with:

That’s it for now. Tune in next time for more on how to set type on a real image (and variable type on a variable image).

In our last episode, we continued our discussion about combining type with a real image — an image you could capture with a camera.

The starting point for our discussion (Type & Image) was this combination of type and image, which simply doesn’t work:

What we’re going to do next is see how to set type on an image — any image at all — so the image looks good, and so does the type.

To be set in style, your type must be extremely legible.

Suppose you want to set variable copy on a variable image (as in Nutter McClennen & Fish LLP’s home page). Suppose there’s no restriction on the image — it could be anything, dim or bright, colorful or drab, busy or flat.

How do you set the copy so it’s always legible on any background?

In other words, how do you set subtitles to a foreign-language film so they’re always easy to read?

______
Have you ever watched a foreign language film with subtitles and been annoyed that they were so difficult to read at times? I’ll bet you have.

Imagine seeing a film with subtitles and thinking, “gee, these subtitles are really well done. Very legible.” You’ve never done that, have you?

That’s because type is not the sort of thing you notice unless it’s not set right. When it’s done right, you don’t even think of it.

______
We’re going to use the following image of the Supreme Court building for the rest of our discussion on combining type with a real image:

Let’s begin by setting some thin white type on a portion of the image like so:

The type is legible on a flat, dark blue background, but not on a busy background that offers little contrast.

So, how can we set the type so it’s most legible? We see that white type doesn’t work. How about black type?

That doesn’t seem to be much better.

Let’s see — could we set the type in some color that has high contrast with everything in this picture? How about bright green?

That doesn’t work, and nothing does. There’s just no way to set type in one color so it’s legible over the image. Even if we could, it wouldn’t work for all images (imagine one with lots of light green in it), which is what we’re looking for.

Suppose we set the type bold? Would that work?

That’s better, but it’s still far from being very legible.

Suppose we add a drop shadow?

That helps. But it’s not enough.

How about even bolder type?

And then suppose we set a very different shadow to all the type (even though it appears as though it’s only applied to some of it).

Now we’re getting somewhere. Just compare the comp above to the one we started with.

But you can see the problem we’ve run into: we can’t put nearly as much text on the image as if we were using lighter type.

In our next episode we’ll see if this problem can be resolved.

Yesterday,  we examined this comp (below) in which copy (foreground) was knocked out of a photo (background).

Obviously, the comp’s a dud: thin white type on a light yellow background is hard to read, and that’s not a very good way to market professional services (or much of anything). Better yet, it’s a terrible way to say what you do.

Compare that to this comp from the same site:

Much easier to read, is it not?

Before we get into it, let me ask you this — Did you look at some TV commercials like I said you should?

You really need to.

If you haven’t, then before you read any further, look at some commercials. Look for type on a real image, static or moving. Go do it now, before you read any further.

(more…)