Two lines of text 8 px apart read as one thing. The same two lines 48 px apart read as two things with a decision in between. Nothing else changed. That is most of what the eye finishes before anybody has read a word: it sorts a page by distance first and by difference second, and it has an answer to both before the first sentence arrives.
Dara is redrawing the timetable for the pool at a leisure centre in Leeds. Five sessions a day across seven days, printed at A3, pinned in a corridor and read by someone walking past it with a towel. The sheet she is replacing uses one gap value everywhere, 12 px: between a time and the session it belongs to, between one session and the next, and between Tuesday and Wednesday. Every item on it is the same distance from every other, so a swimmer is handed thirty five items and no groups, and has to read all thirty five to find one. The sheet is not ugly. It is unsorted, which is a different fault with a different fix.
Six clusters, and two questions between them
Everything under this topic is one of two questions asked at a different scale. How far apart: composition, grids, and the half of typography that is spacing. How different: hierarchy, colour, and the half of typography that is choosing a face. The sixth, learning to see, is not a third question; it is how you get an accurate answer to either of the first two, which is why it belongs beside them rather than above them.
The division earns its keep the moment something is wrong and you cannot say why, because it leaves you only two moves. Change a distance, or change a difference. Arranging elements so the eye knows where to go and the structure under a page that nobody is meant to notice are the first move at two scales. Making importance visible without saying it and choosing colours that work together and stay legible are the second.
The gap inside a group has to lose to the gap around it
Grouping is arithmetic, and the arithmetic is one line: the space inside a group has to be visibly smaller than the space around it. Visibly means at least double, not a little. Dara's sheet nests four levels, and each is at least twice the one inside it. A session name sits 4 px above the line saying how many lanes are roped off. The time sits 8 px from that pair, which is what makes the three of them one entry. So the sheet runs on gap 8 inside a group, gap 24 between groups, and 48 px where one day ends and the next begins.
On Dara's sheet the step that carries the most is 8 px to 24 px. Below it the eye is told these belong together; above it, that they do not. Get that ratio wrong and no palette repairs it, because colour cannot say two things are one object.
A difference works when it is two properties at once
The second move is difference, and beginners spend it one property at a time. To lift a heading above its paragraph they push the size, 17 px to 34 px, and get a heading readable from the far end of the corridor and a column that has lost a third of itself to it. Change two properties at once rather than one by a lot and it costs almost nothing: 17 px to 22 px, and regular to semibold. The heading is unmistakable and the column is still a column.
Whether the difference is real is checkable in four seconds and the check is free. Turn the file grey and see whether the hierarchy survives. If the sheet goes flat in greyscale, the hierarchy was made of colour, and colour is the property that fails first: in a photocopy, in a corridor lit from one end, and for a reader who does not separate red from green. The pool timetable is photocopied for half the year, so it is built in grey and coloured afterwards, in that order.
Alignment is the same move made by subtraction. Count the distinct left edges. The old timetable had nine, one for each thing that had been dragged roughly into place over four years, and nine starting points read as nine unrelated pieces of paper photographed together. The new one has two, a time column and an entry column, and every item on the sheet begins at one or the other.
The ratio is chosen by the reading distance
Type sizes come from one number multiplied, and which number is decided by how far away the reader is standing rather than by taste. The working pair is a ratio of 1.2 for a page and 1.5 for a poster, and a sheet read while walking past it is a poster. From a 16 px base, 1.2 gives 16, 19, 23 and 28. From the same base, 1.5 gives 16, 24, 36 and 54. Set the corridor timetable on the first and the day name ends up a little larger than the times, which at two metres is not larger at all.
Leading runs the other way against the size. Leading gets tighter as the type gets bigger: the 16 px body sits on 24, half as much again, while the 54 px day name sits on 58, because a line of one word needs no air underneath it and the automatic setting would hand it 65. And one piece of pure arithmetic that almost everyone skips: the optical centre sits above the middle. Centre the day name in its band by measurement and it reads as sliding downwards. Lift it by about a fortieth of the band and it reads as centred. The eye is wrong here in a consistent direction, which is the only reason a rule can be written for it at all.
The stall is knowing the words and never measuring anything
This is where people in the foundations stop making progress without noticing they have stopped. The vocabulary arrives early and it is easy: hierarchy, white space, balance, contrast. All four work as adjectives, and somebody two weeks in can apply them to finished work and sound entirely right doing it. What almost nobody does next is measure anything. The tell is exact, and you can run it on yourself this afternoon: you can say a layout feels unbalanced, and you cannot say which number in it is wrong.
The cure is the one thing under this topic that is a practice rather than a value. Rebuild it at full size and measure where yours went differently. Take a sheet you think is good, remake it at the size it is actually printed, lay the two side by side and write the differences down as numbers: their gap under the heading is 12 and yours is 20, their column runs 62 characters and yours runs 94. Three of those and the vocabulary stops being adjectives. That is learning to see, and how it is trained, and it is the only cluster here whose output is a habit rather than a set of values.
The order
Colour is last because it rescues the least
Each stop repairs less of the previous page than the one before it, so the cheapest fault to carry forward is the one furthest along.
- first, and cheapestDistanceGrouping, alignment, and the gaps that make a group a group01
- 02secondDifferenceTwo properties at a time, checked in greyscale
- running from here onThe measuring habitRebuild something good at full size and write down where yours differs03
- 04thirdTypeWhere most of what looks like a layout fault actually lives
- lastColourAdded to a page that already works without it05
No dates and no durations, because none of this is a schedule. The claim is the order alone: a stop taken early is not early, it is a stop taken against nothing.
Distance, then difference, then colour
That is the order, and the reason is that each one rescues less than the one before it. A page with the right gaps and no colour is finished; a page with a palette and the wrong gaps is not, and no palette has ever repaired one.
Taken backwards it fails in three predictable places. Hierarchy before spacing produces the everything-gets-bigger page: size is the only tool in the box, so every important thing is large and there is no quiet left for anything to be loud against. Grids before spacing produces a grid that nothing sits on comfortably, because a column width chosen before you know your gaps is a number chosen against nothing. Colour first is the common one, and the most expensive: a palette gets picked in the first week and spends the rest of the project being asked to fix distances, which is work colour cannot do at any saturation.
What to open, and none of it is a drawing program
Figma has been the default for screen work since 2019, when it took the seat from Sketch by running in a browser, and its free tier covers everything on this page. The part that matters here is not a drawing tool: select one object, hold down Alt, hover over another, and the distance between them is printed in pixels. Ten minutes of that on work you admire installs the measuring habit above.
Contrast is arithmetic and there is a free calculator for it. The WebAIM contrast checker takes two colours and returns the ratio between them, and it replaced asking somebody across the room whether they could read it. Type is the third: Google Fonts has been free since 2010 and it replaced the per-project licence as the way anybody starting out gets a face worth setting.
What none of this decides is which difference to spend. The two questions tell you that a heading has to differ from its paragraph; they do not say whether the difference should be size, weight, colour or space, and that choice is where the six clusters stop agreeing with each other. The narrowest place to start is the craft that decides whether words get read, because on most sheets, Dara's included, the difference that was missing turns out to be a type decision rather than a layout one. After that the question splits by what the work has to survive: printed once and living on a wall, which is marks, layouts and printed things, or rebuilt every time somebody opens it at a width you did not choose, which is the surface people touch. Neither asks whether the thing should exist, and that has a topic of its own: understanding what people need before designing anything, which is where to go first if nobody has yet said who the timetable is for.