# Schweizisk design: rutnätet, typografin och hur du använder den i dag

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

Schweizisk design gav grafisk design dess rutnät, dess förkärlek för seriflösa typsnitt och vanan att låta strukturen tala. Det är fortfarande den snabbaste vägen till layouter som ser lugna och säkra ut.

## The short version

- Schweizisk design, även kallad den internationella typografiska stilen, växte fram i Schweiz på 1950-talet och satte klarhet, saklighet och ordning framför dekoration.
- Dess kärnverktyg är ett modulärt rutnät, seriflösa typsnitt som Akzidenz-Grotesk, Helvetica och Univers, vänsterjusterad text med ojämn högerkant och asymmetriska layouter.
- Hierarkin i schweizisk design kommer av storlek, vikt och placering i rutnätet snarare än av prydnader, ramar eller många färger.
- Schweiziska layouter passar bra ihop med rika gradientbakgrunder, eftersom det strikta rutnätet håller orden lugna medan färgytan bär stämningen.
- Du kan använda schweiziska principer i inlägg och bildspel genom att välja ett kolumnrutnät för varje format och placera varje element på det.

**Schweizisk design** är namnet de flesta använder för den internationella typografiska stilen, ett sätt att göra grafisk design som växte fram i Schweiz på 1950-talet. Den organiserar varje sida i ett rutnät, sätter text i rena seriflösa typsnitt, justerar texten till vänster och tar bort dekorationer så att innehållet talar klarspråk. Resultatet ser objektivt, ordnat och stillsamt självsäkert ut, vilket är varför så mycket modern varumärkesprofilering, skyltning och gränssnittsdesign fortfarande följer dess regler.

Den här guiden går igenom var stilen kommer ifrån, principerna du kan kopiera, hur du bygger ett schweiziskt rutnät för verkliga format och hur du lägger en strikt schweizisk layout på en rik bakgrund utan att förlora någondera.

## Var den internationella typografiska stilen kom ifrån

Stilen växte fram ur 1920- och 1930-talens modernistiska typografi och tog form på schweiziska designskolor och studior, särskilt i Zürich och Basel. Dess utövare ville att design skulle förmedla information tydligt och neutralt, till vilken publik som helst, och därav ordet *internationell*.

Några namn och typsnitt är värda att känna till. **Josef Müller-Brockmann**, verksam i Zürich, gjorde konsert- och upplysningsaffischer byggda på synliga rutnät, och skrev senare boken *Grid Systems in Graphic Design*, som fortfarande är en standardreferens. **Emil Ruder**, som undervisade i typografi i Basel, skrev *Typographie*, en lärobok om kontrast, rytm och yta. Typsnitten kom från groteskerna: **Akzidenz-Grotesk**, ett tyskt seriflöst typsnitt från slutet av 1800-talet, sedan **Helvetica** och **Univers**, som båda släpptes 1957.

| Typsnitt | Ursprung | Varför schweiziska designers använde det |
| --- | --- | --- |
| Akzidenz-Grotesk | Typgjuteriet Berthold, Berlin, slutet av 1800-talet | En enkel, gedigen grotesk utan dekorativa krusiduller |
| Helvetica | Typgjuteriet Haas, Schweiz, 1957 | Neutral, jämn textyta; såldes först som Neue Haas Grotesk |
| Univers | Formgivet av Adrian Frutiger, 1957 | En stor, systematisk familj av vikter och bredder |

De tre typsnitt som mest förknippas med schweizisk design. I dag når du samma känsla med många groteskers öppna licenser.

## Den schweiziska designens kärnprinciper

Schweizisk design är mindre ett utseende än en uppsättning beslut. Fattar du de här besluten läses ditt arbete som schweiziskt även med ett modernt typsnitt och en gradient bakom.

