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

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.

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

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.

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 visar hur du väljer 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 använder CSS grid. 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

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

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.

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.