Sveitsisk design: rutenettet, skriften og bruken i dag

Sveitsisk design er navnet de fleste bruker på den internasjonale typografiske stilen, en måte å drive grafisk design på som vokste frem i Sveits på 1950-tallet. Den organiserer hver side på et rutenett, setter skrift i rene grotesker, venstrejusterer teksten og fjerner dekor, så innholdet taler tydelig. Resultatet ser objektivt, ordnet og stillferdig selvsikkert ut, og derfor følger så mye moderne merkevarebygging, skilting og grensesnittdesign fortsatt reglene.

Denne guiden tar for seg hvor stilen kom fra, prinsippene du kan kopiere, hvordan du bygger et sveitsisk rutenett for virkelige formater, og hvordan du setter et strengt sveitsisk oppsett på en rik bakgrunn uten å miste noen av delene.

Hvor den internasjonale typografiske stilen kom fra

Stilen vokste ut av den modernistiske typografien fra 1920- og 1930-tallet og tok form i sveitsiske designskoler og studioer, særlig i Zürich og Basel. Utøverne ville at design skulle formidle informasjon klart og nøytralt, til ethvert publikum, og det er der ordet internasjonal kommer fra.

Noen navn og skrifter er verdt å kjenne. Josef Müller-Brockmann, som arbeidet i Zürich, laget konsertplakater og opplysningsplakater bygget på synlige rutenett, og skrev senere boken Grid Systems in Graphic Design, som fortsatt er et standardverk. Emil Ruder, som underviste i typografi i Basel, skrev Typographie, en lærebok om kontrast, rytme og rom. Skriften kom fra groteskene: Akzidenz-Grotesk, en tysk grotesk fra slutten av attenhundretallet, og deretter Helvetica og Univers, begge lansert i 1957.

Kjerneprinsippene i sveitsisk design

Sveitsisk design er mindre et uttrykk enn et sett med beslutninger. Hvis du tar disse beslutningene, leses arbeidet ditt som sveitsisk selv med en moderne skrift og en gradient bak.

• Et rutenett under alt. Kolonner, marger og spaltemellomrom bestemmes først, og hvert element står på dem.
• Groteskskrift. Grotesker med jevn tekstur, som regel i én familie. Se seriff eller sans seriff.
• Venstrejustert, løs høyrekant. Teksten justeres mot én kant, og sentrert og blokkjustert tekst er sjelden.
• Asymmetri. Oppsett balanseres med vekt og rom, ikke speilet rundt midten.
• Hierarki gjennom størrelse, vekt og plassering. Ingen bokser, ornamenter eller understrekinger for å signalisere viktighet. Se visuelt hierarki.
• Få farger. Ofte svart, hvitt og én sterk farge, gjerne rød.
• Objektive bilder. Fotografier og geometriske former i stedet for dekorativ illustrasjon.
• Rom som struktur. Tomme områder er planlagte deler av rutenettet, ikke rester.

Slik bygger du et sveitsisk rutenett for virkelige formater

Et rutenett er tre tall: margen rundt kanten, mellomrommet mellom kolonnene og antall kolonner. Velg kolonner som deler seg godt: seks kolonner deles i halve og tredeler, tolv i halve, tredeler, kvarte og sjettedeler. Sjekk så regnestykket, slik at hver kolonne er et helt antall piksler.

Legg til en grunnlinje også. Velg en liten enhet, som 8 px på et innlegg på 1080 px, og la linjehøyder og loddrett avstand være multipler av den. Tekst på tvers av kolonner står da på linje, og det er en stor del av grunnen til at sveitsiske sider føles så avklarte. Linjehøyde og linjelengde forklarer hvordan du velger enheten.

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

Koden bruker CSS grid layout. Overskriften spenner over fem kolonner og lar den sjette stå tom med vilje, og detaljen står i den høyre halvdelen nederst, så siden balanseres av asymmetri i stedet for sentrering.

Sveitsiske typografiregler du kan kopiere

Den mest sveitsiske detaljen er størrelsesskalaen. Bruk tre eller fire størrelser med tydelige sprang, som 24, 36 og 112 px på et innlegg på 1080 px, i stedet for en slak rampe. Store overskrifter ser som regel bedre ut med litt negativ sperring, og bokstavavstand viser hvor mye.

Hvordan sveitsisk design passer sammen med rike bakgrunner

Klassiske sveitsiske plakater hadde ofte flat farge, men rutenettet krever ikke det. Et strengt oppsett er nettopp det som lar en rik bakgrunn fungere: skriften er rolig, justert og begrenset, så en dyp gradient kan bære stemningen uten at siden blir til støy. Det er det samme stille oppsettet på et rikt materiale som beskrives i minimalisme eller maksimalisme.

Tre regler holder kombinasjonen ren. Legg tekstblokken over den roligste delen av gradienten. Bruk én tekstfarge til alt, som regel hvit eller svart. Og la lyskilden i bakgrunnen ligge i et tomt område av rutenettet, så den leses som en del av komposisjonen. For tett tekst over farge, se skrift på urolige bakgrunner.

I Gradiently tegner en Mark bakgrunnen live bak oppsettet og flytter sitt roligste område bak ordene, så en sveitsisk tekstblokk beholder kontrasten når du flytter den mellom kolonner eller kopierer designet til andre størrelser.