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 gg¹.” 

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

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:

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:

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):

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

To the hierarchically structured:

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.

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.

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:

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:

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: