I’m sure you all know William Shakespeare’s Sonnet 18, right? Anyone? Anyone?

It's ok if the nondescript title throws you: the sonnet begins, “Shall I compare thee to a summer’s day?”

Yeah, you know it. This sonnet is one of Shakespeare’s most famous and, like all of his sonnets, it follows a prescribed structure, described below:   

“[there are] fourteen lines in a Shakespearean sonnet. The first twelve lines are divided into three quatrains with four lines each. In the three quatrains the poet establishes a theme or problem and then resolves it in the final two lines, called the couplet. The rhyme scheme of the quatrains is abab cdcd efef. The couplet has the rhyme scheme gg1.” 

What’s that now? This description of a sonnet is written in plain English (a language that Shakespeare himself helped to crystalize into what we speak and read today). However, for some reason, I still don’t exactly understand what the above paragraph is saying upon the first read, and only slightly more on second read. This is where some kind of visual aid would really come in handy, eg:

The Shakespearean Sonnet Structure

Line Rhyme Scheme
01 A
02 B
03 A
04 B
05 C
06 D
07 C
08 D
09 E
10 F
11 E
12 F
13 G
14 G

In the simple table to the left – titled with a large header to describe what data lay below – line numbers are laid out in each row, along with the rhyme scheme of that line, and finally, a third layer (the quatrain) is achieved with color. Though I'm not a big fan of tables, I can at least say that the structure it provides, and  the hierarchy the color helps to instill, definitely makes the sonnet structure more clear that the above, textual description. 

Similarly, if we were to take Shakespeare’s Sonnet 18, remove all formatting, and put everything into one continuous line – title, subtitle, author, author’s dates, and then the poem itself, we’d have this somewhat incomprehensible paragraph:

Screen Shot 2021 01 03 at 9.15.05 AM

Let’s at least use a little hierarchy by proximity and positioning to create some structured hierarchy:

Screen Shot 2021 01 03 at 9.15.12 AM

By separating the elements of title, author, and body, we have achieved at least a bit of logical order. As far hierarchy is concerned, given the context clues, we may be able to guess that each element is the title, author, and poem body respectively. But why leave our audience guessing when we have basic typographical tools at our disposal to convey that meaning? The text above is set in Adobe Caslon Pro, that corporation's homage to the original, eponymous typeface designed by William Caslon in 1734. Like the original, Adobe’s version has a few different weights and obliques (i.e. italics), collectively called faces. With contrasting faces, we can stay within the same typefaces and further increase the visual contrast of each of the three elements:

Screen Shot 2021 01 03 at 9.15.18 AM

Better, but still not quite enough contrast. "Shall I compare..." could just be a part of the previous paragraph. By increasing the contrast with more dramatic scale, and just a bit of color, we can enforce a really strong hierarchy (see below). Notice also that I reintroduced Shakespeare’s original line structure, which clarifies a sense of rhythm (e.g. iambic pentameter and rhyme scheme):

Screen Shot 2021 01 03 at 9.15.25 AM

With even basic typesetting and layout choices available to us in any word processing program, we can go from the formless:

Screen Shot 2021 01 03 at 10.46.00 AM

To the hierarchically structured:

Screen Shot 2021 01 03 at 10.46.08 AM

Other wAys to Achieve Hierarchy

You can think of hierarchy as a kind of grandmother principle achieved thru the careful use of all the other principles. That said, it's actually very simply defined: visual hierarchy is the arrangement, contrast, and overall presentation of elements in a composition such that the relative visual importance of each element is clearly conveyed to the viewer.

By achieving a good visual hierarchy, one simultaneously achieves good content flow, leading the eye from the most important elements to the least. Below are a few elements and principles that can be modulated to achieve a successful visual hierarchy.

In the example below, the poster on the left is broken down on the right to demonstrate where my eye moves as I'm reading through. The thick blue line is the first read-through, whereas the thinner light blue line is the secondary read through. Notice how my eye goes from the top to bottom, but I start from the largest object with the darkest values to the smallest objects with the lightest values. In this case, proximity, position on the page, scale, value, and alignment are all being used to force a visual hierarchy.

GDPE diagrams hierarchy content flow 20 20


Applications of Visual Hierarchy

In traditional prose text, laid out in, say, a book, visual hierarchy isn't necessarily needed as the reader generally is culturally aware of where to begin, e.g. the first letter of the first word of the first line on the page, and which direction to read in. In the West, we generally read from left to right, top to bottom. No further content flow is needed:

spread.jpg

But what if the audience reads only Hebrew, Arabic, Japanese, or – geez, I don't know – Ancient Egyptian hieroglyphs? These languages are all read in directions unfamiliar to those of us in the West. Therefore visual hierarchy is still important, even in basic situations. In the example below – which is hardly basic – there is no real hierarchy, no indication of where we should begin reading; of what is most important, of secondary importance, tertiary importance, etc. No offense to the Egyptian priests who kept this knowledge to themselves, but their understanding of typographic hierarchy kinda sucks.

And what if our audience doesn't read at all (think children's media)? In that case, we need to be creative and decisive in how we present and contrast elements. For an excellent example of how challenging and frustrating a lack of visual hierarchy can be, take a look at the below image from the Where’s Waldo series of visual puzzles:

Can you find Waldo?

Having some trouble? That’s because of one simple reason: lack of hierarchy. In this case, we know conceptually that the focal point of this composition should be Waldo, a goofy guy with glasses who likes to hide. But visually there is no focal point, there is no predominant color, form, or grouping of objects. And because there are so many figures in this composition, there is little to no content flow, so the eye is already struggling to distinguish different objects. As the eminent designer and statistician Edward Tufte wrote in Visual Explanations (1997), "When everything is emphasized, nothing is emphasized."

You can therefore imagine that an excellent way to achieve hierarchy is to begin with a strong focal point, use a lot of white space to facilitate content flow, and to use contrast well to achieve an order of importance:

Leopoldo Metlicovitz, Calza- turificio di Varese poster, 1913.
Leopoldo Metlicovitz, Calza- turificio di Varese poster, 1913.

Hierachy in Layout

Modernists like the Bauhaus or the Constructivists certainly introduced to the design world a whole new way of thinking about visual design, typesetting, and organizing principles. Unfortunately, they didn't get much love outside of the worlds of fine art and avant garde design, and then only for a very limited time. One of the earliest designers to really take many of their principles and make them applicable in a real-world setting was Jan Tschichold (1902–74). 

With his "Elementare Typographie,"  Tschichold described ways in which the asymmetry and uneven spacing so prevalent in the relatively esoteric Bauhaus, De Stijl, and Constructivist movements could be used in good old, mass-media design. The only problem: symmetry is actually a very natural way to create information hierarchy and assist content flow, as the overall gestalt of a piece is easily discernible and balanced. Start unbalancing elements and removing symmetry in a composition, and you start removing its more obvious, ordered structure. 

Realizing that imbalance and asymmetry also create visual interest and interesting content flow, Tschichold accounts for a lack of symmetry with rational use of different type sizes, weights, and proportions; decisive and ordered use of color; respect for alignment grids to associated different elements; and the use of rules, bars, and boxes to enhance structure and balance where it otherwise would be lacking.

Below are a few examples of Tschichold's Elementare Typographie that illustrate how to use asymmetrical principles and typography to achieve hierarchy. You'll notice that many of these conventions are quite obvious and natural to us here in the 21st century. However, back in the 1920s and 30s, Tschichold's neue typographie was nothing short of revolutionary: