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

First, study this image with a snippet of copy knocked out of it; it appears at the home page of a law firm’s web site.

If you have a recording of a Super Bowl broadcast, gt get it and cue it to the start of halftime.

If not, turn on your VCR or DVD and record some commercial TV. Then start a big pot of coffee.

Once the coffee’s brewed, grab a cup and stop recording.

Have a seat and browse what you recorded. Look for images with knock-outs (in which the type is lighter than the image) or overprints (where the type is darker than the image).

Compare the images in which the type is very easy to read with those in which it’s not so easy to read.

If you can, describe the differences between them.

Then tune in tomorrow, and we’ll start looking at how to combine type with images so the type not only looks good, but is easy to read.

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.

I notice that quite a few law firms publish PDFs in which the type isn’t rendered properly. Instead, it looks bold and rough unless you zoom in on it, in which case it looks just fine.

Consider the following block of type. The left side is from a PDF published by a Great Big Law Firm; the right side is from the Word document that was the source of the PDF.

The type in the Word document looks fine; the type in the PDF is much heavier and less distinct. To use some highly technical typesetter’s terminology, “it’s got fuzzy type.”

In this case, the problem is that the PDF was saved in the wrong format not produced correctly. But that’s not important here, as there are a number of problems that can prevent PDFs from looking as good as they should.

No, what’s important here is that no one caught the error. They just distributed it to their “friends and clients” with clunky type.

But when your copy’s set in style, that doesn’t happen.

(more…)

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

You’re an attorney and you just finished writing a client alert for your firm.

Now, all that’s left to do is to send it to marketing, right?

Wrong!

That’s your work, with your name on it. So, you want to make sure it looks right after it’s published.

You sent the marketing department a Micrsoft Word file, but that’s not what was published. The folks in marketing did a few things to the alert in production. They may have altered it in some way. It happens.

If you want to make sure that what clients and potential clients see is what you suppose they see, review the published alert.

____________
Anything you put your name to can form a potential client’s (or prospective employer’s) first impression of YOU.

So, take a few minutes to make sure the impression will be favorable.

Here’s a good example that shows why law firms need editors. Written by “one of the country’s most well-known art lawyers,” it discusses orphan works, copyrighted works whose owners cannot be found:

In short what the amendment provides if a user can not find the work’s creator and they tweak the work they have cart blanc to use an artist’s work without any fees being paid even when the creating artist identifies themselves they do not even have to stop infringing.

From the same article:

The copyright office sought comments to address this issue they laid out the issue as they saw it as follows (their complete statement can be found in the Federal Register Volume 70, Number 16 or at, http://www.copyright.gov/fedreg/2005/70fr3739.html).

Now when you catch an infringer, they know they are caught, have exposure and they will generally negotiate a settlement, if this amendment becomes law you can be sure every infringer caught will claim the work they copied had no name on it so it is an “Orphan Work” so they are not liable. Instead of coming to a compromise it will be “so sue me.”

While we strongly encourage registering you copyright for many reasons having a registration might be of little help if your name has been removed by the infringer (or earlier) because you can not search the copyright office for images.

____________
The potential client who reads that will undoubtedly doubt the firm’s claim to a commitment to excellence.

An editor can help make sure that everything the firm publishes supports the claim.