Denne guide findes ikke på dit sprog endnu, så her er den på engelsk.
Kort fortalt
- Swiss design, also called the International Typographic Style, emerged in Switzerland in the 1950s and valued clarity, objectivity and order over decoration.
- Its core tools are a modular grid, sans-serif type such as Akzidenz-Grotesk, Helvetica and Univers, flush-left ragged-right text and asymmetric layouts.
- Hierarchy in Swiss design comes from size, weight and position on the grid rather than from ornament, boxes or many colours.
- Swiss layouts pair well with rich gradient backgrounds because the strict grid keeps the words calm while the colour field carries the mood.
- You can apply Swiss principles to social posts and slides by choosing a column grid for each format and placing every element on it.
På denne side
Swiss design is the name most people use for the International Typographic Style, a way of doing graphic design that emerged in Switzerland in the 1950s. It organises every page on a grid, sets type in clean sans-serifs, aligns text flush left, and removes decoration so the content speaks plainly. The result looks objective, orderly and quietly confident, which is why so much modern branding, signage and interface design still follows its rules.
This guide covers where the style came from, the principles you can copy, how to build a Swiss grid for real formats, and how to set a strict Swiss layout on a rich background without losing either.
Where the International Typographic Style came from
The style grew from the modernist typography of the 1920s and 1930s and took shape in Swiss design schools and studios, particularly in Zurich and Basel. Its practitioners wanted design to communicate information clearly and neutrally, for any audience, which is where the word international comes from.
A few names and typefaces are worth knowing. Josef Müller-Brockmann, working in Zurich, made concert and public-awareness posters built on visible grids, and later wrote the book Grid Systems in Graphic Design, still a standard reference. Emil Ruder, who taught typography in Basel, wrote Typographie, a textbook on contrast, rhythm and space. The type came from the grotesques: Akzidenz-Grotesk, a German sans-serif from the end of the nineteenth century, then Helvetica and Univers, both released in 1957.
| Typeface | Origin | Why Swiss designers used it |
|---|---|---|
| Akzidenz-Grotesk | Berthold type foundry, Berlin, late nineteenth century | A plain, sturdy grotesque with no decorative flourishes |
| Helvetica | Haas type foundry, Switzerland, 1957 | Neutral, even texture; first sold as Neue Haas Grotesk |
| Univers | Designed by Adrian Frutiger, 1957 | A large, systematic family of weights and widths |
The core principles of Swiss design
Swiss design is less a look than a set of decisions. If you make these decisions, your work will read as Swiss even with a modern typeface and a gradient behind it.
- A grid underneath everything. Columns, margins and gutters are decided first, and every element sits on them.
- Sans-serif type. Grotesques with an even texture, usually in one family. See serif vs sans serif.
- Flush left, ragged right. Text aligns to one edge; centred and justified text are rare.
- Asymmetry. Layouts are balanced by weight and space, not mirrored around the centre.
- Hierarchy by size, weight and position. No boxes, ornaments or underlines to signal importance. See visual hierarchy.
- Few colours. Often black, white and one strong colour, frequently red.
- Objective imagery. Photographs and geometric forms rather than decorative illustration.
- Space as structure. Empty areas are planned parts of the grid, not leftovers.
How to build a Swiss grid for real formats
A grid is three numbers: the margin around the edge, the gutter between columns, and the number of columns. Pick columns that divide well: six columns split into halves and thirds, twelve into halves, thirds, quarters and sixths. Then check the arithmetic so every column is a whole number of pixels.
| Format | Size | Grid | Column width |
|---|---|---|---|
| Instagram post | 1080×1350 | 6 columns, 72 margin, 24 gutter | 136 px |
| X post | 1600×900 | 8 columns, 80 margin, 24 gutter | 159 px |
| Slides 16:9 | 1920×1080 | 12 columns, 96 margin, 24 gutter | 122 px |
| A3 poster at 300 dpi | 3508×4961 | 6 columns, 238 margin, 64 gutter | 452 px |
Add a baseline too. Choose a small unit, such as 8 px on a 1080 px post, and make line heights and vertical spacing multiples of it. Text across columns then lines up, which is a large part of why Swiss pages feel so settled. Line height and line length explains how to pick the unit.
.poster {
box-sizing: border-box;
width: 1080px;
height: 1350px;
padding: 72px;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: auto 1fr auto;
column-gap: 24px;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.poster .kicker { grid-column: 1 / 3; font-size: 24px; line-height: 32px; }
.poster h1 { grid-column: 1 / 6; grid-row: 2; align-self: center; font-size: 112px; line-height: 104px; letter-spacing: -0.02em; font-weight: 700; margin: 0; }
.poster .detail { grid-column: 4 / 7; grid-row: 3; font-size: 36px; line-height: 48px; }The code uses CSS grid layout. The headline spans five columns and leaves the sixth empty on purpose; the detail sits in the right half at the bottom, so the page is balanced by asymmetry rather than centring.
Swiss typography rules you can copy
Avoid
- Centring every line
- Three or four typefaces in one design
- Boxes and outlines to separate content
- Letter-spacing large headlines wider
- Many sizes that are nearly the same
Do
- Align text flush left to a column edge
- One grotesque family in two or three weights
- Space and alignment to separate content
- Tighten large headlines slightly
- Few sizes with clear jumps between them
The most Swiss detail is the size scale. Use three or four sizes with obvious jumps, such as 24, 36 and 112 px on a 1080 px post, rather than a gentle ramp. Large headlines usually look better with slightly negative tracking; letter spacing shows the amounts.
How Swiss design pairs with rich backgrounds
Classic Swiss posters were often flat colour, but the grid does not require it. A strict layout is exactly what lets a rich background work: the type is calm, aligned and limited, so a deep gradient can carry the mood without the page turning to noise. It is the same quiet layout on a rich material described in minimalism vs maximalism.
Three rules keep the pairing clean. Put the text block over the calmest part of the gradient. Use one text colour for everything, usually white or black. And let the light source in the background sit in an empty grid area, so it reads as part of the composition. For dense words over colour, see type on busy backgrounds.
An A3 poster on a six-column grid: the words hold the left, the colour holds the right.
The same system on an Instagram post: one family, three sizes, one text colour.
In Gradiently, a Mark renders the background live behind the layout and moves its calmest region behind the words, so a Swiss type block keeps its contrast as you shift it between columns or copy the design to other sizes.
Spørgsmål, folk stiller
What is Swiss design?
Swiss design, or the International Typographic Style, is a graphic design approach that emerged in Switzerland in the 1950s. It uses grids, sans-serif type, flush-left text and asymmetric layouts to communicate clearly without decoration.
What font is used in Swiss design?
Swiss designers mainly used grotesque sans-serifs: Akzidenz-Grotesk, then Helvetica and Univers, both released in 1957. Any neutral grotesque with an even texture gives a similar result today.
How many columns should a Swiss grid have?
Six columns suit most social posts and posters because they divide into halves and thirds. Twelve columns suit wide formats like slides and websites. Check that margins, gutters and columns add up to the exact width.
Can Swiss design use gradients?
Yes. The grid, the type and the restraint are what make a layout Swiss. A rich gradient behind a strict type block works well, as long as the text sits over a calm area in one colour.
Who were the key Swiss designers?
Josef Müller-Brockmann, known for his grid-based posters and his book Grid Systems in Graphic Design, and Emil Ruder, who taught typography in Basel and wrote Typographie, are two of the best known.
Skrevet af Gradiently
Holdet bag Gradiently, et designværktøj bygget om Marks: levende gradienter, der får alt, du designer, til at ligne dig.
Se vores profil
