# Swiss design: het grid, de letters en hoe je het nu gebruikt

[Canonical HTML page](https://gradiently.design/nl/guide/swiss-design)

Swiss design gaf grafisch ontwerp zijn grid, zijn liefde voor schreefloze letters en de gewoonte om de structuur het woord te laten doen. Het is nog steeds de snelste weg naar lay-outs die rustig en zeker ogen.

## The short version

- Swiss design, ook de Internationale Typografische Stijl genoemd, ontstond in de jaren vijftig in Zwitserland en stelde helderheid, objectiviteit en orde boven decoratie.
- De belangrijkste gereedschappen zijn een modulair grid, schreefloze letters zoals Akzidenz-Grotesk, Helvetica en Univers, links uitgelijnde tekst met een vrije rechterregelval en asymmetrische lay-outs.
- Hiërarchie komt in Swiss design voort uit grootte, gewicht en positie op het grid, en niet uit ornament, kaders of veel kleuren.
- Zwitserse lay-outs passen goed bij rijke achtergronden met kleurverloop, omdat het strakke grid de woorden rustig houdt terwijl het kleurveld de sfeer draagt.
- Je kunt de Zwitserse principes toepassen op social posts en dia’s door voor elk formaat een kolommengrid te kiezen en elk element daarop te plaatsen.

**Swiss design** is de naam die de meeste mensen gebruiken voor de Internationale Typografische Stijl, een manier van grafisch ontwerpen die in de jaren vijftig in Zwitserland ontstond. De stijl ordent elke pagina op een grid, zet tekst in strakke schreefloze letters, lijnt tekst links uit en haalt decoratie weg zodat de inhoud helder spreekt. Het resultaat oogt objectief, geordend en rustig zelfverzekerd, en daarom volgt zoveel moderne branding, bewegwijzering en interfacedesign nog altijd deze regels.

Deze gids behandelt waar de stijl vandaan kwam, de principes die je kunt overnemen, hoe je een Zwitsers grid bouwt voor echte formaten, en hoe je een strakke Zwitserse lay-out op een rijke achtergrond zet zonder een van beide te verliezen.

## Waar de Internationale Typografische Stijl vandaan kwam

De stijl groeide uit de modernistische typografie van de jaren twintig en dertig en kreeg vorm op Zwitserse ontwerpscholen en in studio’s, vooral in Zürich en Bazel. De beoefenaars wilden dat design informatie helder en neutraal overbracht, voor elk publiek, en daar komt het woord *internationaal* vandaan.

Een paar namen en lettertypen zijn het kennen waard. **Josef Müller-Brockmann**, werkzaam in Zürich, maakte concertaffiches en voorlichtingsaffiches op zichtbare grids en schreef later het boek *Grid Systems in Graphic Design*, nog steeds een standaardwerk. **Emil Ruder**, die typografie doceerde in Bazel, schreef *Typographie*, een leerboek over contrast, ritme en ruimte. De letters kwamen van de grotesken: **Akzidenz-Grotesk**, een Duitse schreefloze van het einde van de negentiende eeuw, daarna **Helvetica** en **Univers**, beide uitgebracht in 1957.

| Lettertype | Herkomst | Waarom ontwerpers het gebruikten |
| --- | --- | --- |
| Akzidenz-Grotesk | Lettergieterij Berthold, Berlijn, eind negentiende eeuw | Een sobere, stevige groteske zonder decoratieve krullen |
| Helvetica | Lettergieterij Haas, Zwitserland, 1957 | Neutraal, gelijkmatig tekstbeeld; eerst verkocht als Neue Haas Grotesk |
| Univers | Ontworpen door Adrian Frutiger, 1957 | Een grote, systematische familie van gewichten en breedtes |

De drie lettertypen die het sterkst met Swiss design worden verbonden. Vandaag bereik je hetzelfde gevoel met veel grotesken onder een open licentie.

## De kernprincipes van Swiss design

Swiss design is minder een uiterlijk dan een reeks beslissingen. Neem je deze beslissingen, dan leest je werk als Zwitsers, ook met een modern lettertype en een kleurverloop erachter.

- **Een grid onder alles.** Kolommen, marges en tussenruimtes worden eerst bepaald, en elk element staat erop.
- **Schreefloze letters.** Grotesken met een gelijkmatig tekstbeeld, meestal uit één familie. Zie [schreef of schreefloos](https://gradiently.design/nl/guide/serif-vs-sans-serif).
- **Links uitgelijnd, rechts vrij.** Tekst lijnt uit op één rand; gecentreerde en uitgevulde tekst zijn zeldzaam.
- **Asymmetrie.** Lay-outs zijn in balans door gewicht en ruimte, niet gespiegeld rond het midden.
- **Hiërarchie door grootte, gewicht en positie.** Geen kaders, ornamenten of onderstrepingen om belang aan te geven. Zie [visuele hiërarchie](https://gradiently.design/nl/guide/visual-hierarchy).
- **Weinig kleuren.** Vaak zwart, wit en één sterke kleur, dikwijls rood.
- **Objectief beeld.** Foto’s en geometrische vormen in plaats van decoratieve illustratie.
- **Ruimte als structuur.** Lege vlakken zijn geplande delen van het grid, geen restjes.

- Affichepapier: #f4f1ea
- Drukzwart: #111111
- Signaalrood: #d52b1e
- Warm grijs: #8a8a85

Een klassiek Zwitsers palet: papier, zwart, één rood en een grijs voor secundaire tekst. Terughoudendheid in kleur laat het grid en de letters het ontwerp dragen.

## Zo bouw je een Zwitsers grid voor echte formaten

Een grid bestaat uit drie getallen: de marge langs de rand, de tussenruimte tussen kolommen en het aantal kolommen. Kies een aantal dat goed deelbaar is: zes kolommen vallen uiteen in helften en derden, twaalf in helften, derden, kwarten en zesden. Reken het daarna na, zodat elke kolom een heel aantal pixels breed is.

| Formaat | Afmeting | Grid | Kolombreedte |
| --- | --- | --- | --- |
| Instagram-post | 1080×1350 | 6 kolommen, marge 72, tussenruimte 24 | 136 px |
| X-post | 1600×900 | 8 kolommen, marge 80, tussenruimte 24 | 159 px |
| Dia’s 16:9 | 1920×1080 | 12 kolommen, marge 96, tussenruimte 24 | 122 px |
| A3-poster op 300 dpi | 3508×4961 | 6 kolommen, marge 238, tussenruimte 64 | 452 px |

Uitgewerkte grids. Kolommen, tussenruimtes en marges tellen exact op tot de breedte, zodat niets op een halve pixel belandt.

Voeg ook een basislijn toe. Kies een kleine eenheid, zoals 8 px op een post van 1080 px, en maak regelhoogtes en verticale afstanden een veelvoud daarvan. Tekst in verschillende kolommen lijnt dan uit, en dat is een groot deel van de reden waarom Zwitserse pagina’s zo rustig aanvoelen. [Regelhoogte en regellengte](https://gradiently.design/nl/guide/line-height-and-line-length) legt uit hoe je de eenheid kiest.

```css
.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; }
```

Het grid van de Instagram-post hierboven in CSS: zes kolommen van 136 px, een tussenruimte van 24 px en een marge van 72 px. Regelhoogtes staan op een basislijn van 8 px.

De code gebruikt [CSS grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout). De kop beslaat vijf kolommen en laat de zesde bewust leeg; het detail staat onderaan in de rechterhelft, zodat de pagina in balans is door asymmetrie en niet door centreren.

## Zwitserse typografieregels die je kunt overnemen

### Vermijd

- Elke regel centreren
- Drie of vier lettertypen in één ontwerp
- Kaders en omlijningen om inhoud te scheiden
- Grote koppen wijder spatiëren
- Veel groottes die bijna gelijk zijn

### Doe

- Lijn tekst links uit op een kolomrand
- Eén groteske familie in twee of drie gewichten
- Ruimte en uitlijning om inhoud te scheiden
- Zet grote koppen iets krapper
- Weinig groottes met duidelijke sprongen ertussen

Het meest Zwitserse detail is de schaal van groottes. Gebruik drie of vier groottes met duidelijke sprongen, zoals 24, 36 en 112 px op een post van 1080 px, in plaats van een geleidelijke oploop. Grote koppen zien er meestal beter uit met een licht negatieve spatiëring; [letterspatiëring](https://gradiently.design/nl/guide/letter-spacing) laat de waarden zien.

## Hoe Swiss design samengaat met rijke achtergronden

Klassieke Zwitserse affiches hadden vaak een egale kleur, maar het grid vereist dat niet. Een strakke lay-out is juist wat een rijke achtergrond laat werken: de tekst is rustig, uitgelijnd en beperkt, zodat een diep kleurverloop de sfeer kan dragen zonder dat de pagina ruis wordt. Het is dezelfde stille lay-out op een rijk materiaal die wordt beschreven in [minimalisme of maximalisme](https://gradiently.design/nl/guide/minimalism-vs-maximalism).

- Ossenbloed naar signaalrood: `linear-gradient(160deg, #3a0306 0%, #b3120f 55%, #ff5a3c 100%)`
- Diep marineblauw naar hemelsblauw: `linear-gradient(180deg, #0a1a3a 0%, #1f4fbf 60%, #7fb0ff 100%)`
- Zon in de bovenhoek: `radial-gradient(circle at 80% 20%, #ffe066 0%, #ff7a00 35%, #b8002e 75%, #2a0010 100%)`

Kleurverlopen die bij een Zwitsers grid passen: één kleurfamilie of één lichtbron, met een rustig vlak waar het tekstblok staat.

Drie regels houden de combinatie zuiver. Zet het tekstblok op het rustigste deel van het verloop. Gebruik één tekstkleur voor alles, meestal wit of zwart. En laat de lichtbron in de achtergrond in een leeg deel van het grid vallen, zodat hij leest als onderdeel van de compositie. Voor veel woorden op kleur, zie [tekst op drukke achtergronden](https://gradiently.design/nl/guide/type-on-busy-backgrounds).

Een A3-poster met de kop Vorm volgt het grid, links uitgelijnd in een schreefloze letter op een diepe achtergrond met kleurverloop

Een A3-poster op een grid van zes kolommen: de woorden houden links vast, de kleur rechts.

Een staande social post met de kop Zeg minder. Lijn meer uit., links uitgelijnd op hetzelfde kleurverloop als de poster

Hetzelfde systeem op een Instagram-post: één familie, drie groottes, één tekstkleur.

In Gradiently tekent een Mark de achtergrond live achter de lay-out en verplaatst hij zijn rustigste gebied achter de woorden, zodat een Zwitsers tekstblok zijn contrast houdt wanneer je het tussen kolommen verschuift of het ontwerp naar andere formaten kopieert.

> **De knijptest** Knijp je ogen half dicht bij een voltooide Zwitserse lay-out. Je zou een paar duidelijke blokken op onzichtbare kolommen moeten zien en één dominante vorm. Zie je een verspreide verzameling kleine stukjes, haal er dan een paar weg of zet ze op het grid.

## FAQ

### Wat is Swiss design?

Swiss design, of de Internationale Typografische Stijl, is een benadering van grafisch ontwerp die in de jaren vijftig in Zwitserland ontstond. De stijl gebruikt grids, schreefloze letters, links uitgelijnde tekst en asymmetrische lay-outs om helder te communiceren zonder decoratie.

### Welk lettertype wordt gebruikt in Swiss design?

Zwitserse ontwerpers gebruikten vooral groteske schreeflozen: Akzidenz-Grotesk, daarna Helvetica en Univers, beide uitgebracht in 1957. Elke neutrale groteske met een gelijkmatig tekstbeeld geeft vandaag een vergelijkbaar resultaat.

### Hoeveel kolommen moet een Zwitsers grid hebben?

Zes kolommen passen bij de meeste social posts en posters, omdat ze in helften en derden te verdelen zijn. Twaalf kolommen passen bij brede formaten zoals dia’s en websites. Controleer of marges, tussenruimtes en kolommen optellen tot de exacte breedte.

### Kan Swiss design kleurverlopen gebruiken?

Ja. Het grid, de letters en de terughoudendheid maken een lay-out Zwitsers. Een rijk kleurverloop achter een strak tekstblok werkt goed, zolang de tekst in één kleur op een rustig vlak staat.

### Wie waren de belangrijkste Zwitserse ontwerpers?

Josef Müller-Brockmann, bekend van zijn affiches op grids en zijn boek Grid Systems in Graphic Design, en Emil Ruder, die typografie doceerde in Bazel en Typographie schreef, zijn twee van de bekendste.