Swiss design: la griglia, la tipografia e come usarlo oggi

Swiss design è il nome che la maggior parte delle persone usa per lo Stile tipografico internazionale, un modo di fare grafica nato in Svizzera negli anni Cinquanta. Organizza ogni pagina su una griglia, compone il testo in sans serif puliti, allinea il testo a sinistra ed elimina la decorazione perché il contenuto parli in modo diretto. Il risultato appare oggettivo, ordinato e sicuro senza alzare la voce, ed è per questo che tanto branding, segnaletica e design di interfacce moderni seguono ancora le sue regole.

Questa guida spiega da dove viene lo stile, i principi che puoi copiare, come costruire una griglia svizzera per formati reali e come mettere un layout svizzero rigoroso su uno sfondo ricco senza perdere né l’uno né l’altro.

Da dove viene lo Stile tipografico internazionale

Lo stile nacque dalla tipografia modernista degli anni Venti e Trenta e prese forma nelle scuole e negli studi di design svizzeri, soprattutto a Zurigo e Basilea. I suoi protagonisti volevano che il design comunicasse le informazioni in modo chiaro e neutro, per qualsiasi pubblico, ed è da qui che viene la parola internazionale.

Vale la pena conoscere alcuni nomi e caratteri. Josef Müller-Brockmann, che lavorava a Zurigo, realizzò poster per concerti e campagne pubbliche costruiti su griglie visibili, e in seguito scrisse il libro Grid Systems in Graphic Design, ancora oggi un riferimento. Emil Ruder, che insegnava tipografia a Basilea, scrisse Typographie, un manuale su contrasto, ritmo e spazio. I caratteri venivano dai grotesque: Akzidenz-Grotesk, un sans serif tedesco della fine dell’Ottocento, poi Helvetica e Univers, entrambi usciti nel 1957.

I principi fondamentali dello Swiss design

Lo Swiss design è meno uno stile che un insieme di decisioni. Se prendi queste decisioni, il tuo lavoro si leggerà come svizzero anche con un font moderno e un gradiente dietro.

• Una griglia sotto a tutto. Colonne, margini e spazi tra le colonne si decidono per primi, e ogni elemento ci si appoggia.
• Caratteri sans serif. Grotesque con una tessitura uniforme, di solito di una sola famiglia. Leggi serif o sans serif.
• Allineato a sinistra, non giustificato. Il testo si allinea a un solo bordo; il testo centrato o giustificato è raro.
• Asimmetria. I layout si bilanciano con il peso e lo spazio, non specchiandosi attorno al centro.
• Gerarchia con dimensione, peso e posizione. Niente riquadri, ornamenti o sottolineature per segnalare l’importanza. Leggi gerarchia visiva.
• Pochi colori. Spesso nero, bianco e un colore forte, di frequente il rosso.
• Immagini oggettive. Fotografie e forme geometriche invece di illustrazioni decorative.
• Lo spazio come struttura. Le aree vuote sono parti pianificate della griglia, non avanzi.

Come costruire una griglia svizzera per formati reali

Una griglia sono tre numeri: il margine attorno al bordo, lo spazio tra le colonne e il numero di colonne. Scegli colonne che si dividono bene: sei colonne si dividono in metà e terzi, dodici in metà, terzi, quarti e sesti. Poi controlla i conti, così ogni colonna è un numero intero di pixel.

Aggiungi anche una linea di base. Scegli una piccola unità, come 8 px su un post da 1080 px, e fai in modo che interlinee e spaziature verticali ne siano multipli. Così il testo si allinea da una colonna all’altra, ed è gran parte del motivo per cui le pagine svizzere sembrano così stabili. Interlinea e lunghezza della riga spiega come scegliere l’unità.

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

Il codice usa il layout a griglia CSS. Il titolo occupa cinque colonne e lascia di proposito vuota la sesta; il dettaglio sta nella metà destra in basso, così la pagina si bilancia con l’asimmetria invece che con la centratura.

Regole tipografiche svizzere da copiare

Il dettaglio più svizzero è la scala delle dimensioni. Usa tre o quattro dimensioni con salti evidenti, come 24, 36 e 112 px su un post da 1080 px, invece di una rampa graduale. I titoli grandi di solito rendono meglio con una spaziatura leggermente negativa; la spaziatura delle lettere indica i valori.

Come lo Swiss design si abbina agli sfondi ricchi

I poster svizzeri classici erano spesso a colore piatto, ma la griglia non lo impone. Un layout rigoroso è proprio ciò che permette a uno sfondo ricco di funzionare: il testo è calmo, allineato e limitato, così un gradiente profondo può portare l’atmosfera senza che la pagina diventi rumore. È lo stesso layout sobrio su un materiale ricco descritto in minimalismo e massimalismo.

Tre regole mantengono pulito l’abbinamento. Metti il blocco di testo sulla parte più calma del gradiente. Usa un solo colore per tutto il testo, di solito bianco o nero. E lascia che la fonte di luce dello sfondo stia in un’area vuota della griglia, così si legge come parte della composizione. Per molte parole sul colore, leggi testo su sfondi carichi.

In Gradiently un Mark rende dal vivo lo sfondo dietro il layout e sposta la sua zona più calma dietro le parole, così un blocco di testo svizzero mantiene il contrasto mentre lo sposti tra le colonne o copi il design in altri formati.