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 good visual hierarchy, one simultaneously achieves good content flow, leading the eye from the most important elements to the least. Below are a few strategies for achieving 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 eye generally knows where to begin, e.g. the first letter of the first word of the first line on the page. 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 layout 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 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 the conceptual focal point of this composition is 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. 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 can help considerably with information hierarchy and 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 creates 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: