Swiss concert poster
Display type hung from a high flowline, one bold image across the columns, dense event detail in a single column below — hierarchy made of scale alone.
Design templates · columns & hierarchy · Swiss school
The poster and editorial grid
A poster is an argument made in scale, and the grid is the scaffolding that keeps the argument legible. Inset margins around a large sheet, divide the field into columns, and cross it with a few horizontal flowlines, and you have a modular grid against which a headline, an image, and a block of detail can be ranked into a clear order the eye reads in a single sweep. The same structure runs the magazine spread and the broadsheet. Here is what the overlay draws, the real maths of the modular grid and the ISO A-series, the Swiss history that codified it, and when breaking it earns its keep.
- Type
- Hierarchical column grid
- Built from
- Columns · margins · flowlines
- Tradition
- Swiss / International Style
- Difficulty
- Intermediate
- Common form
- A1–A2 · multi-column
- Also known as
- Modular layout grid
See the poster grid on five layout types
‹›
A Swiss-style concert poster hangs its display type from a high flowline, sets a single bold image across several columns, and drops the dense event detail into one column below a lower flowline — three ranks the eye reads in order. Drag the handle to lay the grid over the image.
What the overlay shows
The overlay draws the architecture of a large-format page: the four margins inset from the trim, a field of vertical columns separated by a consistent gutter, and a few horizontal flowlines that cross the columns to fix where major elements begin. Where the columns and flowlines intersect, the page is divided into a field of rectangular cells — the modular grid, the structure at the heart of the Swiss grid system and of any magazine layout grid. It is not a drawing aid for the picture inside; it is the order the headline, the image, and the body text are placed against.
The point of all this structure is hierarchy. Columns can be used singly for body text or combined into wider fields for an image; the top flowline, often called a hangline, sets the station from which the display type and image hang; a lower flowline marks where the supporting detail begins. With those stations fixed, three or four ranks of information settle into a reading order the eye takes in at a glance. As an overlay the grid is also a diagnostic: slide it over a draft and any element floating between columns, or any flowline that has drifted, shows up as the place where the hierarchy will read as accidental rather than chosen.
One practical detail matters at large format. Posters are designed small and printed big, so the grid is held in proportion to the trim rather than in absolute millimetres, and the overlay carries bleed marks beyond the margin for the art that runs off the edge. Set the format — an ISO A-series size, a US size, or a custom one — and the columns, flowlines, and bleed scale to match, so the composition you balance on screen survives enlargement to the printed sheet.
The math, briefly
A modular grid is two divisions laid over each other. With a live width W, C columns, and a gutter g, each column falls out by division; rows follow the same way from the flowlines:
column width = (W − (C − 1) × g) ÷ C
image field = n columns + (n − 1) gutters
A-series ratio = 1 : √2 ≈ 1 : 1.414
The first equation divides the field into columns; an image then spans a whole number of them, so an element two columns wide measures two column widths plus the one gutter between, never a fraction.1 The second idea is the paper itself. Every ISO A-series size shares the ratio 1:√2, which is the only proportion that halves into two rectangles of the same shape — so A1 is two A2s, and a layout designed on one A-size scales without re-proportioning to all the others.5 Flowline placement is the remaining decision: a high hangline and one or two lower flowlines give the page its horizontal stations.2 The arithmetic is trivial; the judgement of how many columns and where the flowlines fall is the craft.
History — where it comes from
Verified
The Swiss codification. The modular poster grid was formalised by the Swiss grid system — the International Typographic Style — of the 1950s and 1960s. Josef Müller-Brockmann's Grid Systems in Graphic Design (1981) is its canonical statement, presenting the grid of columns and flowlines as the basis of objective, legible design.1 Richard Hollis's history of Swiss graphic design traces how Zürich and Basel turned this approach into an international style, exported through the work of Müller-Brockmann, Armin Hofmann, and their contemporaries.3
The modular grid for publications. Allen Hurlburt's The Grid (1978) carried the same discipline into newspapers, magazines, and books, setting out the column-and-flowline system as the working method of editorial design.2 Jan Tschichold's writing on the book established the underlying concern with proportion and the considered use of the page that the Swiss grid built upon.4
The teaching tradition. Kimberly Elam's Grid Systems and Ellen Lupton's Thinking with Type made the modular grid standard studio teaching, and Timothy Samara's Making and Breaking the Grid set out both the construction of the grid and the disciplined ways designers depart from it.567
Honest caveats
The grid is an aid, not a guarantee. Müller-Brockmann was explicit that the system permits good work but does not produce it; a weak idea laid on a perfect grid is still weak.1 The expressive poster traditions — from the émigré modernists through later postmodern work — deliberately break the grid for impact, and read as intentional precisely because the Swiss order is the thing they push against.7
Viewing distance changes the decisions. A grid that balances beautifully on screen can fail on a wall: a venue poster read from several metres needs far more contrast and scale between the ranks than a spread read at arm's length. Robert Bringhurst's account of proportion and measure is a reminder that the page is sized for a reader at a particular distance, not in the abstract.8
When to use it (and when not)
| If you want to... | Use the poster grid | Don't use it for... | Difficulty |
|---|---|---|---|
| Rank a headline, image, and detail clearly | Flowlines and columns fix three readable ranks of hierarchy | A single image meant to fill the sheet with no text | Intermediate |
| Balance text and image across a wide spread | A multi-column field lets the two share rows flexibly | A one-element splash that needs the whole page | Intermediate |
| Keep a series of posters visually consistent | One grid, varied content, holds a campaign together | A single bespoke piece with no siblings to match | Beginner |
| Lay out a dense, multi-section broadsheet | Many columns absorb headlines, images, and body in one system | Highly expressive, deliberately chaotic compositions | Advanced |
| Audit a draft for accidental hierarchy | The overlay reveals elements floating off the columns and flowlines | Final judgement of impact at true viewing distance | Intermediate |
Where the poster grid does its work
Six contexts. The Swiss and editorial uses are documented practice; the readings are analysis.
Exhibition poster
A reproduced artwork fills the upper field, the show title and dates sit on the flowline beneath — the grid keeps the institution's voice quiet and consistent.
Magazine cover
The masthead spans the top, cover lines hang on a column grid down the sides, and the cover image holds the centre — order beneath an apparently free face.
Editorial spread
A full image field on the left page, columns of running text and a flowline-aligned headline on the right — the gutter joins two pages into one composition.
Broadsheet newspaper
Six columns absorb headlines, images, and body in one system, with flowlines stacking stories so a busy page still reads top to bottom.
Annual report layout
Charts span column blocks, captions sit in a single column, and a steady flowline rhythm keeps a data-dense document feeling calm and authoritative.
Common mistakes
1
No real hierarchy
Sizing the headline, image, and detail too close together leaves the eye with nowhere to land first. A grid arranges elements, but it cannot rank them for you — that is a decision about scale and contrast.
Fix: separate the ranks decisively; make the primary element far larger or bolder than the secondary, and the secondary clearly above the detail.
2
Too many columns
Splitting a poster into a dozen thin columns produces strips too narrow for an image and too many to compose with. The grid becomes a cage of slivers rather than a set of useful blocks.
Fix: choose a column count whose combinations cover your content; for posters a modest field that combines into a few large blocks usually beats a fine one.
3
Ignoring viewing distance
Judging a venue poster at screen size makes the headline look bold when, on the wall at five metres, it is unreadable. The hierarchy that worked at preview scale collapses at true distance.
Fix: set the real trim, then check the composition zoomed out to the intended viewing distance before committing the type sizes.
4
Critical text in the bleed
Placing the date, price, or fine print too near the trim risks losing it to the cutting blade's tolerance, while only decorative art should run off the edge.
Fix: keep all essential text inside the safe margin and reserve the bleed strictly for imagery you are content to lose at the edge.
How different disciplines use it
For poster designers
Set the trim, divide the field into a few columns, and decide your flowlines before placing a single word. Hang the display type from a high flowline, run the image across the column blocks it needs, and drop the detail into a single column below. Work in proportion to the real size and check the composition zoomed out to viewing distance, because a poster lives on a wall, not on a screen. The grid keeps a campaign of posters recognisably one family while the content changes.
For editorial designers
A magazine layout grid is the working method of the magazine and the book. Run six, eight, or twelve columns so text and image can share rows, align headlines and image tops to flowlines so the spread reads across the gutter, and let a full-bleed image span a block of cells for a change of pace. The grid carries a long publication's consistency invisibly — the reader feels a considered magazine without ever seeing why.
For brand and identity designers
A modular grid gives an identity system its backbone: the same column-and-flowline structure can govern a poster, a report cover, and a set of templates, so everything an organisation prints reads as one voice. Define the grid once in proportion to your formats, specify how the logo, headline, and image relate to the columns, and hand it on as a system others can apply without your eye in the room.
For students
The poster grid teaches the central lesson of layout: structure first, then hierarchy, then expression. Start by overlaying the grid on a Swiss poster you admire to see how few elements it really uses, then build a simple A2 layout with three ranks of information on a five-column field. Once you can rank a headline, an image, and a block of detail cleanly, you can break the grid on purpose rather than by accident.
"The grid system implies the will to systematize, to clarify; the will to penetrate to the essentials, to concentrate; … the will to cultivate objectivity instead of subjectivity."
Josef Müller-Brockmann, Grid Systems in Graphic Design (1981)1
Frequently asked questions
What is a poster and editorial grid?
A large-format hierarchical layout built from margins, a field of columns, and horizontal flowlines. The columns and flowlines together form a modular grid of cells, and display type, images, and body text are placed against them so the page reads in a clear order. It is the structure behind Swiss-school posters and most magazine layouts.
What is a modular grid?
A grid in which vertical columns are crossed by horizontal flowlines, dividing the page into a field of rectangular modules. Elements span whole numbers of modules, so a single image can occupy a block of cells while body text fills a single column. It gives large, mixed layouts a consistent underlying order.
What is a flowline in a grid?
A flowline is a horizontal line across the grid that fixes where major elements begin or align. A hangline is the flowline near the top from which images and headlines hang. Flowlines stop a tall page from feeling arbitrary by giving the eye consistent horizontal stations to return to.
Why do all A-series paper sizes have the same proportion?
The ISO A-series uses the ratio 1 to the square root of 2, about 1:1.414. That ratio is special because halving the long side produces a rectangle of the same proportion, so A1 folded in half is two A2 sheets, and a layout designed for one A-size scales cleanly to every other without re-proportioning the grid.
Is the poster grid the same as the editorial grid?
They share the same structure of columns, margins, and flowlines, but the proportions differ. Posters are near-square and read in one glance from a distance, so they lean on a few bold modules. Editorial spreads are wide, read close up over minutes, and use more columns to balance text and image across the gutter.
How many columns should a poster grid have?
There is no fixed number. Swiss posters often use a modest field that combines into a few large image and text blocks; magazines commonly run six, eight, or twelve columns so text and images can share rows flexibly. The rule is that the column count gives you enough combinations for your content without becoming a clutter of thin strips.
When should I break the grid?
When the grid would force a weak composition or when a single element must dominate. Müller-Brockmann himself treated the grid as an aid rather than a guarantee, and the expressive poster tradition deliberately violates it for impact. The break reads as intentional only when the rest of the page has established the order it departs from.
Does viewing distance change the layout?
Yes. A venue poster read from several metres needs far larger display type and bolder contrast than a magazine spread read at arm's length. The same grid serves both, but the hierarchy decisions — how much scale separates the headline from the body — depend on how far away the reader stands.
References
- Müller-Brockmann, J. Grid Systems in Graphic Design. Verlag Niggli (1981). ISBN 3-7212-0145-0.
- Hurlburt, A. The Grid: A Modular System for the Design and Production of Newspapers, Magazines, and Books. Van Nostrand Reinhold (1978). ISBN 0-442-24817-8.
- Hollis, R. Swiss Graphic Design: The Origins and Growth of an International Style, 1920–1965. Laurence King (2006). ISBN 978-1-85669-487-2.
- Tschichold, J. The Form of the Book. Hartley & Marks (1991). ISBN 0-88179-116-4.
- Elam, K. Grid Systems: Principles of Organizing Type. Princeton Architectural Press (2004). ISBN 1-56898-465-0.
- Lupton, E. Thinking with Type. Princeton Architectural Press (2004). ISBN 978-1-56898-448-3.
- Samara, T. Making and Breaking the Grid. Rockport Publishers (2002). ISBN 1-56496-893-6.
- Bringhurst, R. The Elements of Typographic Style. Hartley & Marks (2004). ISBN 0-88179-206-3.
Other design template overlays
Notes from the studio · Three practitioners on the poster grid
Illustrative composites of how the tool gets used in practice — not quotes from named individuals.
I set the flowlines before the type. Once the hangline and the body field are fixed, the poster more or less designs itself — the work is choosing what deserves the top rank.
On a long feature I run twelve columns and let images span whatever block they need. The reader never sees the grid; they just feel that the spread holds together across the gutter.
For a campaign I define one modular grid for every format. The posters change weekly; the structure underneath is what makes them read as one voice.
Open the Poster & Editorial grid overlay
Set your format, divide the field into columns, place the flowlines, and rank the hierarchy in your browser. Free, no signup.
Launch Grid Maker Pro →