Set in Style

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…)

Note: this our last in the series on setting logotype — how to set your firm’s logotype so it displays properly on line, on all devices under all conditions. But don’t fret. We’ve got another series coming up on setting display type on line.

______
In our last installment on setting logotype, (Setting Logotype — Part II), we examined why logotypes are usually stored as graphics, rather than text.

Now, let’s see how popular viewers (like web browsers) treat graphics and text differently.

Consider the two words below. The one on the left is text; the one on the right is a graphic (of the one on the left).

One

Zoom way in one this page. As you do, note how the text continues to have smooth edges, but the graphic starts to have rough and fuzzy edges.

Zoom way out of this page. As you do, you can notice the graphic takes on a better appearance than the text; i.e., it has smoother edges than the text.

And the point of all this zooming in and out?

It’s just so you can appreciate my secret recipe for setting good looking logotype, and here it is:

Set your logotype four times larger than it will appear on-screen, and then have the browser shrink it down to size.

That way, it will look it’s best on the greatest number of devices (desktops, laptops, BlackBerries, iPods, iPads, and who knows what’s next) under the greatest range of conditions.

That’s it.

______
Oh . . . one more thing — consider large, well known companies, outfits like Coke and Apple and Ford. Look at examples of their logos and logotypes, which appear in many more places than those of law firms. Notice the consistency, and the quality wherever they appear.

There’s a reason for that — big, successful companies really care about how they appear, and for good reason.

If you want to be set in style, your logotype must appear professional. You should be sure it is, especially if you want to seem as one who takes pride in your work.

______
Now . . . that’s it! (Unless someone asks “Which graphics format do you use to store the logotype? GIF? PNG? JPEG?”)

In our last installment on logotype, (Setting Logotype — Part I), we noted that logotypes are typically stored as images, rather than as text. Because of that, font smoothing — the process used to make type look good at all sizes — can’t be applied to logotype.

Now we ask, “Why?” Why store logotypes as images rather than as text?

Well . . . there’s a darned good reason for that, and we’ll get right to it.

Previously, we saw this lousy looking logotype from Venable:

Now we’re going to create a good looking version of Venable’s logotype:

In the process, we’ll discover why we can’t store logotypes as text (yet).

________
Let’s get started.

To begin, Venable’s logotype is set in Times Roman, in a text style known as caps and small caps.

So, we start by setting the logotype that way:
.

VENABLE

Next, we stretch the type vertically by 50%:

Then, we adjust the spacing between the characters:

Finally, we add the trademark symbol and the LLP:

So, there’s our logotype set to spec.

Why not use the logotype as set. Why store it as an image?

Because we want a browser to display the logotype at the firm’s web site, but browsers — unlike typesetting programs — can’t do all the things we did to set the logotype as text. (Though they will be able to do such things in the near future.)

________
Now, zoom way in on this page. As you do, note that the one instance of Venable set as text is the only one that remains nice and smooth at any level of zoom. All the others, being images that can’t be smoothed, look fuzzier and fuzzier the more you zoom in on them.

In our next and final episode, we’ll see what we can do to improve the quality of the logotype at all levels of zoom.

In an earlier post, we made the distinction between logos (images) and logotypes (stylized text).

In this and subsequent posts, we focus on the latter.

If you want your firm’s logotype to look good to everyone — including those with iPhones and Blackberries and who-knows-what’s-next — then make sure it’s produced correctly.

The most recognizable logotype of all bears the name of Coke’s signature soft drink:

Most logotypes are not so highly stylized as Coke’s. Consider Google’s logotype:

Note: Notice the trademark symbol at the end of Google’s logotype. It’s small, but legible.

Like Google’s, most law firm logotypes are only mildly stylized. And some are registered trademarks.

__________
Now, the goal of this series is to help you set your firm’s logotype so it always looks its best, on line and in print. Before we get into the details, let’s take a closer look at on-line  type.

Go to Google’s home page and zoom in on the logotype.

To Zoom:

