Words matter (or so I’m told). Some of my favorite typographic pieces are the ones that use typography not only to deliver a message but to serve as the compositional foundation that a design centers around. Letterforms are just as valuable as graphic elements as they are representations of language, and asking type to serve multiples roles in a composition is a reliable way to elevate the quality of your work.

It’s a tool you will always have available to you, no matter the project or medium. Regardless of if you have imagery, regardless of how good the copy is, and regardless of the typeface, if you force yourself to think of type as a structural tool, you’ll always be able to add depth to your designs. It forces you to go beyond the fundamentals of typesetting to seek new opportunities for interaction and storytelling with typography, and to consider the formal qualities of every typeface you choose in the hunt for connections between its graphical design and the message you want to reinforce.

I’ve pulled out a few of my favorite designs that use type in this way and grouped them into shared themes so we can analyze the range of techniques different designers have used to let typography guide their work. Let’s dive in!

Type Informing Grid

Using one typographic element to influence other pieces of the design

Let’s start with a great, obvious example. Jessica Svendsen’s poster for Exhibiting Architecture: A Paradox? is one of several breathtaking posters she created for a series for the Yale Architectural program (we’ll be speaking to another one of those posters in a moment).

If we abstract and diagram this design, we can see the way Svendsen lets the vertical lines created from the 3D extrusion of the display type establish the grid that the supplementary text is aligned to. This approach brings a sense of order even within the sweeping lines of the question mark—you can see that the question mark itself hits many of the same grid lines that are organizing the lower section. This structure unifies the two halves of the design despite the massive difference in style, perspective and scale. This modernist style of poster quite often has “hero” graphical elements or typography and gridded type above or below, but I haven’t seen many examples that build connections between the primary and secondary elements to the degree Svendsen does with this piece.

The interplay between dimensional space and the flat-plane type below adds a sense of movement, space and scale to the design that would be lacking if the hero type was also flat.

Lessons to remember

One object can be the fulcrum for your design’s structure
Design can often be tackled in a cascading fashion. If your design is best served by a single focal point, solve for that, then decide how your type and secondary elements can relate back to that focal element.

It’s not just the type you choose, but the way you present it
Type doesn’t have to exist on just one plane, or be rendered in one dimension or in one texture. Seek ways to add variety to the aesthetic elements in your typographic work, and don’t forget to build bridges between the different styles you use.

Eric Hu is masterful at combining typefaces and there’s often more order in his compositions than might be evident at first glance. This poster showcases two typefaces — the spindly, italicized Glossy Display, and an awkward grotesque (note how short the numerals are compared to the letterforms) that’s typeset in a way to exaggerate its awkwardness. There are several ways that Hu uses the italics here to establish structure and connect the two styles of text. Starting at the top half of the design, we can see that care is taken to match the leading of the italic to the full height of the grotesque, and in the bottom half the numerals are placed in the space that is create alongside the descending “g” in “Virginia.”

Abstracting the type can help us see the underlying skeleton of the composition. The dots in the italic are perfectly round and feel overly mechanical and precise compared to the liquidity of the rest of the lettering. Because they bob up to the cap line they feel almost completely disconnected from the petite lowercase characters sunken below. They confuse the eye — which typeface do these belong to? — and bridge the two layers while serving as both letterform elements and points in space to unify the composition. It’s also a cheeky way to introduce geometry to a strictly typographic design, alongside the “+” and the squared colon. It’s a valuable reminder that typefaces contain a great deal of symbols that can serve pure graphical purposes.

Working in this way allows you to focus on one grouping of text to begin your design, and then trying to play against it as you build out layers of complexity. Because Hu already has same-color text overlapping in this design, he very easily could have chosen a more chaotic approach and embraced that interplay and tension, but instead he chose to use the positive as well as the negative spaces created by the italic phrases to complete the design. The result creates a clearer foreground/background relationship between the two typefaces and feels polished while still having the “mistakes” and messiness that prevent it from feeling overly formal or precious. This is an excellent example of “Making and Breaking the grid.” The areas where the type clashes and overlaps are more impactful because of the restraint shown in other areas of the poster.

Lessons to remember

