Typography and Web Advertising

~~Having~~ Using Type in Web ads: Making every opportunity count

Note: This is an adaptation of an online article which can be found at Digital-Web.com.

“Advertising on the Web is so different than print. It has to contend with tininess, limited bandwidth, banner ad shapes, being shoved into sidebars… no one even wants to see our ads!”

First off, let’s define the term “advertising.” It is from the Latin advertere, “to turn toward,” thus “to bring to someone’s attention,” or “to notice.” So all advertising, whether Web, print, or broadcast, must share this one attribute: it must be noticeable.

So why is so much advertising, including Web advertising, so skippable? Partly, I think, because advertisers make the mistake of thinking of their audience as viewers rather than targets. The distinction is real: a viewer is one who views, which implies – but does not necessarily actually deliver – their attention. It is a soft and flabby term that describes a mostly passive audience. On the other hand, a target is one to whom an ad is aimed, and suggests aiming, accuracy, and a more active, vigorous stance by the advertiser. This is necessary in our age of sale-message bombardment – on the order of about 3,500 per person, per day.

Web sites are more akin to print editorial pages than print advertising pages in their complexity and sequentiality. Web ads, however, can be compared to tv commercials: Web ads are brief five-second spots compared to the thirty-second spots that appear, for example, on the network news. There are severe limitations on story length and complexity, so being clear and persuasive (or at least mighty intriguing) are critical. Web ads simply have to reveal their value and their message immediately.

There are several kinds of Web ads. Variations on these continue being invented and rolled out:

Banner ads: horizontals
Sidebar ads (aka “skyscraper” ads) verticals and scrollable; two to three higher clickthrough rate than banners
Pop-up and pop-under ads (annoying to close, but far higher click through; higher cost for advertiser)
Floating ads (even more intrusive than pop-ups, they have sound and motion and produce still higher click-through numbers)
Unicast ads (a television-like commercial with the advantage of clickability to the sponsor’s site)

And there are of course multiples of these on many sites. So your Web ad competes with the page’s content and the other ads. This competition for attention is very similar to the environments of print and broadcast advertising.

We also need to remember, the principle that all branding efforts must be visibly, identifiably related holds true even for the smallest Web ad. Companies have design palettes that define typefaces, colors, positioning, and sometimes proportions and content in every instance of their branding efforts. Compliance may be an ongoing problem, but start a design by making it agree as much as possible with the client’s existing materials. Then introduce amendments necessary for your specific design application.

Two principles for more effective Web ad design

First Web ads must have content that matters to the target. Nothing is more important than a message that is fundamentally a mirror in which the target will recognize himself.

Second The presentation of the ad must be compelling. Simplicity of presentation is critical as well as visual difference. Our job is crafting a design that is distinct from it’s surroundings and therefore noticeable.

The Three Elements of Design

Regardless of medium, designers have precisely three elements to work with: image, type, and space. There are no other elements. But these three have so much more potential than is typically used. Manipulating each purposefully will produce much better results.

Here are three treatments – not logos, which require simplification and symbolism – that correspond with these ideas: apple + power; apple + staffing; and apple + mobility. If the any of the solutions make you smile, they are unexpected and therefore possibly memorable. This is value-added design because it does more than decorate a page. It evokes a response, whether a memory or an action.

Design Element No.1: Image – The common language

Look through an advertising annual and you will see that, compared to type and space, imagery gets the vast majority of attention. Images abound: full color, full bleed, mini movies on the Web. We targets are saturated with images. We targets are jaded to their persuasive power.

Still, if you have to have a picture of, say, an apple, make it as new as possible by giving it a treatment that directly relates to your message. Avoid random treatments that are merely different for difference’s sake. That works against your message because it says, Look at this long enough to know you have been manipulated into looking. Your target will be over and out at that instant.

Here are two examples of integrating type and space. What they have in common is that space pushes letterforms around. Space, in fact, dominates the type. This is relatively unusual and therefore visible to advertising’s targets. (L-R: UNA Amsterdam; R. Kamble)

