Visual hierarchy is the order in which people notice elements on a screen: the main thing first, details later. It’s set by size, font weight, contrast, position on the page and the distance between elements. A grid and a consistent spacing scale make that order predictable, and white space separates one idea from the next — without them, even good copy reads like a solid wall.
After this you will be able to
- Break a screen into four levels of hierarchy and check the result with the squint test
- Keep a single primary accent on a screen by deliberately using size, weight, contrast, position and spacing
- Set up an 8-based spacing scale (4, 8, 16, 24, 32, 48, 64, 96) and align blocks to a 12/8/4-column grid
- Explain how the F-pattern differs from the layer-cake pattern and how subheadings change the way people scan
Know beforehand
Contents
What visual hierarchy is
People don’t read a screen top to bottom, word by word. They latch onto the most prominent thing, decide whether they’re in the right place, and only then move on to the details. Nielsen Norman Group describes visual hierarchy as a way to guide the eye to the most important elements on a page — through colour and contrast, scale and grouping.
Take a service card on a salon website. What should someone see first? The treatment name. Second, the price and duration. Third, the “Book” button. The description and fine print come last, for those already interested. If all five are set in the same size and colour, the visitor has to decode the card on their own — and many simply scroll past.
- 01Level 1 — the pointThe screen heading or main offer: answers “where have I landed?”
- 02Level 2 — anchorsSubheadings, prices, key figures: what the eye jumps between when scanning
- 03Level 3 — contentBody copy, descriptions, lists — read by those already interested
- 04Level 4 — supportingFootnotes, captions, legal terms: available, but not competing with the main point
The tools of hierarchy
A designer has only a handful of levers. What matters isn’t how many, but that each one is used deliberately and means the same thing across the whole site.
Size
- How it works
- Large things are noticed first, so the main thing is made large
- Common mistake
- Too many large headings competing with each other
Weight
- How it works
- Bold stands out within text of the same size
- Common mistake
- A whole paragraph set in bold — emphasis stops working
Contrast and colour
- How it works
- Something bright on a calm background draws the eye
- Common mistake
- The accent colour used on everything: buttons, icons, badges
Position
- How it works
- The top of the screen and the start of a line get scanned first
- Common mistake
- The main action buried at the end of a long page
Distance
- How it works
- Close elements read as a group, distant ones as separate
- Common mistake
- Identical spacing everywhere: unclear what belongs to what
How people scan a page: F, layer-cake and Z
Nielsen Norman Group’s eyetracking research shows that on web pages people scan far more than they read. Among the main patterns for scanning text, NN/g identifies the F-pattern, the spotted pattern, the layer-cake pattern and the commitment pattern.
- F-pattern: the reader takes in the first couple of lines, then slides down the left edge, catching only the starts of lines. It appears when text lacks subheadings and bullets, and NN/g considers it bad for both users and businesses — anything not at the start of a line gets missed
- Layer-cake pattern: the eye moves from heading to subheading, skipping the text below, and stops where it finds what it needs. This is the scanning you want to design for when the page structure is clear
- Spotted pattern: the reader hunts for something specific — a number, a link, a word — and jumps between highlighted fragments
- The Z-pattern isn’t a research finding but a common layout rule for screens with little text, such as the hero: logo top left, menu or button top right, then the eye travels diagonally down to the main action
Text that gets scanned in an F
- Solid paragraphs with no subheadings
- Key points buried mid-sentence or at the end
- Links and numbers not highlighted
- Every line carries the same weight
Text designed for the layer-cake
- A subheading for every meaningful chunk
- The key word at the start of each paragraph and bullet
- Lists, tables and highlighted numbers
- Clear what to skip and what to read
Grids and columns
A grid is the invisible structure of a page made of columns, the gutters between them and margins at the edges. NN/g defines these three as the parts of every grid, and notes that grids improve readability and scannability: elements share a common reference point, so the eye doesn’t have to hunt for where each block begins.
Most websites use a column grid: on a wide screen the page might be split into 12 columns, on a tablet into 8, on a phone into 4. Cards, text and images span a whole number of columns, so they line up with each other across screen sizes. For catalogues and listings a modular grid works well: repeating rows are added to the columns.
The spacing scale: an 8-pt system
When spacing is picked by eye, a site ends up with 13, 17, 22 and 25 pixels — and the page looks sloppy even if nobody can say why. The fix is to agree on a scale and take every distance from it. A common practice is an 8-pixel step with a 4-pixel half-step for small details: 4, 8, 16, 24, 32, 48, 64, 96. Eight divides neatly by two and four, so sizes stay whole numbers even on screens with different pixel densities.
Pick a base step
For most sites and apps, 8 with a half-step of 4 works. The key is a single step for the whole product.
Lock in the scale
Record the allowed values in the design system and in code as named variables, so the designer and the developer use exactly the same numbers.
Tighter inside a group, looser between groups
A label sits 8 from its field, form fields sit 16–24 apart, page sections 64–96. The difference between steps is what creates grouping.
Check it on a phone
On a narrow screen, large gaps between sections usually drop by a step or two, but the “tighter inside, looser outside” ratio stays.
Proximity and white space
The Gestalt principle of proximity says the brain treats things that sit close together as related. NN/g calls proximity one of the most powerful grouping principles — strong enough to override similarity in colour or shape. The flip side: an element pushed far from its group looks unrelated and is easily overlooked.
Hence a simple rule: the space between items in a group should be clearly smaller than the space between groups. A price that sits closer to the neighbouring card than to its own is a classic online-store mistake. White space isn’t “wasted room” that begs to be filled. It’s the boundary between ideas: it lets the main element stand out and makes the page feel calmer and more premium.
- When you squint, one main thing stands out — and it serves the page’s goal
- The text makes sense from the headings and subheadings alone
- Every gap comes from one scale, with no random values
- Each label is closer to its own field than to the next one
- Blocks align to the grid columns at every screen size
- There’s breathing room around the main action
Hierarchy is a decision about what someone will see if they have only two seconds. Everything else should stay out of its way.