Make cascading typographic decisions
I love that this design shows how you can work in this fashion without needing to have that “hero” element in a design. Sometimes it’s just as simple as deciding on the rough placement, leading and color of one phrase in a design and letting it be the first in a series of small decisions that ultimately lead to your end design.

Seek out ways to blend typographic elements to unify different typefaces in the same design
The way Hu uses the dots in Glossy Italic to interplay with the grotesque is really wonderful, and it’s a good reminder that many typefaces of disparate styles have little details that blend from one typeface to another. Remember what a powerful device that can be when you are mixing typefaces.

Bigger isn’t always better
Type can inform grid and structure even with imagery present, or when two typefaces of similar hierarchical importance collide. Don’t assume this can only be done with monolithic display type.

No designer practicing today uses type to inform composition more often and with greater skill than Jessica Svendsen. If you read the Font Review Journal, you’ll know I’ve already written a great deal about this example, which is one of my favorite pieces of typographic design. Svendsen is using Maelstrom — a reverse-contrast slab-serif — as the spine of the design, but she didn’t settle for what the typeface gave her out of the box.

The poster is peppered with subtle edits to the typeface to reinforce a grid both within the display type and also to inform the type elements cascading around the edges of the design. Before we get into that, let’s start by discussing an even more foundational decision: to right-align the text. If you take Maelstrom and stack the letterforms in the same way as the poster, but left-aligned (below, far left), it doesn’t feel particularly satisfying, does it? It creates a lot of trapped space—like to the left of the A and under the arm of the Y. Swapping to right-alignment allows for much more interesting areas in the margins, driven by the “scoop” created by the Y pulling the left edge in and the A expanding back out a few lines later. This sculpting is also likely what led to the choice of pulling the last two lines of text away from the right edge—it’s the only way the A could have a clean transition from the L above it.

Svendsen lets the shaping of the display type guide the composition around the edges. “2014 FALL” fills in the negative space under the spread arms of the Y, and the A is used to seal off the bottom edge of the left half of the composition.The circular Y badge tucks into the H and prevents another instance of trapped space.

I spent some time overlaying “out of the box” Maelstrom against Svendsen’s final design so I could get a sense for the modifications she made to polish the design, and it’s a master-class in how much sweating the small stuff can improve an idea while also solving practical issues (my recreations are only meant to serve as approximations of the original piece, they are sloppy and imperfect in comparison). The red is Maelstrom, the blue is Svendsen’s version, and you can see the differences in the overlaid version where there are hits of either color.

The leg of the R has been pulled in to alleviate the fact that this is the widest pair of characters and to bring it in alignment with the CH, creating a solid base for the scaffolded type. The outer edges of the slab serifs have been subtly sculpted so each line has a clear relation to the one above and below it.

She removed or repositioned many of the “flag” details that Maelstrom boasts in order to create more negative space and maximize the air flowing through the design which prevents it from feeling overly dense — a different typeface would have the effect of creating a wedge through the middle of the design and remove any possibility for a relationship between the two halves.

The line breaks in the tertiary type that drips along the margins are occasionally informed by the display type, most notably in the top right, where the LECTURES subheading pivots off the serif on the A (this is more noticeable in the abstracted diagram). This is a particularly serendipitous decision, because that subheading is important for setting the context for the poster—it introduces half of the scheduling for the series. The way the A’s serif juts over guides you to the subheading and prevents it from getting lost in the wash.

Lessons to remember

It’s not enough to choose the right typeface
It took a lot of work to make Maelstrom successful in this poster. So much of typographic work is getting intimately familiar with different typefaces and giving yourself the space to try unusual things with them. I used the term “sculpting” a few times to describe this poster, and I think that’s a great way to describe typography in general. Every typeface, even the ideal one, is just a starting point. It’s up to you to optimize it.

Use display type as the scaffold for the rest of the design
If you’re committing to large, display type in your design, let its form guide the rest of the composition. Take what it gives you then figure out how to work within the creative limitations it leaves you with.

Type as Representation

Rendering type as a manifestation of an object or ideal

Type as structure can also serve metaphorical purposes and visually represent the text in a way that goes beyond page composition. Let’s start with an obvious example. In this ad, designed by Donald Egensteiner, the word “Tonnage” is treated is a way that implies it has actual weight. Type is given a physical presence in its environment and uses real-world ideas to affect the behavior of the rest of the type, thereby making it more relatable and reinforcing the idea. Obvious, but effective.

