Six Sizes, Not Fifty: Layout and Type

Put a student's screen next to a professional's, with identical content and identical components, and almost anyone can tell which is which within a second — but almost nobody can say why.

Open the two files and the answer is unromantic. The professional's screen uses four spacing values, three text sizes and two weights. The student's uses nineteen spacing values, eleven text sizes and whatever the tool happened to snap to. Nothing was drawn better. One of them was drawn from a system and the other from a series of individual guesses.

That's the good news in this article: the visual layer is the most learnable part of design, because most of it is arithmetic you decide once.

Decide the numbers once

Two lists, made before you design anything, do most of the work.

A spacing scale. A geometric-ish sequence built on a base unit — 4 or 8 pixels is the near-universal choice: 4, 8, 12, 16, 24, 32, 48, 64. Every gap in the interface must be a value from this list. Nothing else exists.

A type scale. Five or six sizes, no more, each with a defined role: page title, section heading, subheading, body, small, caption. Multiply upward by a consistent ratio (1.2 for a quiet scale, 1.5 for a dramatic one) and round to sensible numbers.

Two things happen when you commit to these. The obvious one: consistency, which people read as quality without being able to name it. The less obvious and more valuable one: you stop making hundreds of micro-decisions per screen. "How much space here?" is no longer a question of taste — it's a choice between 16 and 24, which takes a second instead of a minute and can be defended in a review.

Constraints don't limit design work. They delete the part that was never design.

Alignment: one axis, held

Misalignment is the single loudest amateur signal, and it's free to fix.

Left-align by default. Latin and Cyrillic readers return to a left edge on every line; a ragged left edge costs real reading effort. Centre only short things — a headline, an empty state, a dialogue. Never centre a paragraph of body text, and never centre form labels.

Every element should share an edge with something. If you can't say what a thing is aligned to, that's the finding. Interfaces that feel "off" usually have three or four competing invisible axes.

Optical beats mathematical. A circle set to the same numeric size as a square looks smaller; an icon centred by its bounding box often looks off-centre because of the empty space inside it. Trust your eye over the number when they disagree — but only in these specific cases, not as a general licence.

The grid and the line

A layout grid — columns, gutters, a maximum content width — exists to answer "where does this go?" before you ask it.

Two rules that matter far more than the column count:

Line length. Reading breaks down when lines get long, because the return sweep to the start of the next line becomes error-prone. The traditional typographic guidance, stated by Robert Bringhurst, is roughly 45–75 characters per line, with 66 as a comfortable target. On a wide monitor an unconstrained paragraph runs to 150 characters and becomes genuinely tiring — which is why a max-width on text is not an aesthetic preference.

Breakpoints follow content, not devices. Don't design for "iPhone, iPad, desktop" — that list changes every year. Widen the window until the layout stops working, and put a breakpoint there. Your content decides where it breaks.

Type, practically

Typography in interfaces is a short list of decisions, and most of them are settings rather than art.

Size. 16px is the practical minimum for body text on the web — smaller and mobile browsers start zooming and people start pinching. Interface labels can go to 14; below 12 you're designing something nobody reads.

Line height. Roughly 1.4–1.6 for body text; tighter (1.1–1.25) for large headings, because big type needs less breathing room proportionally. Line height that's too tight is the most common typographic error in interfaces, and it makes text look "cramped" in a way people blame on the font.

Weight and size do the work; extra fonts don't. Hierarchy needs contrast, and you get plenty from two or three weights of a single family. A second typeface should be a deliberate pairing decision — one for headings, one for text — and a third is almost always a mistake.

Uppercase needs letter-spacing. Capitals were not designed to sit together; small uppercase labels need a little tracking to stay readable. This is why the uppercase meta-label is a real typographic craft detail and not just a style.

Numbers in tables need tabular figures. Proportional digits make columns of numbers wobble; nearly every decent typeface has a tabular set, and turning it on is one line of CSS.

Space says what belongs together

This is the Gestalt article's proximity principle turned into a rule you can measure.

Space inside a group must be visibly smaller than space around it. Not slightly smaller — visibly. If a heading is equidistant from the paragraph above and the paragraph below, it belongs to neither, and the eye has to work out the structure from meaning instead of from form.

This one rule, applied ruthlessly, fixes most screens described as "cluttered." The problem is rarely the amount of content. It's that everything is the same distance from everything else, so nothing has grouped.

Colour, and designing without it

Even in a monochrome interface, the discipline of colour is worth having.

Design in greyscale first. Build the hierarchy from size, weight, space and position, and only then add colour if you need it. What survives greyscale has real structure; what collapses was leaning on colour to do a job colour can't do reliably.

Never carry meaning in colour alone. Around 8% of men have some form of colour vision deficiency; on top of that, people use dark mode, cheap screens, bright sunlight and printed copies. Every colour-coded state needs a second signal: an icon, a label, a shape, a position.

Contrast is a number, not an opinion. WCAG asks for at least 4.5:1 for body text against its background, and 3:1 for large text and for interface components like borders and icons. Grey-on-grey placeholder text is the most common failure, and it's usually made by a designer on a perfect screen in a dim room.

Density is a decision, not a virtue

The dominant style says "more space, more air." That's right for products used occasionally by people who don't know them, and wrong for tools someone lives in eight hours a day.

The rule of thumb is frequency: occasional use wants generosity, all-day use wants density. A trading terminal, an admin panel or a support console with the airy spacing of a marketing site forces its expert users to scroll for information they need at a glance — that's not friendliness, it's a tax. Dense products earn their density with strong alignment, tabular figures and keyboard access.

In practice

Write your scales down before designing. Spacing values and type sizes, in a file, as a list. Then treat any value not on the list as a bug.

Audit one screen for outliers. Measure every gap. Round each to the nearest scale value. This usually takes twenty minutes and produces the largest visible improvement per minute of any technique here.

Check your line length. Anything above ~75 characters gets a max-width. Do it on your longest paragraph, right now.

Do the greyscale pass. Remove all colour and see whether the hierarchy still stands. Fix it there, then re-add colour.

Fix the nesting. For each group, confirm that internal space is visibly smaller than external. One pass through a page fixes most "cluttered" complaints.

Name what everything aligns to. Point at five elements and say which edge each shares. Anything with no answer is drifting.

Check yourself

Close the article and answer in your own words:

1. What's the concrete difference between a screen built from a system and one built from guesses?
2. Beyond consistency, what does committing to a spacing scale actually save you?
3. Why is a max-width on body text a functional decision rather than a stylistic one?
4. Why should breakpoints follow content rather than device sizes?
5. State the nested spacing rule and explain what it fixes.
6. Why must meaning never be carried by colour alone, and what are the two contrast numbers?
7. When is a dense layout the right answer rather than a lazy one?

In short

• The visible gap between amateur and professional layout is usually a system: four spacing values and five type sizes instead of nineteen and eleven.
• Constraints remove hundreds of micro-decisions per screen and make choices defensible in review.
• Left-align by default, give every element an axis, and trust optical alignment over the number when they disagree.
• Line length of roughly 45–75 characters; breakpoints decided by where your content breaks, not by device names.
• Body text at 16px minimum, line height 1.4–1.6, hierarchy from weight and size rather than extra typefaces, letter-spacing for uppercase, tabular figures for numbers.
• Space inside a group must be visibly smaller than space around it — this fixes most "cluttered" screens.
• Design greyscale first, never carry meaning in colour alone, and hit 4.5:1 for text and 3:1 for large text and components.
• Density should match frequency of use: occasional use wants air, all-day tools want compactness.