An eleven-lesson course · after Josef Müller-Brockmann
Thinking in fields.An interactive course in grid systems
A hands-on course on the grid as Müller-Brockmann taught it: start from the text, divide the page into fields, and let every image, headline and column snap to that order. Each lesson has something to build or test.
Source
Grid Systems in Graphic Design (Rastersysteme für die visuelle Gestaltung), Niggli, 1981
Format
11 lessons, about 100 minutes
Tip
Press “Show guides” to see the grid this page is built on.
Lesson 1
Why a grid at all
Josef Müller-Brockmann (1914–1996) was a Zürich designer and teacher, and one of the central figures of what became known as the Swiss or International Typographic Style. His 1981 manual on grid systems is still the most complete practical account of how to build one.
For him the grid was more than a layout aid. It was an attitude: design should be objective, clear and functional, and the designer's job is to organize information so the reader can take it in quickly. A grid makes that order visible. It ties text, images and white space into one system, so the parts of a page relate to each other instead of floating.
The practical gains he pointed to are easy to see:
Clarity. Readers find things faster when elements line up and repeat.
Consistency. Every page of a book, magazine or series shares the same structure.
Speed. Decisions about size and position are made once, then reused.
Tension. A strict structure makes deliberate contrast (a big image, an empty field) read as intentional.
Try itSame content, two pages
The elements on the right are identical in both states. Only their positions and sizes change. Toggle between them and notice where your eye goes first.
Look forShared edges. On the grid page, the image, the headline and both text columns share left edges and top lines, so the page reads as one object.
A4 · 4 columns × 5 rows = 20 fields
Lesson 2
The anatomy of a grid
Before building one, learn the parts. Müller-Brockmann's vocabulary is small and precise. The key idea is the field (often called a module): a rectangle formed where a column and a row cross. Fields are separated by narrow gaps, and everything on the page occupies one field or a group of whole fields.
Select a term8 parts
Select a term to highlight it
RememberColumns run vertically, rows horizontally, and fields are their intersections. The gaps between fields are as important as the fields: they keep text and images apart while still binding them to one structure.
Lesson 3
Start from the type, not the page
This is the step most people skip, and it is the heart of the method. Müller-Brockmann derived the height of a field from the text itself. First you choose the typeface, size and leading (line spacing) for the body copy. The height of a field is then a whole number of lines of that text, and the space between two fields is also a whole number of lines, normally one empty line.
Why it matters: if the gap is a whole line, the first line in every field sits on the same baselines as the text in the neighboring column. Across the whole page, lines of type line up horizontally. If the gap is an arbitrary measurement, they drift apart.
Field from leadingpoints · lines
Left: two stacked fields · Right: the neighboring column · Red: baselines
UnitsLeading is measured in typographic points. One point is 0.3528 mm, so 12 pt leading is 4.23 mm. A field is measured from the cap height of its first line to the baseline of its last, so 5 lines of 9 pt type on 12 pt leading make a field of 4 × 12 pt plus a 6.3 pt cap height: 54.3 pt, or 19.2 mm. With a one-line gap, the pattern repeats every 6 lines (72 pt, 25.4 mm).
Lesson 4
Build a grid, step by step
Now put it together. The working order is: choose the format, set the margins to define the type area, divide the width into columns with gutters, then divide the height into rows whose size comes from the leading. Adjust until the numbers come out clean. Müller-Brockmann's examples show that this is iterative: you may change the leading by half a point or a margin by a millimeter so that a whole number of lines fills the type area.
Grid buildermillimeters
Leftover at each leading · green: under 2 mm
9 pt16 pt
Read the leftoverWith snapping on, the rows are made of whole lines, so the type area rarely ends exactly at the bottom margin. The spec shows the leftover millimeters. Because rows can only grow a whole line at a time, the type area jumps as you change the leading: the hatched strip is what's left over. The bars under the leading slider show the leftover at every leading, so you can pick one that fits cleanly or absorb a small leftover into the bottom margin.
Lesson 5
How many fields?
The book works through grids of very different densities, from a few large fields to more than thirty small ones. The trade-off is simple. Fewer fields give a calm, strict result with few options. More fields give many possible image sizes and combinations, but demand more discipline, because it becomes easy to make a page that is technically on the grid and still disordered.
Choose the density from the job: how many kinds of content there are, how many images, and how much variation the publication needs from page to page.
Choose a gridthree layouts each
PatternNotice that the same grid supports pages that look quite different. Variety comes from how many fields each element takes, not from breaking the grid.
Lesson 6
Place elements by whole fields
The rule in practice: an image or a block of text always starts on a field edge and ends on a field edge. An image can be one field, two fields wide, three fields tall, and so on, but never two and a half. Text columns hang from the top of a field. Headlines align to the same left edges as everything else.
Drag across the fields to place a block. Pick what kind of block you are placing first.
Tools
Exercises
Lesson 7
Margins, type area and spreads
Margins decide the proportion of printed area to paper, and they set the tone. Wide margins feel quiet and generous; narrow margins feel dense and urgent. In a bound publication the reader sees two pages at once, so the grid is designed for the spread: left and right pages mirror each other around the spine, with an inner margin at the binding and an outer margin at the edge.
Müller-Brockmann treated the type area as a design decision, not a leftover. A margin can also be working space: a wide outer or bottom margin can hold captions, page numbers and notes, aligned to the same baseline grid.
SpreadA4 pages, mm
Inner margins meet at the spine
Lesson 8
Typography inside the column
Column width and type size have to be chosen together. A column that is too narrow chops the text into short lines and forces awkward breaks. A column that is too wide makes the eye lose its place when it jumps back to the next line. A common working range is roughly 45 to 75 characters per line for continuous reading.
The Swiss school favored text set flush left, ragged right, in a clear sans serif, because even word spacing keeps the texture of the column calm. Justified text in a narrow column opens up uneven gaps.
Measurecharacters per line
045–75 comfortable110
Lesson 9
Test yourself
First, train your eye. Each page below has one element that breaks the grid by a few millimeters. Click the element that is off.
Questions
Lesson 10
The grid on screen
Everything so far assumed a page of fixed size. A screen has no fixed size: the same page might be read at 375 pixels wide or 1,600. So on the web you design a family of grids rather than one, typically 4 columns on a phone, 8 on a tablet and 12 on a desktop, and let each element span whole columns at every width.
Two things change. Rows mostly disappear, because pages scroll and have no fixed height; vertical order comes from spacing in whole multiples of the line height instead. And the measure needs a cap: without one, text stretches across wide screens. Margins become the maximum width of the content.
Responsive gridCSS pixels
Same content at every width · blocks span whole columns · vertical spacing in 24 px steps
In CSSdisplay:grid; grid-template-columns:repeat(12,1fr); column-gap:24px sets up the columns, and grid-column:span 6 places an element on whole columns. Cap text with max-width:65ch. To line text up to cap height and baseline as in Lesson 3, current browsers support text-box:trim-both cap alphabetic.
Lesson 11
Recap and a project to make
The method in one list. Use it as a checklist on your next layout; ticks are saved in this browser.
Studio brief
A program leaflet on a 20-field grid
Client
A fictional lecture series: “Order and Chance, six evenings on design”
Format
A4 folded to A5, four pages (two spreads)
Content
Title, short intro (about 120 words), six lectures each with date, speaker and a two-line summary, one or two images, venue details
Constraints
One sans serif family, two weights. Body 9 pt on 12 pt leading. Fields built from the leading as in Lesson 3. Every element occupies whole fields.
Deliver
The empty grid with its spec, then three layout sketches on it, then the final leaflet
Stretch
Make a poster for the same series on the same field logic, scaled to A2
Where to go next
Grid Systems in Graphic Design, Josef Müller-Brockmann (Niggli, 1981; still in print). The primary source for everything here. Work through its grid examples with a ruler.
The Graphic Artist and His Design Problems, Josef Müller-Brockmann (1961). His earlier book on the designer's process and ethos.
Neue Grafik (1958–65), the journal he co-edited with Richard Paul Lohse, Hans Neuburg and Carlo Vivarelli. Look for scans in design libraries.
Study his concert posters for the Zürich Tonhalle in a museum collection, and try to reconstruct the grid underneath each one.