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

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.

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.
• 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.
• 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.

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.

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 legt uit hoe je de eenheid kiest.

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

De code gebruikt 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

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 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.

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.

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.