Typography and Web Advertising: Making Every Opportunity Count

In: Articles

By Alexander W. White

Published on June 25, 2007

We hear it all the time:

“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!”

Let’s begin with a clear definition of the term advertising. It is from the Latin advertere, meaning 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 the 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 sales-message bombardment—on the order of about 3,500 per person, per day.

Web pages are more akin to print editorial pages than print advertising pages in their complexity and sequentiality. Web ads, however, can be compared to television 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) is critical. Web ads simply have to reveal their value and their message immediately—or sooner, if possible.

There are several kinds of web ads. Variations on these continue to be invented and rolled out:

• Banner ads:horizontal
• Sidebar ads (aka skyscraper ads): vertical and scrollable, two to three times higher click-through 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. Your web ad competes with the page’s content and the other ads. This competition for attention is very similar to 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 is an ongoing problem, so 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, as well. Simplicity of presentation is critical, as well as visual difference. Our job is to craft a design that is distinct from its 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.

Design Element Number One: 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, and 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 I’ve sketched three treatments—not logos—which require simplification and symbolism. They correspond with these ideas: apple + power; apple + staffing; and apple + substruction (Figure 1). If 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.

Figure1. Samples of value-added design.

Design Element Number Two: 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—and possibly become more visible—by telling 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 designer of an effective ad.

There are two significant considerations when choosing a typeface for an ad. One is the typeface(s) that the client uses for its overall branding efforts. Unless you have a really powerful reason otherwise, you should use that typeface to further their branding. The other critical consideration is what typeface isgoing to propel the message with greatest impact? A balance between simplicity of letterform, such as a bold sans-serif, for example, and character will distinguish 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 you, as the ad’s designer, like. Your favorite typeface may happen to coincide with a client’s real needs, but that doesn’t occur 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 a two examples of integrating type and space (Figure 2 series). What they have in common is that space pushes letterforms around. Space, in fact, dominates the type. This is still relatively unusual and therefore visible to advertising’s targets.

Figure 2-1. “Baselitz poster”, by UNA Amsterdam, AD

Figure2-2. “Absolut”, by R. Kamble, AD

Design Element Number Three: 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: Few messages fail to be served by this approach.

Here are a few examples of space dominating a design (Figure 3 series). 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.

Figure 3-1.“Ionisatiespanning”, by P. Zwart

Figure 3-2. “VW billboard”, by K. Dailor, A. Ellis, D. Shelford,ADs

Figure 3-3. “Chicago”, by L. Wickware, AD

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. (Figure 4 series. These examples are samples from Typography 27, The Annual of the Type Directors Club. My thanks to these three designers.) 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.

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 relatively handsome, but their display type is essentially set in a normal way; the letter forms are not asked to carry any of the weight of the message, save for being lined up into maximally legible words. In contrast, the examples in the Figure 4 series, (which are hypothetical – not actual web ads) push the boundaries of what is possible. Which 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, skippablemuchness.

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.

Figure 4-1.“Boyfriend”s Head”, by L. Cheeseman, M. Gherman, ADs

Figure 4-2.“Pescaia”, by G. Davanzo, AD

Figure 4-3. “Alexandria”, by K. Atkins, N. Caal, B. Simon,ADs

Further Information

There are many resources available for advertising design. A few are:

My own: alexanderwwhite.com
The Design Observer: designobserver.com
Creativity’s Ad Critic: adcritic.com
Management Professor’s site: garrreynolds.com
Web 2.0 advertising: calacanis.com/2006/11/15/the-real-story-of-web-2-0-advertising-2-0
The Type Directors Club: tdc.org
Association Typographique Internationale: atypi.org
International Council of Graphic Design Associations: icograda.org
Ad Age Top 100 Campaigns: adage.com/century/campaigns.html
Creative HotList to see what’s new: creativehotlist.com

• Add to Magnolia
• Add to My Yahoo!
• Add to Newsvine
• Digg this story
• Add to Del.icio.us

Related Topics: Graphic Design, Typography, Web Design