Design Element No.2: Type – The communicative element

We have become an increasingly visual society in the years since the advent of television in the 1950s. If other Web advertisers are emphasizing imagery, you can either choose to follow the prevailing attitude, or you can buck that trend – possibly becoming more visible – and tell your story using only type and space, space and type. No imagery at all. The key is to impose the space on the type to make itself visible in the foreground.

Integrating type and space is not the same thing as just typesetting a headline. That puts space in the background, as usual, and is vanilla and supremely under designed, even if you pick a nice typeface. Too much credit goes to the type designer, not to you as the ad’s designer.

There are two significant considerations when choosing a typeface for an ad. One is what typeface(s) does the client use for its overall branding efforts? Unless you have a really powerful reason otherwise, you should use that typeface to further their branding. The other powerful consideration is what typeface is going to propel my message with greatest impact? That is a balance between simplicity of letterform, like a bold sans serif, for example, and character that distinguishes your ad from all others. Choose typefaces that are highly legible, yet have enough subtle quirkiness to be distinctive. A third – and far less significant – consideration is what typeface do you as the ad’s designer happen to like? Your favorite typeface may happen to coincide with a client’s real needs, but that doesn’t happen as often as we designers think it should. So attend to the first two considerations and leave your current fave face on the desktop.

Here are three examples of space dominating a design. This is a counter-intuitive approach that causes abstraction. Remember, advertising comes from the Latin for “to bring to someone’s attention.” Our first responsibility is to make Web ads visible to our targets. (L-R: P. Zwart; K. Dailor, A. Ellis, D. Shelford; L. Wickware)

Design Element No.3: Space – The neglected element

Space invariably exists behind image and type. It is just pixels or substrate, there because it has to be. No one pays attention to it, except for covering it with image or making it a color. But it always remains in back of the other two elements. Make a message visible by doing the unexpected: bring the background to the foreground. Look for ways to have this clarify and propel your ad’s message. This is not equivalent to a Photoshop treatment that decorates an object. There are few messages that fail to be served by this approach.

If a Web ad design is skewed too far toward legibility, it will be bland and unexceptional. If a Web ad design is skewed too far toward character, it will be hard to read and perceived as confusing. The ideal is to balance Web advertising’s simplicity with character. (L-R: L. Cheeseman, M. Gherman; G. Davanzo; K. Atkins, N. Caal, B. Simon)

Unity, legibility, and character

All design strives for visual unity among image, type, and space. That means, for instance, that space doesn’t always have to be in the background, and that type and image can become a single element. The best design simplifies multiple elements into a single impression. Achieve this single impression by finding and exploiting commonalities between image, type, and space so they are perceived as being a single entity. A few ways of doing this are by putting texture from the image into the type; by putting space into the image; and by shaping the type into the image. Because Web ads have severe limitations, not least of which is their intrusive nature, they are more susceptible to busyness than other kinds of ads. Keep them simple.

Looking for examples of good use of typography in Web ads is a relatively fruitless task. Some of the better ads are clean and simple and comparatively handsome, but their display type is essentially set in a normal way. The letterforms are not asked to carry any of the weight of the message save for being lined up in the right order and into maximally legible words. In contrast, the examples shown above, which are hypothetical, not actual Web ads, push the boundaries of what is possible. Which of these is more likely to make the target take notice? Remember, advertere means to turn toward, to bring to someone’s attention.

So on the one hand, legibility is maximized by simplification, and on the other hand visibility is maximized by abstraction and character. If a Web ad design is skewed too far toward legibility, it will be bland and unexceptional. If a Web ad design is skewed too far toward character, it will be hard to read, perceived as a confusing, skippable muchness.

The ideal is to balance Web advertising’s simplicity with character. There is no formula for this. It is what makes design an art. Finding such balance requires sensitivity and practice.