Week 02 · Foundations
End of experience
Composition A
Composition B
Five real elements, two arrangements, not a single line drawn between them. Which one feels like somebody meant it?
Predict
Which composition reads as intentional?
Experience
Here is the same composition, live. Drag any element by its left edge, or tap it and nudge it with the arrows below the canvas — everything snaps to a column line, because that is what a grid actually is: not a look, but a finite set of places a thing is allowed to start.
Change the column count and the same five elements are re-measured against a coarser or finer set of lines. Change the gutter and the margin — the two numbers Bauhaus print shops measured with rulers and a modern stylesheet measures in gap and padding — and watch that not one of those changes moves an aligned element off its shared edge. Only breaking the grid does that.
Composition
Drag, or tap then use ◂ ▸
Tap or drag an element to select it.
Columns
Distinct left edges groups every element's left position with any other within 3px and counts the groups. Alignment score is 100% when that count is 1 (everyone shares one edge) and 0% when it is 5 (nobody shares anything) — linear in between. Rhythm regularity is simply the percentage of the five elements currently sitting exactly on a column line rather than free. "Reads as" needs both numbers at 70% or higher to call a layout intentional; below 35% on both, it calls it arbitrary; the middle ground is uneasy — recognisably trying, not yet agreeing.
Concept
Here is the correction the whole subject waits on. "Form follows function" is not a Bauhaus phrase. It is not Gropius's phrase.
It was written in Chicago in 1896, by the architect Louis Sullivan, describing skyscraper facades — twenty-three years before the Bauhaus opened in Weimar. Even Wikipedia's own article on the Swiss International Style gets this backwards, crediting the school with a slogan it never coined. What the Bauhaus actually did, relentlessly, was practice that ethos without ever owning the words: state a thing's function before you decorate it, and let the decoration answer to the function rather than the other way round.
That practice showed up as tension, not balance. A nineteenth-century eye expected a centred title, a symmetrical page, a composition that mirrored itself. The Bauhaus — and, pushing the same logic further into printed type, designers like Jan Tschichold — built pages instead where every element earned its position by its relationship to the others, not by sitting in the exact middle for its own sake. Herbert Bayer's Universal alphabet is the cleanest surviving example: he dropped capital letters entirely, reasoning "one sound, one symbol" was simply more efficient to set and read. It was a design, taught and adopted as the house style for Bauhaus print — and, worth saying plainly, never actually cast into working metal type in Bayer's own lifetime.
Underneath both moves — functionalism and asymmetry — is the same Gestalt mechanic: proximity. Two things placed close together are read as one thought before either is read at all. Watch it happen to six identical blocks below.
Reads as two groups
Gestalt psychology — Wertheimer, Köhler, Koffka — was being written down in the same German decade the Bauhaus was teaching. No record ties the two faculties together by name; the mechanism explains the effect regardless of whether anyone at the school ever cited it.
Deconstruction
A Bauhaus composition is not one decision. It is four, stacked.
Isolate each layer below and the poster stops being an object and starts being an argument: geometry reduced to what a printer could set exactly the same way twice, structure that holds the argument up rather than decorating it, type that is a house style rather than a costume, and a palette disciplined down to three colours before anyone was allowed to reach for a fourth.
Isolate a layer
An illustration in the Bauhaus visual language — not a reproduction of any one surviving poster.
Drawn for this lesson, in the school's own vocabulary of geometric reduction and constrained colour — the layers are an analytical device, not a literal print-production step the Bauhaus used.
Real World
The same content, re-laid on four different grid systems, a century apart.
Some of this lineage is a straight, documented line. Some of it is a parallel two disciplines walked without ever meeting. Both are told honestly below — watch which sentence gets the quieter tag.
Dessau · 1920s print shop
Era
The Dessau print shop set its headlines in lowercase sans-serif against a hand-measured module — a house style, not yet the mathematics that came after it.verified
Experiment
A grid is not only horizontal. Type sets its own vertical grid — the baseline — and most text on most screens is quietly off it.
Drag the line-height below. At 16, 24 and 32 pixels the text locks onto an 8px baseline and every line lands on a rule; anywhere else, it drifts — a fraction of a pixel more each line, invisible on any one line, unmistakable by the fifth.
Predictable spatial structure reduces the perceptual effort of locating information. That is the grid's actual, measurable payoff — not a look, a saving.
On the 8px baseline
Baseline unit fixed at 8px. Line height snaps to it only at multiples of 8 — 16, 24, 32 — everything between drifts, and text set to drift reads as unrhythmic even when nothing else on the page changed.
Challenge · Fix the broken hierarchy
OpenTwo of these five elements already share an edge. The other three drifted off the grid entirely. Put them back — drag, or select and nudge — until the edges agree.
Tap or drag an element to select it.
Insight
You read alignment as intent before you could name it.
That is not a metaphor for how design communicates — it is the literal mechanism. A shared edge tells the eye "these belong together" faster than any label could, because the judgment happens in the same low-level visual system that groups a flock of birds or a row of streetlights. The grid is not decoration on top of that system. It is a set of edges built specifically to satisfy it.
Mental model
Whenever a layout feels arbitrary and you cannot say why,
look for the edges that fail to agree,
because the eye reads a shared edge as intent, and an unshared one as accident, before any word on the page is read.
TomorrowOverlay a 12-column grid on a page you own — a slide, a landing page, a document — and count how many of its left edges actually agree.