Lessons in Typography: Multi-Word Presentations
- Logo, Headline, and Word Graphic Fundamentals
- Emphasis Strategies
- Type Against Backdrop
- Logos That Integrate Type and Icon
- Layouts and Graphics
- Enclosures and Assemblages
This chapter is from the book
This chapter is from the book
This chapter is from the book
Logo, Headline, and Word Graphic Fundamentals
Typography as it applies to solitary letters and individual words was the focus of this book’s earlier chapters.
Here, the topic is words. Plural—as in words that show up in logos or as headlines or word graphics within layouts. And more words means more opportunities for creative expression—which is always good news for designers, right?
Naturally, topics like typeface selection, the thematic effects of font choices, type-plus-images strategies, and legibility concerns will be talked about in the pages ahead—just as they were in earlier chapters.
New here will be discussions of baseline configurations (straight, slanted, curved, and so on) as they apply to both single and multiple lines of type, size relationships between words that appear together, and strategies involving using different fonts within multi-word designs.
And lastly, because this chapter often deals with assembling multiple typographic elements into cohesive designs (sometimes with imagery, too), it also gets into a discussion of visual hierarchy. Visual hierarchy is the apparent pecking order of a composition’s elements, and it can be a real make-or-break factor when it comes to the aesthetic impact of logos and word graphics. (You’ll also find visual hierarchy talked about quite a bit in this book’s final chapter, Text and Layouts, beginning on page 182.)
Simple and effective
)
Before getting into more involved type and type-plus-imagery solutions for logos, headlines, and word graphics, a reminder: Some of the most elegant and effective typographic solutions are also the simplest.
Each of the logos shown here are made from the characters of a single typeface, and each is presented without any kind of special effect, backdrop, or add-on imagery.
Font choices, font voices
Going along with the notion that the man named Aesop lived and wrote fables about 2000 years ago (an assumption that’s been debated by historical scholars for many, many years), a quote from his fable The Jay and the Peacock is presented here through eight different typographic voices.
The two samples shown above are featured in fonts that might be seen as expected choices for time-tested words of conventional wisdom—in the minds of many viewers, anyway.
A casual brush-style font injects the type at top with notes of playfulness, good-natured wit, and kitschiness. This projection of personality is clearly different than that coming from any of the other quotations on this spread—a claim that could also be made by each of the other quotations individually.
The ultra-bold Helvetica used for the lower example delivers the quote’s message with an emphatic feeling of absolutism.
Ponder for a moment how each of the quotes presented on these two pages might fit into a layout, what kind of imagery that layout might include, and what the piece’s overall message might be. Quite a range of differences, aren’t there?
At top, two weights of the same contemporary serif font lend different levels of inflection to the quote’s words—much like a speaker’s voice might be used to affect certain aspects of a verbal message.
At bottom, two typefaces that clearly don’t have any sensible business being seen together work as one to add inferences of a hidden meaning or an inside joke to this presentation.
If the highly unorthodox typeface featured at top were applied to this quote, and if the quote were part of a layout, then viewers might feel strongly compelled to read the layout’s text in search of an explanation.
The lower font, being heavily biased toward an era of bygone grooviness, might be just the thing needed to convey these words if they happened to be paired with imagery and/or text that was similarly themed.
The lesson of all these samples? The moral of the story? Take at least as much care choosing your fonts as you do your words.
Combining fonts
)
You can find much advice about combining fonts: what works and what doesn’t. Here’s this book’s straight-up recommendation on the matter: Decisively aim for either clear and obvious connections or clear and obvious differences when combining typefaces.
The example at the middle top is a demonstration of conspicuous visual harmony between fonts. Each word of this design (and the two dingbats as well) share a common ancestry as part of the extended Bodoni typeface family.
On the other hand, the lower three examples all depend on obvious differences for the successes of their font pairings.
This sample, too, works well both visually and stylistically because of pronounced differences between the script, display, and blackletter fonts it uses. Marked differences in the sizes of the design’s words also contribute to its expressive conveyances of diversity and energy.
Spend plenty of time on the computer trying out different combinations of fonts when working toward results like these. Experiment also with size relationships and color variables within your design. Give yourself plenty of possible solutions to choose from before deciding which ones are most worthy of further development.
Multi-font failings
)
The upper sample in this column pairs two sans serif faces: Futura Light and Helvetica Bold. Don’t do this. As typefaces, Futura and Helvetica are not nearly different enough to be used together.
And the lower sample—even though it uses adequately different typefaces (Helvetica and Garamond)—presents its fonts in weights that are far too similar.
Fixes? Solutions? The upper sample could only be cured by going with a light/bold combination of fonts from just one typeface. The lower assemblage could be saved simply by applying notably different weights to the two fonts it features.
Breaking lines
)
Some of the most important logo-building considerations are also the easiest to overlook. Line breaks, for example.
Line breaks are the points at which multiple words are broken down into more than one row of type. A logo doesn’t necessarily need to have any line breaks (as demonstrated in the middle example above), but designers often apply breaks to help direct attention to a certain word or a group of words within a logo, and also to shape the footprint of a design into something other than a long horizontal rectangle.
Explore all kinds of ways of breaking lines when designing logos. Different sets of words provide unique compositional possibilities in this regard: Some line-break strategies may present positive design opportunities (like a functional overall footprint) while others might create insurmountable compositional challenges (like a line of type that is way longer than any of the others in a design, and for no good reason).
In addition to trying out different line breaks for type you’re wanting to stack, investigate different weights and sizes for the words within your design. Weight and size attributes can also help put sought-after notes of emphasis where they belong.
Would the logo you’re working on benefit from a footprint that’s neither overly tall nor exceedingly wide, such as proportions that might lend themselves easily to a wide range of printed and posted applications? If so, try out line breaks, font weights, leading solutions, and justification settings* that help shape your design accordingly.
Nontraditional line breaks
Say you’re working on a logo for a creatively aligned organization. An artists’ cooperative, for example. Wouldn’t it make sense—given the presumably open-minded nature of the organization’s members—to explore unlikely and nontraditional solutions while you’re at it?
What about offering at least one idea that dismisses some of the so-called rules of typography when presenting designs to the client? What about, for instance, applying non-traditional line breaks to the words you’re working with, and using color-based cues to help viewers decipher what they’re reading?
Baseline considerations
)
Typographic baselines usually sit straight and level. But they don’t have to—particularly when it comes to presenting words within logos and word graphics.
In addition to being horizontal, baselines (and ascender lines, too) can be vertical, slanted, curved, bent, or broken. They can also follow the form of a circle, a rectangle, a triangle, or an abstract shape.
Illustrator and InDesign offer several ways of altering the orientation, direction, and flow of baselines. Learn how to use these software features fluently so you’ll be able to quickly and easily bring your ideas to life when aiming for out-of-the-ordinary baseline configurations.
Getting lucky
Here’s something worth keeping your eyes open for: situations where a word with a certain number of letters is being paired with a word that has either one more or one less letter. In these cases—and with the help of some wide-open letterspacing—you might allow baselines and ascender lines to overlap to produce an unorthodox and visually compelling arrangement of words.