# Sveitsisk design: rutenettet, skriften og bruken i dag

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

Sveitsisk design ga grafisk design rutenettet, kjærligheten til groteskskrifter og vanen med å la strukturen føre ordet. Det er fortsatt den raskeste veien til oppsett som ser rolige og sikre ut.

## The short version

- Sveitsisk design, også kalt den internasjonale typografiske stilen, vokste frem i Sveits på 1950-tallet og verdsatte klarhet, objektivitet og orden over dekor.
- Kjerneverktøyene er et modulært rutenett, groteskskrifter som Akzidenz-Grotesk, Helvetica og Univers, venstrejustert tekst med løs høyrekant og asymmetriske oppsett.
- Hierarki i sveitsisk design kommer fra størrelse, vekt og plassering i rutenettet, ikke fra ornamenter, bokser eller mange farger.
- Sveitsiske oppsett passer godt sammen med rike gradientbakgrunner, fordi det strenge rutenettet holder ordene rolige mens fargefeltet bærer stemningen.
- Du kan bruke sveitsiske prinsipper på innlegg og lysbilder ved å velge et kolonnerutenett for hvert format og plassere hvert element på det.

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

| Skrift | Opphav | Hvorfor sveitsiske designere brukte den |
| --- | --- | --- |
| Akzidenz-Grotesk | Skriftstøperiet Berthold, Berlin, sent på attenhundretallet | En enkel, solid grotesk uten dekorative krusiduller |
| Helvetica | Skriftstøperiet Haas, Sveits, 1957 | Nøytral, jevn tekstur. Først solgt som Neue Haas Grotesk |
| Univers | Tegnet av Adrian Frutiger, 1957 | En stor, systematisk familie av vekter og bredder |

De tre skriftene som forbindes mest med sveitsisk design. I dag kan du oppnå samme følelse med mange grotesker med åpen lisens.

## 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](https://gradiently.design/nb/guide/serif-vs-sans-serif).
- **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](https://gradiently.design/nb/guide/visual-hierarchy).
- **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.

- Plakatpapir: #f4f1ea
- Trykksvart: #111111
- Signalrød: #d52b1e
- Varm grå: #8a8a85

En klassisk sveitsisk palett: papir, svart, én rød og en grå til sekundær tekst. Tilbakeholdenhet i farge lar rutenettet og skriften bære designet.

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

| Format | Størrelse | Rutenett | Kolonnebredde |
| --- | --- | --- | --- |
| Instagram-innlegg | 1080×1350 | 6 kolonner, 72 marg, 24 mellomrom | 136 px |
| X-innlegg | 1600×900 | 8 kolonner, 80 marg, 24 mellomrom | 159 px |
| Lysbilder 16:9 | 1920×1080 | 12 kolonner, 96 marg, 24 mellomrom | 122 px |
| A3-plakat i 300 dpi | 3508×4961 | 6 kolonner, 238 marg, 64 mellomrom | 452 px |

Utregnede rutenett. Kolonner, mellomrom og marger summerer seg nøyaktig til bredden, så ingenting havner på en halv piksel.

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](https://gradiently.design/nb/guide/line-height-and-line-length) forklarer hvordan du velger enheten.

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

Rutenettet for Instagram-innlegget over i CSS: seks kolonner på 136 px, et mellomrom på 24 px og en marg på 72 px. Linjehøydene står på en grunnlinje på 8 px.

Koden bruker [CSS grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/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

### Unngå

- Å sentrere hver linje
- Tre eller fire skrifter i ett design
- Bokser og omriss for å skille innhold
- Å sperre store overskrifter bredere
- Mange størrelser som er nesten like

### Gjør

- Venstrejuster teksten mot en kolonnekant
- Én groteskfamilie i to eller tre vekter
- Rom og justering for å skille innhold
- Stram store overskrifter litt
- Få størrelser med tydelige sprang mellom

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](https://gradiently.design/nb/guide/letter-spacing) 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](https://gradiently.design/nb/guide/minimalism-vs-maximalism).

- Okseblod til signalrød: `linear-gradient(160deg, #3a0306 0%, #b3120f 55%, #ff5a3c 100%)`
- Dyp marine over i himmelblå: `linear-gradient(180deg, #0a1a3a 0%, #1f4fbf 60%, #7fb0ff 100%)`
- Sol i øvre hjørne: `radial-gradient(circle at 80% 20%, #ffe066 0%, #ff7a00 35%, #b8002e 75%, #2a0010 100%)`

Gradienter som passer til et sveitsisk rutenett: én fargetonefamilie eller én enkelt lyskilde, med et rolig område der tekstblokken står.

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](https://gradiently.design/nb/guide/type-on-busy-backgrounds).

En A3-plakat med overskriften Formen følger rutenettet satt venstrejustert i en grotesk på en dyp gradientbakgrunn

En A3-plakat på et rutenett med seks kolonner: ordene holder venstresiden, fargen holder høyresiden.

Et stående innlegg med overskriften Si mindre. Juster mer. satt venstrejustert på samme gradient som plakaten

Det samme systemet på et Instagram-innlegg: én familie, tre størrelser, én tekstfarge.

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.

> **Mysetesten** Mys mot et ferdig sveitsisk oppsett. Du skal se noen få tydelige blokker på usynlige kolonner og én dominerende form. Hvis du ser en spredning av små biter, fjerner du noen eller fester dem til rutenettet.

## FAQ

### Hva er sveitsisk design?

Sveitsisk design, eller den internasjonale typografiske stilen, er en tilnærming til grafisk design som vokste frem i Sveits på 1950-tallet. Den bruker rutenett, groteskskrift, venstrejustert tekst og asymmetriske oppsett for å kommunisere klart uten dekor.

### Hvilken skrift brukes i sveitsisk design?

Sveitsiske designere brukte hovedsakelig grotesker: Akzidenz-Grotesk, og deretter Helvetica og Univers, begge lansert i 1957. Enhver nøytral grotesk med jevn tekstur gir et lignende resultat i dag.

### Hvor mange kolonner bør et sveitsisk rutenett ha?

Seks kolonner passer til de fleste innlegg og plakater fordi de deles i halve og tredeler. Tolv kolonner passer til brede formater som lysbilder og nettsteder. Sjekk at marger, mellomrom og kolonner summerer seg til den nøyaktige bredden.

### Kan sveitsisk design bruke gradienter?

Ja. Rutenettet, skriften og tilbakeholdenheten er det som gjør et oppsett sveitsisk. En rik gradient bak en streng tekstblokk fungerer godt, så lenge teksten står over et rolig område i én farge.

### Hvem var de viktigste sveitsiske designerne?

Josef Müller-Brockmann, kjent for plakatene sine bygget på rutenett og boken Grid Systems in Graphic Design, og Emil Ruder, som underviste i typografi i Basel og skrev Typographie, er to av de mest kjente.