Visual Hierarchy

Visual hierarchy is the art of making the viewer's eye move in the right order. Without it, every element competes and nothing lands. With it, a composition communicates its intended message before a single word is read consciously.

Establish One Dominant Element

Every composition needs a single point of maximum visual weight — the first thing the eye goes to. This is achieved through size, contrast, color, or isolation (whitespace). If two elements have equal weight, neither wins; the viewer's eye oscillates and comprehension drops. Identify the single most important thing in the composition and make it clearly, unambiguously dominant.

Use Three Levels, Not More

Most compositions are well-served by three levels of hierarchy: Primary (the dominant message, seen first), Secondary (the supporting detail, seen second), Tertiary (context, labels, metadata, seen on demand). Adding a fourth or fifth level makes the system hard to maintain and signals that the content strategy needs editing, not more design. When everything is a priority, nothing is.

Size and Weight Are the Primary Levers

Scale is the most powerful hierarchy tool. A headline at 48px over body at 16px communicates a 3:1 size relationship that readers process instantly. Weight (bold vs. regular) within the same type size creates secondary hierarchy within a text block. Color contrast is additive, not a replacement — using color alone to create hierarchy fails users with color vision deficiencies and degrades in single-color contexts.

Whitespace Is Not Empty Space

Proximity and grouping are hierarchy tools. Elements close together are read as related; elements separated by space are read as distinct. Increasing whitespace around an element elevates its importance even without changing its size. When a composition feels crowded and hard to read, the solution is almost always removing elements or adding space, not rearranging what exists.

Apply the Squint Test

Step back (or squint) at any composition until the text is illegible. What remains visible? The areas of highest contrast and largest weight are the dominant elements. If the wrong element dominates the blurred view, the hierarchy is wrong and the solution is to adjust contrast or size relationships, not to add more visual noise. This test reveals hierarchy problems that close inspection misses.

Audit the Reading Path

For any layout, trace the intended reading path (what the viewer should see in order) and then test whether a first-time viewer actually follows it. Common hierarchy failures: subheadlines that outweigh headlines because of color, calls to action buried in low-contrast text, images that dominate purely by size without serving the message. Name the intended order, then verify the composition produces it.