Hierarchy, grid and empty space

Visual hierarchy is the order in which the eye meets the elements of a page, set by size, weight, color and empty space. A grid aligns blocks to columns.

Where a person will look

A visitor doesn’t read a page, they scan it: in two or three seconds the eye picks out blotches and decides whether this is interesting. If you haven’t set the accents, chance will set them: whatever happens to be the biggest or brightest will stand out most. Setting them yourself is what it means to build a visual hierarchy: the order in which the eye meets the elements.

What controls the order:

• size: people notice the big before the small;
• weight and style: bold is stronger than thin;
• color and contrast: a bright spot on a calm background is seen first;
• position: the top and the left edge (for text read left to right) are scanned first;
• empty space: whatever has emptiness around it’s highlighted without any decoration.

The rule is simple: the main thing should differ, and the rest should be quieter. If a page has five equally bright buttons, there’s no main one. That’s why your brief has a single main action: it gets the strongest accent.

Play with a layout of your project. Make the heading enormous and see what happens to the button. Then make the button stand out with color and size. And turn on “squint”: a blurred page shows the hierarchy in its pure form.

Heading: 2.4 rem Space between sections: 24 px (3 × 8) Columns in the grid: 3

Like any link By color By color and size

Squint (blur)

Your project

Your project

A short description: what this is and who it is for. Read more More

Main action

First section

A few lines of ordinary text for the section.

Second section

A few lines of ordinary text for the section.

Third section

A few lines of ordinary text for the section.

The eye will notice this first: Heading.

1. Heading
2. Section headings
3. Ordinary text
4. Main action

The model is simplified: weight grows with size and saturation. On a real page there is a more reliable check: squint, and see what is still noticeable. Right now the main action is lost among the links: the page isn’t asking for it.

Check yourself: what creates visual hierarchy?

Size, weight, color and contrast, position, and the empty space around. The main thing differs, and the rest is calmer.

The squint test

This is the oldest and most honest way to check a hierarchy. Step back from the screen, squint, or blur the page. The details vanish, and blotches and masses remain. If the main action is what stands out most, all is well. If the picture in the header or the logo stands out more, the page is asking the visitor for something other than what you wanted.

Grouping: proximity and similarity

The brain gathers what it sees into groups by itself. Almost all layout rests on this, and the rules are called the laws of Gestalt (German for “form”). We need four.

• Proximity. What stands close together is seen as a whole. A section heading should be closer to its own text than to the previous section. This is the most common mistake: the empty space between a heading and a paragraph is the same as between a paragraph and the next heading, and the heading “floats”.
• Similarity. What is styled the same is seen as the same kind of thing: all the service cards should be styled alike, and the main button should look like nothing else.
• Alignment. What stands on one line seems connected. That’s why aligning to the left edge and to a grid at once makes a page look put together.
• Contrast. An element that differs draws the eye.

A good rule: group with empty space first, and only then add borders and lines. Spacing alone is often enough.

Check yourself: what does proximity do?

The brain treats what stands close together as a group. That’s why a section heading is placed closer to its own text than to the previous section.

Grid and empty space

A grid is the invisible layout of a page: columns of equal width and gaps between them. All blocks stand on the lines of the grid, and that’s why the page looks put together. In CSS a grid is made with the property display: grid, which you studied in the previous part.

Why 12 columns exactly? The number 12 divides by 2, 3, 4 and 6, so 12 columns make bands of a half, a third, a quarter and a sixth. On a phone there are usually four columns: more simply won’t fit.

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.card {
  grid-column: span 4; /* three cards in a row */
}

Empty space comes in two kinds. Small is the spacing inside a component and between lines. Large is the gaps between sections and the margins around the page. Beginners economize and squeeze everything together: it seems the emptiness is wasted. In fact emptiness is what makes the rest legible and “expensive”. Many of the best pages are almost entirely air.

The base step. So you don’t invent spacing anew each time, take one step, say 8 pixels, and make all spacing a multiple of it: 8, 16, 24, 32, 48, 64. Material Design, IBM’s Carbon and Atlassian’s design system build their spacing on a base unit of 8 pixels (or 4 for the small things). Store one value in a variable and work out the rest from it:

:root {
  --space: 8px;
}
.section {
  padding: calc(var(--space) * 6);
}

There’s also line width. Text that stretches across the whole width of a monitor is hard to read: the eye loses the start of the next line. A comfortable length is from 45 to 75 characters, around 65. In CSS you set it with the unit ch (the width of the digit “0” in the current font): max-width: 65ch.

Check yourself: what is a base spacing step for?

So that all spacing is a multiple of one number: the rhythm is even, and choosing is easier. The number is stored in a single variable.

Practice

Build your project’s page so that the hierarchy works. In index.html set the levels: the name in h1, each section as a card with an h2, the main action as a link with the class cta. In styles.css define two values on :root (the spacing step and the line width) and a grid.

When the checks pass, do one more thing, this time with no checks: squint at the preview. If the main action stands out most, you did it. If not, increase its weight or take the brightness off its neighbors.

What was wrong with 2014

In 2014 grids were counted by hand and rigid: 12 columns of 60 pixels and margins of 20, 960 in all. Such a grid didn’t stretch, and for phones you had to make a second one. Today’s grid divides the available width itself, so the grid has become flexible while the principle has stayed the same.