Macintosh — Command + (plus sign) to zoom in; Command – (minus sign) to zoom out
PC – press and hold the Control key, rather than the Command key

The logotype looks sharp at one size. If you zoom in or out, it gets fuzzy.

Zoom way in, and it looks like so:

Note: When we zoom in, the trademark symbol becomes less legible.

The logotype for Coca Cola has a similar appearance.

But why? Why don’t these logotypes act like regular type? Why do they look fuzzy close up?

It’s because they’re stored as images (like logos), rather than text.

And why are they stored as images rather than text?

Well . . . we’ll get into that in our next episode of Setting Logotype.

Test Your Logotype

Display your firm’s home page. The firm’s logotype is displayed at the top of it, right?

Look at the logotype as you zoom in and out of the page.

Zoom in and out of a PDF file with your firm’s logotype.

Does it look good at all sizes, just a few, or none at all?

If it looks anything like the Coke or Google logotypes, then it’s probably OK.

But, if it looks anything like the following when viewed at normal size, it’s not OK.

Note: Notice the registered trademark symbol at the end of Venable’s logotype. It’s not legible.

________
In upcoming episodes, we’ll review the steps you can take to make sure your firm’s logotype always looks sharp.

Your law firm probably doesn’t have a logo. Few do. But it very likely has a logotype, which it uses in place of a logo.

What’s the difference between them?

A logo is an image; a logotype is stylized type.

Logo	Logotype

Both logo and logotype (and other elements) distinguish one entity (e.g., person, business, agency) from all others, and these visual cues are so effective that most any substantial business or organization has a logotype; the larger the outfit, the more likely it is to have a logo as well.

And most outfits, regardless of size, have a style guide – a guide that describes lots of things, including the visual identity for an entity, like how its logo and its logotype should appear.

(more…)

Appearances can be so important.

Attorneys (many of them) realize this, and so they tend to their personal appearance before important meetings (e.g., the first meeting with a very attractive, potential client).

But when it comes to what they commit to writing, the vast majority of attorneys (and their firms) don’t consider appearances at all. Not one bit.

They set everything in 12-pt Arial, justified, and not hyphenated (except documents submitted to the court, which won’t even accept documents set in 12-pt Arial). What most attorneys commit to writing has the same level of appearance as the attorney who shows up for an important meeting wearing shorts and sandals and a baseball cap.*

And this can put them at a distinct competitive disadvantage.

Consider responses to an important RFP. Let’s say an attractive client has sent the RFP to a half-dozen firms. Five of the responses look bland (and are set in 12-pt Arial, justified but not hyphenated). They’re all printed on letter-size paper. The only color they use isn’t a color at all, and they contain no graphics. They might say different things, but the first impression anyone gets from looking at them is this — they’re all the same.

The same, that is, except for the proposal that was designed by a designer and produced by a pro. That’s the proposal that stands out; it’s the one that gets the most attention (at least initially). It’s the one that has an edge.

____________
I’m not alone in my thinking on this. Consider what Peter Darling (a highly regarded business-development consultant who’s worked on more proposals “than I care to remember”) had to say in his recent newsletter (“How to Prepare a Proposal — March 2009”) about preparing proposals:

Someone reading a proposal basically has two concerns. The first is, “Can/will they do what they say they can/will?” The second is, of course, “How much will it cost?” A great deal of this isn’t a logical conclusion, but the result of fast, intuitive evaluation. Or, to put it in English, someone reading your proposal will form a powerful impression of you, your company and your offering just based on how the damn thing looks. That’s what designers do.

A good designer can make a proposal look polished, expert and contemporary. They can make your company and your offering look expert, elegant and desirable. They can work wonders. They really can.

____________
If you’re preparing an important proposal, don’t put all your effort into its content. Put a fair share into its appearance. If you want a leg up on competitors, be sure your proposal is Set in Style.

____________
Note: In Silicon Valley, lawyers sometimes do show up for important meetings in such casual dress. For this post, assume a meeting in New York, or D.C.

