Typography & Design Elements

The following advertisement from AVON found in an article on their Insider Blog entitled, “TBT: A Look Back At 130 Years of Avon’s Iconic Advertisements,” includes some great typography and design elements.

Original retrieved from https://www.avon.com/blog/avon-insider/130-years-iconic-avon-advertisements

One of the most effective ways to add visual appeal to a piece is through contrast and one of the best ways to add contrast is with typography.

Most typefaces (fonts) can be dropped into six different categories: Oldstyle, Modern, Slab serif, Sans serif, Script, and Decorative.

This ad uses three different typefaces that work well at contrasting each other: Sans serif, Modern, and Script.

Contrasting Typefaces

The Modern font (identified above) has a little horizontal serif (a slight line or mark that finishes off many of the lowercase letters) as opposed to no serif on the Sans Serif and Script fonts. (Sans means no.) The Modern font also has a thick/thin transition, or contrast, in the strokes whereas there is no thick/thin transition in the strokes of the other two fonts; the letters are the same thickness all the way around. The Script font has the appearance of being hand-written in contrast to the other two fonts. This adds a touch of femininity to the piece. Together, these three different fonts make this advertisement more interesting as they provide contrast to the structure of the piece.

More contrast can be found in the form of the letters. You’ll notice there are all caps in the brand name “AVON” in contrast to upper and lowercase letters in the title and description. These words form different shapes. We have a very block, or rectangular, form in the uppercase word, Avon, in contrast to the up-and-down form of the title with it’s uppercase and lowercase letters. This is repeated in the body of the description with the use of all caps to emphasize the most important words and a combination of lowercase and uppercase letters to form the rest of the description.

There is also a contrast in weight. Avon is in a lighter-weight font, while the title is a heavier font. We have a contrast between the heavier bold words and phrases and the regular print of the description. Contrast in type is not only for decorative purposes, but it also helps enhance communication. In this case, our eyes are drawn to the more important words in bold and the different color fonts. Because “ANEW POWER SERUM” is set in a bigger font, all caps, and a different color from the rest of the paragraph, our eyes are automatically drawn to it. This is obviously one of the most important things on the page and the designer has found a great way to make sure we notice it.

In addition, the contrast between the lighter brown and darker black is effective at drawing our eyes into the most important details, besides making it more fun to look at.

Four Basic Design Elements

Finally, let’s take a quick look at this ad for the four basic design elements: contrast, repetition, alignment, and proximity.

As discussed earlier, the contrast of text (size, weight, structure, form, and color) is very effective at making this ad more interesting and helping us find the most important elements.

The repetition of colors in this piece is beautiful and aesthetically pleasing. The repetition of the brand name at the top and the bottom is very effective advertising. It is the first and last thing we see. We are left with no doubt where to purchase this product.

There is a lot of different alignments going on here, but it works because of proximity. Notice the text is broken into different sections (marked in boxes above). Bunched up like this, each section is seen as one cohesive group and each sentence or word is clearly recognized as being related to those around it. This gives the piece a sense of order. Because each section is clearly separated, each section can have it’s own alignment.

This advertisement is an excellent example of good design principles. Kudos to the designer. There’s a reason we love it!

Design Principle: Proximity

Nissan ad with cars covered in snow.
Original photo found at www.graphicmedia.net

This is an example of proximity in design. Notice the wording (circled in red) is placed close together in the bottom left corner and the logo (also circled in red) is place in the upper right corner. Your eye immediately knows the words in each location go together and are talking about the same things.

This is also a good example of contrast. The bright red logo contrasts nicely with the white cars. The red car stands out, even though it’s covered in snow. The red in the car links your eye to the red in the logo. You automatically know they are connected.

Basic Design Principles

This is an excellent example of the design principles of contrast, repetition, alignment, and proximity as well as a great use of color. An artist from Serino Coyne Inc., a live-entertainment advertising agency, created the famous poster as a result of meetings between ‘Wicked’ producers David Stone and Marc Platt. This information is included in Carol de Giere’s book, ‘Defying Gravity: The Creative Career of Stephen Schwartz from Godspell to Wicked’ [New York: Applause Books, 2008]. Whoever the artist was, they really knew what they were doing. In the following draw-overs, I will demonstrate the different design principles used in this illustration.

Image of Broadway Musical Ad for Wicked
Original photo found at blog.marginmedia.com

First of all, let’s talk about contrast. Notice the opposites of black and white and red and green (complimentary colors that are opposite from each other on the color wheel). Besides being eye-catching, the use of opposites really speaks to the nature of the story–good vs. evil.

Contrast

Second, repetition. The white colors in the white witch are repeated in the title and the green from the green witch is repeated in the smaller words and the little witch that dots the “i” as well as the background. Next the font is the same throughout and the first letters of each word are a little bigger than the rest of the word. This is repeated with each word, bringing continuity to the piece. The flying monkeys provide repetition as there are more than one and the curls and waves in both witches’ hair bring a sense of repetition as well.

Repetition: Colors, Font, Letter size, Curves, Images

The curve of the black witch’s hat is repeated in the curve of the white witch’s hat (upper right corner) and the curve of the black witch’s hat over her eyes seems to be repeated in the curve of the white witch’s hair and sleeve.

Repetition: Curves

Third, alignment. Look how nicely all the lines of the title/text are aligned in a wonderful block style.

Alignment and Proximity

Fourth, proximity. All of the text has been kept close together. We immediately know the text is related. Because it is close together, our eyes are immediately drawn to it.

We all love this picture and for good reason: it incorporates all of the essential elements that constitute good design.