Seeing Like a Designer
Before you can make good decisions about a page, you have to learn to read it differently.
- How the eye moves across a page
- Gestalt principles: proximity, similarity, continuity, closure
- Figure and ground: the role of negative space
- Learning to see what's wrong before you know why
Most people read a page. Designers read it twice — once for content, the way everyone does, and once for something harder to name: the feeling the page makes before a single word has registered. Whether it feels crowded or open, assured or anxious, easy or effortful. This second kind of reading is not instinct. It is a learned skill, and like most learned skills, it begins with knowing what to look for.
This chapter is about developing that second reading. Not about CSS, not about typefaces, not yet about any specific technique. About the perceptual habits that underlie every design decision you'll ever make — habits that, once formed, cannot be unlearned. You will start to notice things on menus and signage and book covers that you previously walked past without seeing. This is the price of design literacy, and it is worth paying.
We begin where all visual perception begins: with the eye in motion.
· · ·How the eye moves across a page
The eye does not read a page the way a scanner reads a document — steadily, left to right, top to bottom, taking in everything with equal attention. It moves in rapid jumps called saccades, landing on points of interest and skipping over everything in between. Between jumps, it pauses in fixations — moments of actual perception that last roughly a quarter of a second each. What the eye fixates on, and in what order, is not random. It follows a logic, and that logic is what design either works with or against.
Contrast attracts fixation. A large headline pulls the eye before a block of body text. A dark element on a light background is seen before a light element on the same background. An isolated word floating in white space draws more attention than the same word buried in a paragraph. These are not preferences — they are the mechanics of how the visual system prioritises information, hardwired into our neurology, where noticing what was different from its surroundings has always been a matter of survival.
On a well-designed page, this is not left to chance. The designer controls contrast, size, placement, and isolation to create a deliberate reading path — an order in which the eye is guided from element to element. A page without this deliberate structure doesn't have no reading path; it has an accidental one, and accidental reading paths are usually bad ones. The eye lands on the wrong thing first, loses its way, or simply gives up and moves on.
This is the first thing to look for when you assess a page: where does your eye land first? Then where does it go? Is that the order the page intends? If you have to work to find the most important information, the design has failed at its most basic task.
Figure 1.1 — Reading paths. On the left, elements of similar visual weight produce no clear hierarchy. The eye wanders, finding no obvious starting point. On the right, a deliberate size and contrast hierarchy creates a reading path — the eye follows in roughly the intended order without any conscious effort from the reader.
Gestalt principles The laws of visual grouping
In the early twentieth century, a group of German psychologists made a series of observations about how the human mind organises visual information into coherent wholes. They called this tendency Gestalt — a German word meaning roughly "form" or "unified whole." Their core insight was this: the mind does not perceive a collection of independent elements. It perceives relationships between elements, and it does so automatically, before any conscious analysis takes place.
For designers, the Gestalt principles are not abstract psychology. They are practical tools — descriptions of the mechanisms you can use to control how a reader groups and interprets the elements on a page. There are several Gestalt principles, but four are most immediately relevant to typesetting and layout: proximity, similarity, continuity, and closure.
Proximity Elements close together are seen as related
The principle of proximity states that elements placed near each other are perceived as belonging together, regardless of whether they share any other visual property. This is perhaps the most powerful and most frequently misused principle in page design.
Its application in typesetting is everywhere once you start looking. A heading that sits equidistant between the paragraph above it and the paragraph below it doesn't belong to either — it floats, unattached, creating visual ambiguity. A heading that sits closer to the paragraph it introduces is immediately understood as belonging to it. The spacing alone communicates the relationship. No other visual cue is needed.
This is why, in professional typesetting, the space above a heading is always larger than the space below it. The asymmetry is a proximity signal: the heading is close to what follows, distant from what precedes. Many beginners do the reverse — applying equal spacing above and below — and produce layouts that feel vaguely disconnected without being able to explain why.
Figure 1.2 — Proximity. Left: dots equally spaced — the eye perceives a single undifferentiated field. Right: the same dots with unequal spacing — three columns appear without any change to the dots themselves. Only the space changed. This is the principle of proximity at work.
Similarity Elements that look alike are seen as related
The principle of similarity states that elements sharing visual properties — shape, size, color, texture — are perceived as belonging to the same group. Where proximity works through spatial arrangement, similarity works through appearance. You can use it to create relationships across distance: two elements that look alike feel connected even when separated by other elements.
In typesetting, similarity is the basis of visual consistency. All the body text in a document looks the same — same typeface, same size, same weight — and the reader perceives it as a unified class of information. All the headings look the same, and the reader perceives them as a class distinct from body text. The system of visual similarity tells the reader, without any explicit instruction, how to navigate the hierarchy of the document.
Disrupting similarity is how you create emphasis. A word set in italic in a paragraph of roman type stands out because it breaks the similarity of the surrounding text. A single sentence set in a different weight signals that this sentence belongs to a different category. Used sparingly, this is powerful. Used frequently, it is noise — the emphasis cancels itself out, and the page becomes incoherent.
Figure 1.3 — Similarity. Left: shapes of similar kind are grouped together by the eye — circles form one implied column, squares another, despite equal spacing between all elements. Right: in typography, similarity of weight and size creates the visual distinction between headings and body text.
Continuity The eye follows paths and edges
The principle of continuity states that the eye prefers to follow smooth paths and continuous lines rather than abrupt changes in direction. When elements are arranged along a line or a curve, the mind perceives them as a unified sequence and follows them in order.
In page layout, continuity is the reason columns work. A vertical column of text creates an implied line down the left margin, and the eye follows it from line to line without any conscious effort. It is also the reason ragged-right text (where lines end at different points) is easier to read than justified text that has been poorly spaced: the consistent left edge creates a strong line of continuity, while uneven word spacing in justified text can introduce rivers of white space that create competing visual paths through the text.
Continuity also explains why alignment matters so much. When elements share an edge — a left margin, a top edge, a baseline — they form an implied line, and that line organises the page. When elements are misaligned, the eye is pulled in different directions, creating a low-level visual tension that the reader feels as disorder even if they can't articulate why.
Figure 1.4 — Continuity. Left: the eye follows smooth curves through a crossing, reading each arc as a continuous path rather than two angles meeting at a point. Right: consistent left-alignment creates an implied vertical edge — a line of continuity — that organises the column and gives the eye a path to follow down the page.
Closure The mind completes incomplete shapes
The principle of closure states that the mind tends to perceive incomplete shapes as complete, filling in the missing information to produce a whole form. We see a circle made of dashes as a circle; we read a word with a missing letter if context makes its identity clear. The mind actively constructs perception, not just passively receives it.
Closure is why white space works in layout. A group of elements surrounded by space is perceived as a unit — the space acts as an implied boundary, an invisible container. You don't need a border or a box to group things together. Space alone, used deliberately, creates the same perceptual closure. This is a fundamental insight: in layout, what you leave out is as active as what you put in.
It also explains why gutters between columns don't need dividing lines. The space between two columns is sufficient for the eye to read them as separate. Add a rule and you introduce visual weight where none is needed — the closure already happened without it.
Figure 1.5 — Closure. Left: the dashed circle and incomplete triangle are immediately read as a circle and triangle — the mind fills in the gaps. Right: in layout, surrounding space acts as an implied boundary. These three card elements are perceived as a group without any border or background, because the space performs the closure.
Figure and ground The role of negative space
Alongside the Gestalt principles, there is one perceptual mechanism so fundamental to visual design that it deserves its own treatment: the figure-ground relationship. When we look at a visual field, the mind divides it into two categories — figure, the element we perceive as the subject, the thing we are looking at; and ground, the background against which the figure appears. This division happens automatically and instantly.
Most of the time, the division is unambiguous. Dark type on a light page: the type is the figure, the page is the ground. A photograph on a white background: the photograph is the figure. But figure and ground can be manipulated, reversed, and made to ambiguate — and understanding this gives you a powerful tool for thinking about page design.
The key insight is that ground is not passive. The white space on a page is not nothing — it is an active element that shapes how the figure is perceived. A piece of type sitting in generous white space feels different from the same type surrounded by other elements, not because the type has changed, but because the ground has. The space changes the figure by changing what the figure is seen against.
This is why margins matter beyond mere practicality. A wide margin is not wasted space — it is ground, giving the text room to be perceived as figure. Narrow margins make the text feel cramped and anxious, not because the text itself has changed, but because the ground is no longer doing its work.
Figure 1.6 — Figure and ground. Three panels, identical in content, different only in the space that surrounds the text. In the first, the text block fills its container almost entirely — there is barely any ground, and the page feels airless, the text indistinct from its edges. In the second, a modest margin appears, and the text begins to separate from the container wall, starting to read as something placed rather than something crammed. In the third, generous space surrounds a smaller text area — the ground is now doing its full work, and the text reads as a confident, self-contained figure, calm and clearly present against its background.
Learning to see What's wrong before you know why
Here is something experienced designers often say, and beginners often don't believe: you will feel when something is wrong before you can name it. A page will make you faintly uncomfortable without your knowing why. A headline will seem off before you've identified the specific problem. This is not mysticism — it is the Gestalt principles operating below conscious articulation. Your visual system has already made its assessment. The designer's job is to develop the vocabulary to follow.
This vocabulary takes time. But there is a useful exercise for accelerating it: the deliberate before-and-after comparison. Take a page — any page, a website, a flyer, a book — and ask these questions in order. Where does my eye land first? Is that where it should land? Where does it go next? Is that the intended reading path? Do the related elements feel related? Do the unrelated elements feel distinct? Does anything feel cramped? Does anything feel unmoored, floating without context?
You will start to see problems before you know their names. That is fine. The name comes later. The seeing comes first.
Garden Notes
The first thing my teacher said to me about type was not about type at all.
It was a Tuesday morning in October and I had arrived early to show that I was serious.
On Spacing
Most typographic mistakes aren't about the wrong typeface. They're about the wrong space.
Garden Notes
The first thing my teacher said to me about type was not about type at all.
It was a Tuesday morning in October and I had arrived early to show that I was serious.
Most typographic mistakes aren't about the wrong typeface. They're about the wrong space.
Figure 1.7 — Before and after. Both versions contain identical text. The left applies no typographic thinking: uniform weight, tight spacing, no hierarchy. The right applies the principles from this chapter: size contrast for hierarchy, proximity to connect the subheading to what follows, generous spacing to give the text ground. You likely felt the difference before you could name it.
Practice
Before moving to the next chapter, spend ten minutes with a page you encounter today — a news article, a printed leaflet, an app screen. Ask the five questions: Where does your eye land first? Where does it go next? Do related things feel related? Does anything feel cramped? Does anything feel unmoored?
Don't try to name solutions yet. Just practise the observation. The vocabulary will come; the habit of seeing is what we are building now.
We have covered the perceptual foundations — how the eye moves, how the mind groups, how figure and ground interact. These are not typographic principles specifically; they are human visual principles that apply to every designed surface. In the chapters that follow, we will see them appear again and again, in increasingly specific forms. Contrast, proximity, and continuity are not abstract ideas we'll revisit occasionally. They are the underlying logic of every decision we will make.
In Chapter 2, we look at the most powerful of these tools in isolation: contrast. What it is, how it works, and how to use it not just to create emphasis but to build the entire visual structure of a page from a single, manageable idea.