I don’t know how this happened (though I know Microsoft facilitated it), but — so far as I can tell — the most common way to set type for law firm seminar materials is to use 12-pt Arial for body copy.

That’s a mistake because Arial isn’t for body copy; it’s for headings.

____________
The other day, I got an e-mail inviting me to a seminar hosted by a well known law firm that — you guessed it — uses 12-pt Arial for the body copy of its seminar materials.

Here’s a portion of the invite:

That portion of the invite is set in Arial (a mistake) and the lines are set too close together (another mistake). The result is that it’s not so easy to read. Readers quickly tire of copy set like this.

Let’s see what we can do to make things better. First, let’s put some space (leading) between the lines:

That’s an improvement (it’s much less of a strain to read) but it still falls short. The copy needs to be set in a different typeface, one designed for use in body copy:

Compare that to the original (above).

Which would you say is easier to read? Which looks more  professional? Which makes the best impression?

____________
Now, let’s consider the copy. Parts of it are fuzzy (a random increase in violence?), and the whole thing is wordy.

Here’s what a skilled and experienced editor might do with it:

Note: the additional copy is adapted from the firm’s invite.

____________
Compare the revised version to the original.

That’s the sort of improvement you can expect from a skilled and experienced editor.

It’s been said (mostly by me) that “the power of the press used to belong to those who had one. Now that everyone’s got a press (a computer attached to the Internet) the power of the press belongs to those who know how to use it well.”

____________
If an attorney submits a petition for a writ of certiorari with the Supreme Court (or just about any document to any court in any legal proceeding) and sets it the way many large firms set their client alerts, the court won’t even accept it, and with right good reason.

By and large, courts won’t accept documents that aren’t set a certain way. They certainly won’t accept something that’s set like this (an excerpt from a client alert published by a large law firm):

And why won’t courts accept documents set like this?

Because they’re such a pain in the eye! That’s why.

____________
Professional typesetters are much concerned with quality of appearance and with legibility — how easy it is for readers to read what typesetters have set.

And why are typesetters so concerned with legibility? Because it has such impact on how pleased readers are with what they’re reading.

Very legible type is easy to read; other styles of type (e.g., the excerpt shown above) aren’t so easy to read. Give readers a whole bunch of hard-to-read type to read, and they become irritated. Not only that, but they find a good bit harder to understand what they’re reading.

That’s right!

And that’s important.

If the reason a high-priced attorney spends his time writing a client alert (rather than doing billable work) is because the alert can attract potential clients, then the alert shouldn’t simply be informative. It should be attractive and easy to read. It certainly shouldn’t give a reader a headache.

____________
Take another look at the excerpt above. In particular, look at the second line, and the next to last line; note how tight those lines are. There isn’t enough space between the words, and that puts a real strain on readers (which is so counterproductive if the goal is to convert them to clients).

Take a look at the right side of the type. Notice anything missing? If you’re an attorney, probably not. But if you’re a typesetter what’s missing is so obvious — hyphens! The copy is justified, but it’s not hyphenated. 

Go grab a newspaper or a book. Find a block of justified type, examine the right side of it, and you’re sure to find some hyphens. 

Why? 

So there’s consistent spacing between words.

Here’s that same block of type — justified and hyphenated:

Hyphenation goes a long way towards improving the word spacing, but there’s something else wrong with this block of type. Once again, if you’re an attorney, you’re not likely to see it. If you’re a typesetter, you’re sure to.

The problem is this: the block of type is set in Arial, a sans-serif face that was designed for headlines, not for copy*.

Here’s how the block of type looks when it’s set in Century, the face that the Supreme Court requires briefs to be set in:

That’s it!

Add some serifs and some hyphens, tend to little details like word spacing, and the client alert becomes much more legible, and it looks more professional.

I say, what’s set in style is more likely to be read and recommended than what’s not.

____________
* Go to a bookstore or a newsstand and browse the offerings from professional publishers. Note that none of them has body copy set in Arial. There’s a good reason for that.