Swiss style web design, translated into CSS grid

What the International Typographic Style was

The style grew up in Switzerland in the middle of the twentieth century, in the design schools of Zurich and Basel and in the posters, catalogues and signage that came out of them. Its designers wanted communication to be clear and objective: information arranged on a mathematical grid, grotesque typefaces such as Akzidenz-Grotesk and later Helvetica and Univers, photographs instead of illustration, and asymmetric layouts that use white space as an active part of the page. Josef Müller-Brockmann's book on grid systems is still the usual starting point for anyone who wants the method rather than the look.

It spread internationally through corporate identity and wayfinding, which is where the name comes from. Much of what the web now treats as normal, from left-aligned sans-serif body text to modular card layouts, owes something to it.

The rules, one by one

A modular grid: Columns and gutters are fixed first, and every element starts and ends on a column line. Nothing is placed by eye.
Flush left, ragged right: Text aligns to a hard left edge and the right edge is left uneven. Justified text and centred paragraphs break the grid's vertical lines.
One grotesque sans-serif: Hierarchy comes from size and weight inside one family, not from a second face.
Asymmetry: Layouts are balanced, not mirrored. A narrow column of captions beside a wide column of text is typical.
Objective imagery: Photographs show the thing itself, cropped hard to the grid, without filters or decorative frames.
Restrained colour: Black, white and one strong colour, very often red, used for emphasis and structure.
Numbers and rules: Section numbers, thin horizontal rules and tabular figures mark the order of information.

From poster grid to CSS grid

The poster designer's grid maps almost directly onto CSS. A twelve-column grid divides cleanly into halves, thirds, quarters and sixths, which is why it's the usual choice for a Swiss grid website.

Define the grid once: grid-template-columns: repeat(12, minmax(0, 1fr)) with a fixed gap, for example 24px, on a container capped at around 1200px to 1320px wide.
Place, don't nudge: set grid-column: 1 / 5 for a caption column and 5 / 13 for the text, instead of padding things into position.
Keep a reading measure inside wide columns: cap paragraphs at about 65 characters (max-width: 65ch) even when the column is wider.
Use rules as structure: a 1px or 2px top border on each section, aligned to the grid, does the work that boxes and shadows do in other styles.
Collapse by halving: at tablet width, go from twelve columns to six; on phones, to one or two. Keep the left edge and the rules, which carry the style even when the grid is gone.
Set type in steps: a small number of sizes with tight tracking on large headlines (letter-spacing around −0.03em to −0.045em) and normal tracking for body text.

When it works and when it doesn't

Swiss design suits content that benefits from order: architecture and design studios, conferences with schedules, consultancies, museums, annual reports and anything with a lot of facts to compare. It's less suited to brands whose appeal is warmth, intimacy or play, where the grid's neutrality can read as cold. A children's play centre set in Swiss style looks like a government notice.

The common failure is copying the surface (big red numbers, Helvetica-like type) without the grid. If elements don't share column lines, the page looks like an imitation. The other failure is too little contrast between sizes, so the strict layout ends up flat and monotonous. Look at visual hierarchy for ways to fix that with size and weight alone.

Accessibility notes

The style is kind to readers by default: left-aligned text, high contrast and clear order. Watch three things. Very tight tracking on headlines can make letters touch at small sizes, so loosen it below about 32px. Red used for meaning, such as marking a required field, needs a second cue because some readers can't tell red from dark grey. And a grid that reflows into one column should keep the reading order the same as the visual order on wide screens.

The Swiss design system in Anticode

Anticode's Swiss design system follows this style: one family (Inter Tight), one red as the action colour, square corners, a strict grid, and numbered sections with thin rules under the header and hero. In the template gallery, Atelier Nord shows a similar look on an architecture studio brief; like every template it's an app build in a similar style rather than a Swiss-system page.

The layout editor fits the method well: when you drag an element's edge to resize it, the size snaps to columns, so hand edits stay on the grid. The keyboard inspector sets gaps and alignment without free positioning.

Questions people ask

Is Swiss design the same as minimalism?

No. Swiss design is a method based on a grid and typographic rules, and it can carry a lot of information. Minimalism is about removing elements. A dense Swiss timetable isn't minimal at all.

How many columns should a Swiss grid website use?

Twelve is common because it divides into halves, thirds, quarters and sixths. Some layouts use six or eight. The number matters less than placing every element on the column lines.

What fonts suit Swiss style web design?

Grotesque or neo-grotesque sans-serifs with a neutral tone and several weights. Helvetica and Univers are the classic references; many screen families work in the same spirit.