More Svendsen work! This illustration is the lede for a review of 21 Lessons for the 21st Century. She uses the type to create an overwhelming sense of vertigo, as if you are looking up from inside a monolith (kudos for sneaking that 21st word into a four-sided design, Svendsen). This is an interesting challenge for a type illustration—out of the hundreds of ways you could set this collection of words, how could you do it in a way that convey their importance? I love that big issues get treated as such in this piece. Her choice to skew the type instead of other techniques like stack and scale gives the type a more imposing, physical presence that’s disorienting and appropriately represents the seriousness of the subject matter.

This cover for Marken, Zeichen, Signete uses progressive scaling, rather than skewing. This technique creates more of a looking “in” rather than “up” effect, and it’s most commonly executed by scaling and repeating the same word on each side. The repetition can be powerful, but it wasn’t going to allow for the varied phrases and lengths that the 21 Lessons piece needs.

Lessons to remember

Use techniques that serve the content you have
It’s easy to get overwhelmed by the seemingly infinite malleability of type, and the countless ways any given problem can potentially be solved. But the best typographic designs are the ones that commit to simple concepts, and spend the majority of their efforts on the executional details that follow.

Lou Dorfsman was the master of using typography as the skeleton a design could be shaped around, and one of my favorite examples of this is this ad. The escalating “ha’s” represent the share of comedy ratings between the three major networks, and Lou chooses to dunk on them with the presentation in addition to the savage copy. The fact that this reads as laughter (“ha ha ha”) and that CBS has the last laugh is pure brilliance. Though this idea could have been conveyed with simple charts — Dorfsman created similar ads combining imagery and charts for other subjects — the typography greatly enhances the message here.

The flat vertical sides and clean hairline serifs of the Modern-style lettering helps the type read as a bar chart while still being playful and expressive, which suits the subject matter. The delicate serifs also allow Dorfsman to align the diagrams beneath each bar in the chart to the stems, rather than the serifs, which gives them a sense of heft they’d otherwise lack and makes the composition feel more organic, rather than rigid.

I also want to point out how everything about the way the text elements under the right column are sized and positioned reinforce how massive the last “ha” is. Even if you were to take everything out of the design but the type, CBS’s “ha” would feel supernaturally large compared to the others. There’s no doubt who the hero of this story is.

Lessons to remember

Point/line/plane design fundamentals can be accomplished with type
Don’t forget the power that lines and blocks of type have in relation to each other. This ad could have been just as effective even if Dorfsman had only used 5 typographic elements. Every bit of type is used to support the core concept of the ad.

Type choices matter
This design would have been far less successful with nearly any other genre of lettering. Sometimes you can safely allow a typeface choice to dictate your execution on a design, and other times you need to establish your concept then craft your typeface choice to fit within the structure you’ve already decided on.

Type can be messaging as well as serve graphic purposes
This scale comparison technique is one Dorfsman used throughout his career, but I don’t think it’s a coincidence that this example, which uses type rather than form or imagery to convey the ratings differences, is by far the most beloved and successful. Type carries so much meaning, both in the language it communicates and the form it is designed in. Whenever you’re considering using shapes or images to express a thought, challenge yourself to try replacing that element with type and see if something special happens.

This poster Noah Baker made for Medium’s Q3 2018 goals has multiple conceptual and structural surprises: The presentation of each row mimics an old-school calendar, it reinforces the “month over month” goal by literally setting the months on top of each other, and the message of 15% growth—the point of the poster—is the spine which the design sprouts from. The individual elements of the poster are all handsome in their own right, the message of the design is obviously communicated, and it’s legible from a distance. But the strength of tying the message to a simple concept through composition and typography is what makes it a special design accomplishment.

Lessons to remember

Simple ideas can have huge impact
This poster is a great example of not overthinking the concept or execution of a design. Something doesn’t have to be “unique” or complex to surprise you—the designs that stand the test of time are those that are wholly committed to their core idea.

Wang Zhi-Hong is one of the most accomplished designers practicing anywhere in the world, and his book cover designs are frequently composed using only typography. This example brilliantly leverages the geometry of Futura to create a repeating pattern of C’s that represent the titular crowd. Each C seems to embrace the next, and while the design is orderly, it still provokes the claustrophobia of a crowded space.

