Why "something is off" is a real perception
Human vision is unusually good at one specific task: judging whether two lines are aligned. This ability — vernier acuity — is finer than the resolution of the eye itself. People can reliably detect an offset several times smaller than the width of a single light-sensing cell in the retina, an effect vision researchers call hyperacuity.
So when a client says the page feels off but cannot point at anything, they are not being vague. They are reporting a measurement your visual system took without telling you about it. Three items with left edges at 40, 40 and 43 pixels will produce that feeling in everyone who looks, and nobody will name it.
Good news, because misalignment is the cheapest fault to fix and needs no taste at all.
Alignment is about edges, and mostly the left one
Every element on a page should share an edge with something else. Not a vague sense of "roughly under" — an actual shared line you could draw.
Left edges do most of the work in a left-to-right script, because the eye's return sweep at the end of every line lands there. A consistent left edge gives that sweep a target. A ragged one makes the reader search each time, a few milliseconds at a time, which is exactly the kind of cost that gets reported as "it is tiring" rather than "line 3 starts three pixels late".
Right edges matter far less, which is why justified text is optional and often harmful: on a narrow column it stretches word spacing until pale rivers run down the paragraph. On a phone-width column, never justify.
Centring is a commitment, not a default
Centred text has no straight left edge at all. That is fine for three lines on a title card or an invitation, where the shape itself is the point. It is bad for a paragraph, and it is worse when it is inconsistent.
The single most common amateur tell in layout: a block where the heading is centred and the body underneath is left-aligned. Pick one axis for a group and hold it. If you centre, centre the whole group, including the little bits — the date, the caption, the price.
A grid is a short list of allowed positions
A grid is nothing more than a decision about where things may start, made once, so you stop making it repeatedly and inconsistently.
The minimum useful version: choose three or four horizontal positions and one gap value, and never invent another. On paper that is a fold: halve a sheet, halve it again, and you have four columns and every combination of them.
Twelve columns became conventional for a plain arithmetic reason: twelve divides evenly by two, three, four and six, so the same grid gives you halves, thirds, quarters and sixths without fractions. That is the entire justification.
Do the same for space. Pick a scale — 4, 8, 16, 24, 32, 48, 64 — and use only those values. You stop deliberating over whether a gap should be 18 or 21, and you get repetition for free.
Free tools: Figma's free tier and Penpot (open source, and it runs on your own machine) both have layout grids and spacing tokens; Inkscape has snapping and guides. A pencil and a folded sheet is not a downgrade — it is faster for deciding structure, and structure is what you are deciding.
Whitespace is a boundary, not a luxury
Margin is what tells a reader where the content ends and the world begins. The commonest crowding fault is an outer margin smaller than the biggest gap inside the layout — the content then appears to be sliding off the page, because the strongest boundary is in the wrong place.
But be honest about the limit here, because design writing is not. Whitespace is not a virtue in itself. A railway departures board, a price list, a newspaper front page and a currency-trading terminal are all dense on purpose, and adding air to any of them makes them worse. Density is legitimate when the reader came to compare many items at once. Whitespace is a tool for grouping and ranking, not a way to look expensive.
Where the maths is wrong and your eye is right
Alignment tools measure bounding boxes. Vision measures apparent mass. These disagree in predictable places, and knowing them is one of the more useful things in this course:
- A circle must overshoot. Put a circle and a square of the same height side by side and the circle looks smaller, because it has less area near its top and bottom. Full stops, bullet points and round logo marks are usually drawn two to five per cent larger than the square shapes they sit with.
- A triangle centred in a circle looks left of centre. The classic play button. The triangle's visual mass sits behind its bounding-box centre, so it needs a nudge right, roughly an eighth of its width. Every media player in the world does this.
- Punctuation hangs outside. Opening quotation marks and bullets set flush with the text edge make the edge look broken, because they are mostly air. Hang them slightly outside and the edge reads straight.
- Text vertically centred in a button sits low, because the box includes descender space that most words never use. Nudging up a pixel or two fixes it.
The general rule: when the number and the eye disagree about alignment, the eye wins. It is the eye that will be looking at it.
Today
Open a layout you have made and draw the alignment lines on top of it — a thin rectangle in any editor, or a marker on a printout. Count the vertical lines. If there are more than four, each one after the fourth needs a reason. Usually two of them are the same line, three pixels apart.
Before you move on