Where Visual Hierarchy Comes From

Size, position, whitespace, contrast. Four things decide where the user looks first.

Users don't read your page line by line. They scan it first, then stop at whatever stands out most—and you decide what stands out. Visual hierarchy is built from four things: size, position, whitespace, and contrast. vh-wiki

What you'll run into:

• Everything is on the page, but it looks flat and you can't say why
• To highlight something you reach for bold, borders, and background colors—until it's more cluttered than before
• AI-generated pages give every block roughly equal weight, like a template

Four levers

• Size. Make the important bigger and the secondary smaller. The gap has to be real; two or three pixels is no gap at all.
• Position. Put the important things up top, to the left, and above the fold. Position is more effective than styling, and it adds zero visual noise.
• Whitespace. Give the important things more room around them and isolate them. This is the most underrated lever—adding space is far cleaner than adding decoration.
• Contrast. Pull apart color, weight, and lightness. Weak contrast confuses rather than helps, so go all the way or don't bother.

Prefer position and whitespace first, then size, and save color for last. Color is the most expensive resource you have; each use spends some of it. When everything is a highlight, nothing is.

Why is position the most economical lever? Because it costs no styling at all. Move the primary button from the bottom to above the fold, put the most important title first in its section, and the user sees it without needing to be told. Contrast, by contrast, is the easiest lever to overdo—when every block tries to grab attention with its own color or weight, none of them win. Keep the order in mind: position and whitespace are free and effective; color and bold should be rationed.

How do you know it worked? Squint until the page blurs, or flip it to grayscale. If hierarchy survives without color, it's built on structure, not propped up by color. If it blurs into an even field, there is no hierarchy at all.

Five layout rules

These five are the foundation of every layout—they apply to prototypes, slide decks, and documents alike.

• Proximity. Related things sit together; unrelated things get distance. A heading must stay closer to its own body text than to the block above. If it's closer to the previous block, users group it wrong. Spacing isn't just aesthetics—it expresses what belongs to what.
• Contrast. Distinguish levels with strong differences: size, weight, color. Subtle contrast doesn't work; it only confuses.
• Alignment. Unify how elements line up. Left alignment is the everyday default; centering looks formal but scans poorly. Optical alignment beats physical alignment.
• Repetition. Reuse the same elements to hold a style together. Similar modules share the same structure. Too much repetition becomes visual fatigue.
• Whitespace. Keep the page breathing. Letter spacing, line height, margins, paragraph spacing—all of it is whitespace.

Whitespace has ready-to-use numbers: letter spacing around 20% of font size, line height 120% to 150% of font size, page margins 5% to 15% of page width, and paragraph spacing 0.5 to 1 times the line height.

How to verify

• Squint at it. Blur the page by squinting—the blocks still visible are the highest in hierarchy. If it blurs into an even field, there's no hierarchy, and adding more bold, borders, or background will only make it messier.
• Flip to grayscale. If hierarchy survives without color, it's built on structure rather than propped up by color.
• Ask what this page wants the user to do. The element that answers that question should be the most prominent thing on the page (see One Screen, One Job).

Hierarchy serves a priority judgment. Decide the page's main task first, and hierarchy has somewhere to land; get it right and users know at a glance what to read and what to click.