Skip to content →

/ˈvɪʒ.u.əl ˈhaɪ.ə.rɑːr.ki/

Visual hierarchy

noun · composition & layout

The deliberate ordering of design elements by visual prominence so the eye is guided through content in order of importance.

What it is

Visual hierarchy is the answer to the question "what should the reader look at first, second, third?" A designer establishes it by giving the most important elements the most visual prominence and the least important the least, so the eye moves through the page in the intended order without conscious effort. The tools are differences the eye reads instantly: size, weight, colour, contrast, position, and the negative space isolating an element from its neighbours.

Hierarchy is the ordered system; visual weight is the property of an individual element that the system arranges. A headline has more weight than body text, so it ranks higher in the hierarchy; a call-to-action is given a saturated colour so it outranks the paragraph around it. When every element competes for attention equally, there is no hierarchy and the reader does not know where to begin — the most common failure of dense, undesigned pages.

A layout with a large heading, a medium subheading, and small body text showing three levels of hierarchy123
Three levels — heading, subheading, body — read in descending order of prominence.

Etymology

"Hierarchy" derives from the Greek hierarkhia ("rule of a high priest"), long used for any ranked ordering. Its application to typography and layout was formalised in the mid-twentieth century by the Swiss school: Josef Müller-Brockmann's grid theory treats hierarchy as the designer's primary means of structuring information, and Ellen Lupton's Thinking with Type devotes a chapter to building it through scale and spatial contrast.

Examples in use

"The page has no visual hierarchy — pull the headline up two sizes and mute the metadata." An editorial designer signals a three-level hierarchy through a modular type scale: display for titles, a mid step for decks, body for text. Interface designers test hierarchy with the squint test — blurring the screen to confirm the most important element still dominates.

See also: Visual weight · Alignment · Modular scale · Negative space · Hierarchical grid overlay

References

  1. Lupton, Ellen. Thinking with Type, 2nd ed. Princeton Architectural Press (2010). ISBN 978-1-56898-969-3.
  2. Müller-Brockmann, Josef. Grid Systems in Graphic Design. Niggli (1981). ISBN 3-7212-0145-0.
  3. Samara, Timothy. Making and Breaking the Grid, 2nd ed. Rockport (2017). ISBN 978-1-63159-261-1.

Sarah Chen

Founder of Grid Maker Pro. Classical portrait painter (BA Fine Arts). Writes about composition, drawing methods, and the art-history claims that don't survive measurement.

Updated · Methodology