Hierarchy and spacing — making a screen readable
A beginner's first screen usually has everything the same size, evenly spaced, and grey — technically complete and completely unreadable, because nothing tells the eye where to look first.
Choose your track
Read this module through your lens
Why your first screen is unreadable
When you place a title, some body text, and a button all at the same size, evenly spaced, the screen is technically finished and practically useless. The human eye needs something to land on first, then a path to follow. A flat screen gives it nothing, so the user has to read everything to find anything.
Beginners usually try to fix this by adding — more colour, more borders, more boxes. That makes it busier, not clearer. The fix is contrast and restraint: make the important thing genuinely bigger and heavier, give everything else room to recede, and remove decoration that is not doing a job.
Three levers create hierarchy: size, weight, and space. Used deliberately, they tell the eye “start here, then here.” That is the entire game of making a screen readable.
Two scales do most of the work
You do not invent sizes and gaps per element — that is what produces the random 7px-here, 13px-there mess. Instead you choose two small scales up front and only use values from them.
A type scale is three or four sizes with clear jobs: a title (say 24), body (16), and caption (13). Pick them once; apply them everywhere. The jump between sizes is what signals importance.
A spacing scale is multiples of a base unit, almost always 8: gaps of 8, 16, 24, 32. Every margin and padding comes from that set. The result reads as calm and intentional because the rhythm is consistent, even though no user could name why.
This is also why designers and developers get along better when spacing is a scale: 8-point spacing maps cleanly to the tokens and CSS the build will use later.
The squint test
Here is the fastest way to check hierarchy, used by professionals constantly: squint at the screen until it blurs, or drop it to greyscale. If the most important element still jumps out when you cannot read the words or see the colours, your hierarchy is working. If everything turns into one grey mush, it is not — and no amount of colour will save it, because colour was never carrying the hierarchy.
This test also catches the beginner trap of using colour alone for emphasis (a blue button on grey). In greyscale that button vanishes. Real emphasis survives the squint because it lives in size, weight, and space first; colour is the final 10%, not the structure.
Run the squint test on every screen before you call it done.
Hands-on exercise
Take a flat screen (or build a simple profile or settings screen in Figma). Write down a 3-step type scale and an 8-point spacing scale. Revise the screen so there is one obvious primary element, all gaps come from your scale, and alignment is consistent. Then drop it to greyscale or squint — confirm the primary element still leads. Keep the before and after.
Second case · a settings row list
The same lesson, a different object
A list of settings rows, every label the same 14px, 10px gaps everywhere, all centred. It is 'done' but the eye slides off — nothing leads.
No hierarchy: section titles look identical to options, gaps are inconsistent once you measure them, and centring breaks the left scan line a list needs.
Section titles to 13px uppercase caption weight, options to 16px, left-aligned, 8/16 spacing scale, dividers only between groups. Now the list scans top-to-bottom effortlessly.
Common failures · spot them fast
The failure gallery
Everything the same size — no first thing for the eye
Random, inconsistent gaps (7px here, 13px there)
Low contrast text (grey on grey) that fails readability
Centre-aligning everything, destroying a scan line
Adding more colour/borders to fake hierarchy instead of size/space
Each of these is caught by a quality gate — keep the cheatsheet open while you work.
Worked example
See the journey
The pattern
Cheatsheet
Cheatsheet
Recipe & shortcuts
Type scale: pick 3 sizes (e.g. 24 / 16 / 13) — title, body, caption.
Spacing scale: use multiples of 8 (8, 16, 24, 32). Avoid arbitrary gaps.
Contrast: vary SIZE + WEIGHT for the primary element; do not rely on colour alone.
One primary action per screen.
Failure modes
- Everything the same size — no first thing for the eye
- Random, inconsistent gaps (7px here, 13px there)
- Low contrast text (grey on grey) that fails readability
- Centre-aligning everything, destroying a scan line
- Adding more colour/borders to fake hierarchy instead of size/space
Key operations
- Set a 3-step type scale (title, body, caption)
- Use an 8-point spacing scale for all gaps
- Adjust font weight and size for emphasis
- Align to a consistent left edge for scannability
Quality gates
- Is there one obvious first thing on the screen?
- Do all gaps come from one small spacing scale?
- Does the primary action stand out by size/weight, not just colour?
- Would the screen still read in greyscale?
Workflow steps
- Decide the one primary element
- Set the type scale and apply it
- Apply the spacing scale to every gap
- Check the greyscale / squint test
Next module
- id_auto_layout — making that spacing hold up automatically as content changes.
Reflection
Reflection card
Active retrieval — answer from memory before re-reading. Saved to this browser.
You've completed this module when…
- A screen revised from flat to clearly hierarchical, before/after.
- A stated 3-step type scale and an 8-point spacing scale used throughout.
- The screen still reads in greyscale (passes the squint test).
Next: id_auto_layout — making that spacing hold up automatically as content changes.
Finish — back to Interaction & UI Design →