- **Ett rutnät under allt.** Kolumner, marginaler och rännor bestäms först, och varje element sitter på dem.
- **Seriflös typografi.** Grotesker med jämn textyta, oftast i en enda familj. Läs [serif mot sans serif](https://gradiently.design/sv/guide/serif-vs-sans-serif).
- **Vänsterjusterat med ojämn högerkant.** Texten följer en kant; centrerad och marginaljusterad text är sällsynt.
- **Asymmetri.** Layouter balanseras med vikt och yta, inte speglade runt mitten.
- **Hierarki genom storlek, vikt och placering.** Inga ramar, prydnader eller understrykningar som signalerar vikt. Läs [visuell hierarki](https://gradiently.design/sv/guide/visual-hierarchy).
- **Få färger.** Ofta svart, vitt och en stark färg, ofta rött.
- **Objektiva bilder.** Fotografier och geometriska former snarare än dekorativa illustrationer.
- **Yta som struktur.** Tomma ytor är planerade delar av rutnätet, inte rester.

- Affischpapper: #f4f1ea
- Tryckt svart: #111111
- Signalrött: #d52b1e
- Varmgrått: #8a8a85

En klassisk schweizisk palett: papper, svart, ett rött och ett grått för sekundär text. Återhållsamhet i färg låter rutnätet och typografin bära designen.

## Så bygger du ett schweiziskt rutnät för verkliga format

Ett rutnät består av tre tal: marginalen runt kanten, rännan mellan kolumnerna och antalet kolumner. Välj kolumner som delar sig bra: sex kolumner delas i halvor och tredjedelar, tolv i halvor, tredjedelar, fjärdedelar och sjättedelar. Kontrollera sedan räkningen så att varje kolumn blir ett helt antal pixlar.

| Format | Storlek | Rutnät | Kolumnbredd |
| --- | --- | --- | --- |
| Instagraminlägg | 1080×1350 | 6 kolumner, 72 marginal, 24 ränna | 136 px |
| X-inlägg | 1600×900 | 8 kolumner, 80 marginal, 24 ränna | 159 px |
| Bildspel 16:9 | 1920×1080 | 12 kolumner, 96 marginal, 24 ränna | 122 px |
| A3-affisch i 300 dpi | 3508×4961 | 6 kolumner, 238 marginal, 64 ränna | 452 px |

Genomräknade rutnät. Kolumner, rännor och marginaler summerar exakt till bredden, så inget hamnar på en halv pixel.

Lägg till en baslinje också. Välj en liten enhet, till exempel 8 px på ett inlägg på 1080 px, och gör radavstånd och lodräta mellanrum till multiplar av den. Texten över kolumnerna linjerar då med varandra, vilket är en stor del av varför schweiziska sidor känns så stadiga. [Radavstånd och radlängd](https://gradiently.design/sv/guide/line-height-and-line-length) visar hur du väljer 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; }
```

Rutnätet för Instagraminlägget ovan i CSS: sex kolumner på 136 px, en ränna på 24 px och en marginal på 72 px. Radavstånden följer en baslinje på 8 px.

Koden använder [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout). Rubriken spänner över fem kolumner och lämnar den sjätte tom med flit. Detaljen ligger i högra halvan längst ned, så sidan balanseras av asymmetri snarare än centrering.

## Schweiziska typografiregler du kan kopiera

### Undvik

- Att centrera varje rad
- Tre eller fyra typsnitt i en design
- Ramar och konturer för att skilja innehåll åt
- Att bokstavsavståndet på stora rubriker blir större
- Många storlekar som är nästan likadana

### Gör så här

- Justera texten åt vänster mot en kolumnkant
- En groteskfamilj i två eller tre vikter
- Yta och justering för att skilja innehåll åt
- Dra åt stora rubriker något
- Få storlekar med tydliga hopp mellan sig

Den mest schweiziska detaljen är storleksskalan. Använd tre eller fyra storlekar med tydliga hopp, till exempel 24, 36 och 112 px på ett inlägg på 1080 px, i stället för en mjuk trappa. Stora rubriker ser oftast bättre ut med något negativt teckenavstånd; [bokstavsavstånd](https://gradiently.design/sv/guide/letter-spacing) visar hur mycket.

## Hur schweizisk design passar med rika bakgrunder

Klassiska schweiziska affischer hade ofta enfärgad botten, men rutnätet kräver det inte. En strikt layout är just det som får en rik bakgrund att fungera: typografin är lugn, linjerad och begränsad, så en djup gradient kan bära stämningen utan att sidan blir brus. Det är samma stillsamma layout på ett rikt material som beskrivs i [minimalism mot maximalism](https://gradiently.design/sv/guide/minimalism-vs-maximalism).

- Oxblod till signalrött: `linear-gradient(160deg, #3a0306 0%, #b3120f 55%, #ff5a3c 100%)`
- Djup marinblått mot himmel: `linear-gradient(180deg, #0a1a3a 0%, #1f4fbf 60%, #7fb0ff 100%)`
- Sol i övre hörnet: `radial-gradient(circle at 80% 20%, #ffe066 0%, #ff7a00 35%, #b8002e 75%, #2a0010 100%)`

Gradienter som passar ett schweiziskt rutnät: en nyansfamilj eller en enda ljuskälla, med en lugn yta där textblocket ligger.

Tre regler håller kombinationen ren. Lägg textblocket över den lugnaste delen av gradienten. Använd en textfärg till allt, oftast vit eller svart. Och låt ljuskällan i bakgrunden ligga i en tom ruta i rutnätet, så att den läses som en del av kompositionen. För tät text över färg, se [text på stökiga bakgrunder](https://gradiently.design/sv/guide/type-on-busy-backgrounds).

En A3-affisch med rubriken Formen följer rutnätet, vänsterjusterad i ett seriflöst typsnitt på en djup gradientbakgrund

En A3-affisch på ett sexkolumnsrutnät: orden håller vänster sida, färgen håller höger.

Ett stående inlägg för sociala medier med rubriken Säg mindre. Justera mer., vänsterjusterad på samma gradient som affischen

Samma system på ett Instagraminlägg: en familj, tre storlekar, en textfärg.

I Gradiently ritar en Mark bakgrunden live bakom layouten och flyttar sin lugnaste del bakom orden, så ett schweiziskt textblock behåller sin kontrast när du flyttar det mellan kolumner eller kopierar designen till andra storlekar.

> **Kisatestet** Kisa med ögonen mot en färdig schweizisk layout. Du ska se några tydliga block på osynliga kolumner och en dominerande form. Ser du en spridning av små bitar, ta bort några eller lägg dem i rutnätet.

## FAQ

### Vad är schweizisk design?

Schweizisk design, eller den internationella typografiska stilen, är ett grafiskt designsätt som växte fram i Schweiz på 1950-talet. Den använder rutnät, seriflös typografi, vänsterjusterad text och asymmetriska layouter för att kommunicera tydligt utan dekoration.

### Vilket typsnitt används i schweizisk design?

Schweiziska designers använde mest seriflösa grotesker: Akzidenz-Grotesk, sedan Helvetica och Univers, som båda släpptes 1957. Vilken neutral grotesk som helst med jämn textyta ger ett liknande resultat i dag.

### Hur många kolumner ska ett schweiziskt rutnät ha?

Sex kolumner passar de flesta inlägg och affischer, eftersom de delas i halvor och tredjedelar. Tolv kolumner passar breda format som bildspel och webbplatser. Kontrollera att marginaler, rännor och kolumner summerar till exakt bredd.

### Kan schweizisk design använda gradienter?

Ja. Rutnätet, typografin och återhållsamheten är det som gör en layout schweizisk. En rik gradient bakom ett strikt textblock fungerar bra, så länge texten ligger över en lugn yta i en enda färg.

### Vilka var de viktigaste schweiziska designerna?

Josef Müller-Brockmann, känd för sina rutnätsbaserade affischer och boken Grid Systems in Graphic Design, och Emil Ruder, som undervisade i typografi i Basel och skrev Typographie, är två av de mest kända.