The Organizing Principles
Four principles that, applied together, account for most of what makes a page feel professional rather than accidental.
- Contrast, Repetition, Alignment, Proximity in depth
- Alignment as the foundation of professionalism
- Repetition as the basis of visual identity
- Applying all four to a page layout
In 1993, Robin Williams — the designer, not the comedian — published a small book called The Non-Designer's Design Book. It has since sold over a million copies, which is an extraordinary number for a book about typography, and the reason is simple: she identified four principles that, taken together, explain the difference between a page that looks professional and one that does not. She called them Contrast, Repetition, Alignment, and Proximity — CRAP, as the acronym somewhat unfortunately has it. The name hasn't helped its dignity, but the framework has helped an enormous number of people make better work.
These principles are not Williams's invention. They are a distillation of things that designers had understood implicitly for generations, given clear names and made teachable. That teachability is their value. Before you have names for what you are seeing, design problems are vague and hard to fix. Once you can say "this page has an alignment problem" or "these elements need more contrast," you can act on the diagnosis.
We have already encountered all four principles in the preceding chapters — contrast at length in Chapter 2, proximity and continuity in Chapter 1, composition broadly in Chapter 3. This chapter brings them together as a unified toolkit, deepens each one, and shows what it looks like to apply all four simultaneously to a single page.
· · ·Contrast If it is not the same, make it very different
We covered contrast extensively in Chapter 2, so here we focus on the principle as Williams stated it — in its sharpest, most practical form. The rule is this: if two elements are not the same, make them clearly different. Do not make them almost the same. Almost-the-same is the worst possible outcome in design, because it reads not as a deliberate distinction but as an accidental inconsistency — as though you started to make a decision and lost your nerve.
This shows up most often in type choices. A designer uses two typefaces that are similar but not identical — two different serifs, for instance, or two sans-serifs from related families. The result looks muddled, neither unified nor interestingly varied. The reader senses something is off without being able to name it. The fix is not to use one typeface instead of two. The fix is to make the contrast between them more decisive — pair a serif with a sans-serif, or a heavy display face with a light text face. If you are going to use two typefaces, really use two typefaces.
The same applies to size. A headline that is only slightly larger than the body text creates almost no contrast — it reads as body text that got accidentally enlarged. A headline at twice or three times the body size reads as a headline. If you want something to feel like a different level of the hierarchy, the contrast must be sufficient to make that level unambiguous.
Contrast also applies to space. A slightly larger gap between sections is easily missed. A clearly larger gap — generous enough that the reader feels the pause — is a compositional decision. The principle holds across all dimensions: if you are making a distinction, make it legible.
Figure 4.1 — Almost different versus decisively different. Left: a title and subheading in slightly different sizes of the same typeface — the distinction is too small to read as intentional hierarchy. Right: the same elements with decisive contrast — a large serif title, a small sans-serif label in uppercase, and a clearly distinct body size. The hierarchy is unambiguous before a word is read.
Repetition Repeat visual elements throughout a piece
Repetition is the principle that visual elements should recur consistently throughout a document. If the chapter headings are set in a particular typeface, weight, and size, every chapter heading should be set in that typeface, weight, and size. If the body text uses a particular line-height, that line-height should be consistent throughout. If a particular shade of color is used for emphasis in one section, the same shade should be used for emphasis everywhere.
This sounds like a description of consistency, and it is — but framed as repetition rather than consistency, the emphasis shifts slightly. Consistency is a negative goal: don't be inconsistent. Repetition is a positive one: actively repeat visual elements as a way of unifying the document and creating a visual identity that persists across pages.
The practical power of repetition is that it creates expectation. A reader who encounters a bold italic subheading on page five has already learned, perhaps without conscious awareness, what bold italic means in this document. When they see it on page twenty, they recognize it instantly as a subheading. The recognition is effortless. That effortlessness — the sense that the document is teaching you how to read it, and then honoring what it has taught — is what we mean by a well-made document feeling coherent.
Repetition also applies to spatial elements. If your text block has a specific left margin, that margin should be consistent throughout. If you use a particular amount of space above headings, use it above all headings of that level. If a rule or dividing line appears in one place, any subsequent rule of the same function should match it precisely. These spatial repetitions are less visible than typographic ones, but their absence is immediately felt — the page feels unstable, as though its proportions shift from section to section.
There is a specific form of repetition worth naming: the style system. Rather than making each typographic decision case by case, a style system defines a small set of named styles — heading, subheading, caption, body, label, pullquote — and applies them consistently. In CSS this is exactly what a well-structured stylesheet does. Every h2 looks the same because it is styled once in the CSS, not styled individually for each occurrence. The style system is not just an efficiency; it is a design tool that enforces repetition and makes inconsistency structurally impossible.1
Figure 4.2 — Repetition and coherence. Left: three section headings each styled differently — bold serif, underlined regular, colored sans-serif. The reader has no way to build expectations; each heading requires fresh interpretation. Right: all three headings share the same treatment. The style becomes a signal the reader learns and relies on. The document feels like a single designed object rather than a collection of separate decisions.
Alignment Nothing should be placed arbitrarily
Alignment is the principle that every element on a page should have a visual connection to some other element — that nothing should be placed arbitrarily, adrift from the structure around it. This is, in practice, a principle about edges and axes: every element should share an edge or an implied line with at least one other element.
The most common form of alignment is the left edge. In a single-column document, all body text aligns to the same left margin. Headings, captions, footnotes, and running headers all align to that same margin. The implied vertical line of the left edge runs from top to bottom of every page, and every element connects to it. The result is a page that feels structured and purposeful, even when the reader cannot name why.
The most common alignment error is the almost-aligned element — a caption that starts two pixels to the right of the text column, a headline that is roughly centred but not quite, a page number that floats vaguely near the bottom edge. These misalignments are rarely noticed consciously, but they are felt. The eye is exquisitely sensitive to alignment; even very small deviations register as a low-level visual discomfort, a sense of something not quite settled.
Centred alignment deserves special attention, because it is both the most commonly used and the most commonly misused. Centring is a strong compositional statement. It imposes symmetry, which carries formality and weight. Used on a title page or a chapter opener, it is appropriate and powerful. Used casually throughout the body of a document — a centred caption here, a centred pullquote there — it creates arbitrary symmetry that competes with the structural alignment of the text block. The rule of thumb: centre deliberately or not at all. And when you centre something, centre everything in its vicinity, or the contrast between centred and left-aligned elements creates visual noise.
CSS makes alignment explicit in a way that manual layout never did. You cannot nudge something to approximately the right position — you specify a value, and if the value is wrong, the misalignment is precise and reproducible. This explicitness is, once again, a teaching advantage: it forces you to state your alignment decisions clearly, and to notice when they are inconsistent.2
Figure 4.3 — Alignment. Left: headline, subhead, body text, caption, and footnote each begin at a slightly different horizontal position, creating several competing implied edges. The page feels unsettled without the reader being able to say why. Right: every element shares the same left edge — a single implied vertical line connects everything on the page. The structure is invisible but immediately felt.
Proximity Group related items together
Proximity, as introduced in Chapter 1, is the principle that related elements should be placed near each other, and unrelated elements should be separated. In page design, this principle resolves a surprising number of problems that beginners diagnose as style issues but are actually structural ones.
The most common proximity failure in document design is the orphaned heading — a section heading that sits equidistant between the text above and the text below, belonging to neither. The reader looks at it and hesitates, unsure whether it introduces what follows or concludes what came before. The fix is not typographic; it is spatial. Move the heading closer to what it introduces. The rule of thumb: the space above a heading should be roughly twice the space below it. The asymmetry communicates proximity — this belongs to what follows — without any other change to the design.
Proximity applies to image-caption relationships as well. A caption that floats centrally beneath an image it describes, with equal space above and below, is ambiguous — it could belong to the image, or to the text paragraph below it, or to nothing in particular. A caption positioned close to its image, with a clearly larger gap between it and the next text element, is immediately understood as belonging to the image. No label, no visual indicator, no rule is needed. The space tells the story.
More broadly, proximity is the mechanism by which a page is divided into logical units. A page with several sections of content should have visible groupings — each heading close to its body, each group clearly separated from the next. When the groupings are clear, the page's structure is immediately legible. When they are not — when every element is separated from every other element by the same amount of space — the page collapses into a uniform field and the reader must work to find the structure themselves.
Figure 4.4 — Proximity and heading placement. Left: equal spacing above and below each heading — the heading is spatially ambiguous, belonging to neither the text above nor below. Right: the space above the heading is roughly three times the space below — the heading is clearly grouped with what follows. No other change has been made; the proximity signal alone resolves the ambiguity.
All four together Applying CRAP to a single page
The four principles are not independent. They reinforce each other, and their effects compound. A page with strong alignment but weak proximity still feels uncertain. A page with good contrast but no repetition feels inconsistent. The full benefit of the framework is realized when all four are applied simultaneously, each doing its particular work while the others do theirs.
Here is how they divide the labor on a typical document page. Contrast creates the hierarchy — it tells the reader which element is most important, which is secondary, which is supporting material. Repetition creates the system — it ensures that each level of the hierarchy is visually consistent, so the reader learns the system once and navigates the rest of the document with it. Alignment creates the structure — the invisible grid that connects every element to every other element and makes the page feel organized. Proximity creates the meaning — the groupings that tell the reader which elements belong together and which are separate.
Remove any one of the four and something goes wrong. Remove contrast and the hierarchy collapses. Remove repetition and the system breaks down — each page must be decoded afresh. Remove alignment and the structure dissolves into visual noise. Remove proximity and the groupings become ambiguous, the page's logic unclear.
Figure 4.5 — All four principles on a single page. A single document page annotated to show where each principle is doing its work. Contrast establishes the headline as the dominant element. Repetition ensures both subheadings share an identical treatment, creating a consistent signal the reader learns. Alignment connects every element to a shared left edge, giving the page its structural backbone. Proximity uses the larger gap above each subheading to signal a new section, grouping each heading with the body text that follows it.
A diagnostic checklist Using CRAP to find and fix problems
The real value of having names for these principles is diagnostic. When something feels wrong with a page, you can work through the four principles in order and find the source of the problem with much more precision than "it just doesn't look right."
| Principle | Symptom when missing | First thing to check |
|---|---|---|
| Contrast | The page feels flat; nothing stands out; the reader doesn't know where to begin | Is there one element with clearly more visual weight than everything else? If not, increase the size or weight of the primary element decisively. |
| Repetition | The document feels inconsistent; each page looks slightly different from the last; the reader feels disoriented | Are all elements of the same type — all subheadings, all captions, all body paragraphs — styled identically? If not, define a style for each type and apply it consistently. |
| Alignment | The page feels unsettled or amateurish without an obvious cause; something just seems off | Do all left-aligned elements share the same left edge? Is anything centred that shouldn't be? Look for elements that are almost but not quite aligned. |
| Proximity | The page feels like a list rather than a structured document; sections don't feel distinct; headings seem unattached | Is the space above each heading clearly larger than the space below it? Are related elements grouped together with clearly more space between groups than within them? |
Practice
Take any document you have produced recently — a report, a webpage, a formatted email — and evaluate it against each of the four principles in turn. Don't try to fix everything at once. Start with whichever principle is most visibly absent, make one change, and observe what shifts. Design problems rarely have a single cause, but they almost always have a most urgent one.
Then look at a document you admire — a well-designed book page, a publication you find visually satisfying — and try to identify where each principle is at work. The principles are easier to see in good work than in bad, because in good work they are doing their jobs quietly. In bad work they are conspicuous by their absence.
This chapter brings together a final set of practical organizing tools, but Part One is not quite finished. We have moved from perception — how the eye moves and how the mind groups — through the specific visual properties of form and contrast, through the spatial logic of composition and balance, to these principles of arrangement. One more foundational topic remains: color, which will complete this first pass through the visual elements of design.
Only after that does the book turn to typography. Part Two begins with the thing that is most central to all of this: type itself. Not CSS yet, not Paged.js, not the project document — just the letterform, and why it matters, and what you need to understand about it before you can use it well.