Swiss style in design: grid, grotesque and flush-left type
A poster on a modular grid, where the style came from, its seven tools in print and on the web, flush-left text and hierarchy without decoration — with live examples and prompts for images.
In short
The Swiss style, or the International Typographic Style, appeared in Switzerland in the 1950s and is built on four things: a modular grid, a grotesque typeface, text aligned to the left with a ragged right edge and a hierarchy made of size, weight and white space instead of colour and decoration. The layout is asymmetric, photography is objective, and there is usually one accent colour. Its masters are Josef Müller-Brockmann, Armin Hofmann and Emil Ruder, its fonts — Akzidenz-Grotesk, Helvetica and Univers. In web design the style lives on in 12-column grids, flat interfaces and large flush-left headlines. It suits studios, architecture, museums, technology and any brand that wants to look clear and confident.
A poster on a modular grid
Show the grid: every element of the poster starts and ends on its lines. Six columns, eight rows, one gap.
The grid is invisible on the finished poster, but it is felt: the edges line up, the gaps repeat, the empty space looks intended. That is the main difference between the Swiss style and simple minimalism — the order here is not in emptiness but in the system behind it.
Where the Swiss style came from
International Typographic Style poster for a design week, strict modular grid, asymmetric layout, huge black sans-serif numerals "26", a flush-left headline in a Helvetica-like grotesque, small text set in narrow columns, thin black rules, one flat acid-lime rectangle as the only accent, off-white paper texture, lots of white space, no illustrations, flat print design, sharp, aspect ratio 4:5In the 1950s designers in Zurich and Basel — Josef Müller-Brockmann, Armin Hofmann, Emil Ruder — set out to make design objective: information first, the designer’s taste second. From 1958 the journal Neue Grafik spread their ideas, and in 1957 two typefaces appeared that became symbols of the style: Helvetica and Univers.
Müller-Brockmann later described the method in the book “Grid Systems in Graphic Design” (1981). It is still a working manual: the grids of most modern sites trace back to it.
The tools of the style — in print and on the web
Seven techniques moved from posters to screens almost unchanged.
| Technique | In print | On the web |
|---|---|---|
| Modular grid | columns and rows of modules | CSS grid on 12 or 6 columns |
| Grotesque | Akzidenz-Grotesk, Helvetica, Univers | a system grotesque or Inter, Manrope and the like |
| Left edge | a ragged right edge | text-align: start, no justification |
| Hierarchy | size, weight, white space | a type scale instead of colour and boxes |
| Asymmetry | large elements shifted, emptiness at work | a layout by columns, not by the centre |
| Objective photo | a photograph instead of a drawing | objects without props, often black and white |
| One accent | usually red | one brand colour |
Flush left
The same paragraph aligned three ways. Only one keeps both a straight edge for the eye and even spaces between words.
Hierarchy without decoration
The same announcement. On the left, importance is shown by colour, badges and icons; on the right, by size, weight and space.
The right version is read faster: the eye goes from the largest to the smallest without detours. Decoration competes with the content for attention; size and space simply set the order.
The Swiss style on the web
Website homepage in Swiss International Style for a furniture design studio, desktop screenshot, visible 12-column grid logic, a large flush-left black grotesque headline, small grey sans-serif text in narrow columns, thin hairline rules separating sections, black-and-white cut-out product photos of chairs on white, one acid-lime accent block, generous white space, asymmetric layout, flat 2D UI design, crisp typography, aspect ratio 16:9On the web the style found a natural home: a screen is a grid of pixels anyway, and CSS grid lets you set columns and rows as precisely as a printer’s layout. Flat design of the 2010s, design systems and most product sites borrow from it — often without knowing.
On a phone the grid does not disappear: the columns merge into one, but the left edge, the type scale and the rhythm of spaces stay — and the page keeps its character.
The Swiss style in code: 2 examples
A modular grid with an asymmetric first screen, and typography where hierarchy is made by size and a thin rule.
A modular grid
Every block stands on the lines of 12 columns; on a phone they merge into one.
/* 12 columns: content sits on lines, not "by eye" */
.page {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--space-5);
row-gap: var(--space-7);
max-width: 80rem;
margin-inline: auto;
padding-inline: var(--space-5);
}
.hero__label { grid-column: 1 / 4; }
.hero__title { grid-column: 1 / 10; }
.hero__text { grid-column: 7 / 13; } /* asymmetry: the text starts in the second half */
.hero__image { grid-column: 1 / 13; }
/* On a phone the same lines become one column */
@media (max-width: 47.99rem) {
.page > * { grid-column: 1 / -1; }
}Typography
One grotesque, one straight left edge, a thin rule instead of a box and a single accent.
body {
font: 400 1.0625rem/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: start;
hyphens: none;
}
h1 {
font-size: clamp(2.75rem, 7vw, 6rem);
font-weight: 700;
line-height: 0.95;
letter-spacing: -0.03em;
}
.label {
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* A thin rule instead of a box */
.section + .section {
padding-top: var(--space-5);
border-top: 2px solid currentColor;
}
/* The only accent on the page */
.accent { background: var(--color-accent); }7 rules of the Swiss style
-
01
The grid first
Columns, rows and one gap are set before the first element.
-
02
One grotesque
Different weights and sizes of the same typeface.
-
03
Flush left
A ragged right edge, no centring and no justification.
-
04
Hierarchy by size
Importance is shown by size, weight and space, not by colour.
-
05
Asymmetry
Large elements shifted, emptiness that balances them.
-
06
One accent
Everything else is black, white and grey.
-
07
Rules instead of boxes
Sections are separated by a thin line and space.
Common mistakes with the Swiss style
-
Helvetica without a grid
The typeface alone does not make the style — the order behind it does.
-
Everything centred
Symmetry makes the layout static and the text hard to read.
-
Justified narrow columns
Rivers of spaces run through the paragraph.
-
Five weights and three fonts
The hierarchy dissolves into noise.
-
Emptiness without a system
White space looks like a hole, not a pause.
-
Many accent colours
The strictness disappears, and with it the character.
Questions about the Swiss style
What is the Swiss style in design?
A style born in Switzerland in the 1950s: a modular grid, a grotesque typeface, text flush left, asymmetry and hierarchy made by size and space.
Do I need Helvetica for the Swiss style?
No. Any clear grotesque works: Inter, Manrope, a system font. The grid and the hierarchy matter more than the typeface.
How is the Swiss style different from minimalism?
Minimalism removes the extra; the Swiss style also builds a strict system — grid, scale, asymmetry. It can be dense and still be Swiss.
Which grid should I take for a site?
12 columns on a desktop, 6 or 4 on a tablet, one on a phone — with the same gap and margins from the spacing scale.
Who is the Swiss style for?
Studios, architects, museums, technology companies and brands that want to look clear, precise and confident.
Is the Swiss style outdated?
No: it is the foundation of most modern interfaces. Trends come and go on top of it, the grid stays.
Online form
Clarity
by design
I design sites on a strict grid with large type and nothing extra — calm, precise and easy to read. Tell me about the project — I answer within one working day.