Lessons to remember

Geometric typefaces can be powerful tools
Typefaces like Futura that are informed by geometric shapes can become powerful stand-ins for circles, triangles, and other basic shapes. They tend to be more graphic and can be evocative and impactful as simple forms as well as words and letters.

Use orderly typefaces for disorderly ideas
Pairing a crowded composition with “loose” or irregular typefaces can distract from the concept you are trying to convey with your composition. Let simple, “straight-man” typefaces bring some familiarity and clarity when things get busy or cramped.

Reinforcing Imagery

Type can extend the impact of imagery in a design

Type isn’t the focal point of this Nike design, but it’s used here to reinforce the movement of the photography. On the left, pushing the C to the left and laying the Nike logo alongside evokes the way the figure’s arm is thrust back as he sprints in the photo below. The image is cropped to expose just enough of the runner’s legs to let you know his right leg is raised and forward, and the left is extended behind, and the splitting of the 8 85 underneath serves as an abstracted representation of his posture.

On the right, the centered typesetting and the placement of“885” on its own line above “New York” sets the mimics the composition of the photograph. The widened “New York” evokes a stretch of road, and the ovoid round badges that anchor the design could be read as feet.

Lessons to remember

Every character can communicate something
This design is a great example of getting a lot of impact from just a few typographic elements. Fewer elements mean that each one needs to carry more weight, and the best “simple” designs are ones that squeeze eery last bit of conceptual and compositional value out of every piece on the page.

Use typography to support photography
Don’t force separation between your typographic composition and your imagery. Seek out ways to create interplay between different types of visual languages. You can overlap text and image, or extend the elements in an image outside of its frame to marry different types of components in a design.

Pin-Up Magazine keeps its typeface choices simple and chooses instead to get typographic drama out of the painterly ways it is set en masse. Articles are often creatively evoking details from the photography in the magazine, such as the lighter square of text in the left example above, which mimics the light grey square of fabric on the mid century bench in the photo opposite of the spread. Likewise, the margin-less, columnar type in the example to the right is an obvious reference to the tall, slender columns in the photograph it’s supporting (there’s also a cheeky reference to the hat on the opposite spread in the caption set in the lower left corner).

Lessons to remember

Remember the power of type en masse
While many of the examples in this essay rely on scale as one formal element to give type its impact, it’s important to remember that longform, small copy has huge potential to amplify storytelling and messaging. Body copy doesn’t have to be boring, and you don’t have to sacrifice legibility to have fun with how you set it.

You don’t need “impact” typefaces to make interesting typographic choices
Pin-Up magazine is set entirely in Arial, and it’s an interesting constraint which forces designers to create drama and interest in other compositional ways. Try limiting yourself to stodgier typefaces for a while and see if you’ve been using eccentric designs as a crutch, compensating for a lack of creativity in other aspects of typesetting.

Large Type Does Not Mean Structural Type

Big type can be lazy type

Lastly, I wanted to show a few examples that aren’t good examples of type as structure. While a display typeface set large can have a graphic impact, its ability to go the next step beyond is limited if it lacks the conceptual layers of the other pieces discussed. In a weak example, if there is secondary type present, it’s not being strongly informed by the larger type, nor is the stylization or composition of the type reinforcing any bigger point of view. Social media spaces are full of this “bad typographic candy”—pieces that are simple exercises mimicking popular styles, with no meat on their bones.

This design by Attico 36 is using our old friend Maelstrom alongside an outlined condensed sans to fill the composition, but none of the elements are speaking to each other in any interesting way. We can do better. You can make passable designs by filling compositions with interesting type pairings and imagery, but you can’t take the next step into maturing your work until you stop to maximize every detail of your typography.

There’s something freeing about starting a design with a commitment to only using type and words to communicate effectively. I hope this essay demystifies some of the thought processes that can go into improving how you handle type in a variety of situations and leaves you with a different perspective on the pieces discussed, as well as a new toolkit of process-starters for your design work going forward.

Working with type is a lot more fun when you’re worrying less about rules and instead are constantly trying to form new connections with words. Treat every paragraph, line and letter as an opportunity to make your work better, and I promise you’ll have more fun with typography, and your work will be stronger as a result.