# Le design suisse : la grille, la typo et son usage aujourd’hui

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

Le design suisse a donné au graphisme sa grille, son goût pour les linéales et son habitude de laisser la structure parler. C’est toujours le chemin le plus rapide vers des mises en page calmes et assurées.

## The short version

- Le design suisse, aussi appelé Style typographique international, est né en Suisse dans les années 1950 et privilégiait la clarté, l’objectivité et l’ordre plutôt que la décoration.
- Ses outils de base sont une grille modulaire, des linéales comme Akzidenz-Grotesk, Helvetica et Univers, un texte aligné à gauche en drapeau et des mises en page asymétriques.
- Dans le design suisse, la hiérarchie vient de la taille, de la graisse et de la position sur la grille plutôt que d’ornements, de cadres ou de nombreuses couleurs.
- Les mises en page suisses s’associent bien à de riches fonds en dégradé, car la grille stricte garde les mots calmes pendant que le champ de couleur porte l’ambiance.
- Vous pouvez appliquer les principes suisses aux posts et aux slides en choisissant une grille de colonnes pour chaque format et en y plaçant chaque élément.

Le **design suisse** est le nom que la plupart des gens donnent au Style typographique international, une façon de faire du graphisme née en Suisse dans les années 1950. Il organise chaque page sur une grille, compose le texte dans des linéales épurées, l’aligne à gauche et supprime la décoration pour que le contenu parle simplement. Le résultat paraît objectif, ordonné et tranquillement assuré, et c’est pourquoi tant d’identités de marque, de signalétiques et d’interfaces modernes suivent encore ses règles.

Ce guide couvre l’origine du style, les principes que vous pouvez reprendre, la construction d’une grille suisse pour de vrais formats, et la façon de poser une mise en page suisse stricte sur un fond riche sans perdre ni l’une ni l’autre.

## D’où vient le Style typographique international

Le style est issu de la typographie moderniste des années 1920 et 1930 et a pris forme dans les écoles et studios de design suisses, en particulier à Zurich et à Bâle. Ses praticiens voulaient que le design communique l’information clairement et neutralement, pour n’importe quel public, d’où le mot *international*.

Quelques noms et polices méritent d’être connus. **Josef Müller-Brockmann**, qui travaillait à Zurich, a créé des affiches de concerts et de sensibilisation construites sur des grilles visibles, puis a écrit le livre *Grid Systems in Graphic Design*, toujours une référence. **Emil Ruder**, qui enseignait la typographie à Bâle, a écrit *Typographie*, un manuel sur le contraste, le rythme et l’espace. Les caractères venaient des grotesques : **Akzidenz-Grotesk**, une linéale allemande de la fin du dix-neuvième siècle, puis **Helvetica** et **Univers**, toutes deux sorties en 1957.

| Police | Origine | Pourquoi les Suisses l’utilisaient |
| --- | --- | --- |
| Akzidenz-Grotesk | Fonderie Berthold, Berlin, fin du dix-neuvième siècle | Une grotesque simple et robuste, sans fioritures décoratives |
| Helvetica | Fonderie Haas, Suisse, 1957 | Une texture neutre et régulière ; d’abord vendue sous le nom de Neue Haas Grotesk |
| Univers | Dessinée par Adrian Frutiger, 1957 | Une vaste famille systématique de graisses et de chasses |

Les trois polices les plus associées au design suisse. Aujourd’hui, de nombreuses grotesques sous licence libre donnent la même impression.

## Les principes fondamentaux du design suisse

Le design suisse est moins un aspect qu’une série de décisions. Si vous prenez ces décisions, votre travail se lira comme suisse même avec une police moderne et un dégradé derrière.

- **Une grille sous tout le reste.** Colonnes, marges et gouttières sont décidées d’abord, et chaque élément s’y cale.
- **Des linéales.** Des grotesques à la texture régulière, généralement d’une seule famille. Voyez [serif ou sans serif](https://gradiently.design/fr/guide/serif-vs-sans-serif).
- **Alignement à gauche, en drapeau.** Le texte s’aligne sur un seul bord ; le texte centré ou justifié est rare.
- **Asymétrie.** Les mises en page s’équilibrent par le poids et l’espace, pas par un miroir autour du centre.
- **Hiérarchie par la taille, la graisse et la position.** Pas de cadres, d’ornements ni de soulignements pour signaler l’importance. Voyez [la hiérarchie visuelle](https://gradiently.design/fr/guide/visual-hierarchy).
- **Peu de couleurs.** Souvent le noir, le blanc et une couleur forte, fréquemment le rouge.
- **Une imagerie objective.** Des photographies et des formes géométriques plutôt que de l’illustration décorative.
- **L’espace comme structure.** Les zones vides sont des parties prévues de la grille, pas des restes.

- Papier d’affiche: #f4f1ea
- Noir d’imprimerie: #111111
- Rouge signal: #d52b1e
- Gris chaud: #8a8a85

Une palette suisse classique : papier, noir, un rouge et un gris pour le texte secondaire. La retenue dans la couleur laisse la grille et la typographie porter la création.

## Comment construire une grille suisse pour de vrais formats

Une grille, ce sont trois nombres : la marge autour du bord, la gouttière entre les colonnes, et le nombre de colonnes. Choisissez un nombre de colonnes qui se divise bien : six colonnes se partagent en moitiés et en tiers, douze en moitiés, tiers, quarts et sixièmes. Vérifiez ensuite le calcul pour que chaque colonne fasse un nombre entier de pixels.

| Format | Taille | Grille | Largeur de colonne |
| --- | --- | --- | --- |
| Post Instagram | 1080×1350 | 6 colonnes, marge 72, gouttière 24 | 136 px |
| Post X | 1600×900 | 8 colonnes, marge 80, gouttière 24 | 159 px |
| Slides 16:9 | 1920×1080 | 12 colonnes, marge 96, gouttière 24 | 122 px |
| Affiche A3 à 300 dpi | 3508×4961 | 6 colonnes, marge 238, gouttière 64 | 452 px |

Des grilles calculées. Colonnes, gouttières et marges tombent exactement sur la largeur, si bien que rien ne se retrouve sur un demi-pixel.

Ajoutez aussi une ligne de base. Choisissez une petite unité, comme 8 px sur un post de 1080 px, et faites de l’interlignage et des espacements verticaux des multiples de celle-ci. Le texte s’aligne alors d’une colonne à l’autre, et c’est une grande part de ce qui rend les pages suisses si posées. [L’interlignage et la longueur de ligne](https://gradiently.design/fr/guide/line-height-and-line-length) explique comment choisir l’unité.

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

La grille du post Instagram ci-dessus en CSS : six colonnes de 136 px, une gouttière de 24 px et une marge de 72 px. Les interlignages reposent sur une ligne de base de 8 px.

Le code utilise [la mise en page en grille CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout). Le titre s’étend sur cinq colonnes et laisse volontairement la sixième vide ; le détail se place dans la moitié droite, en bas, si bien que la page s’équilibre par l’asymétrie plutôt que par le centrage.

## Des règles typographiques suisses à reprendre

### À éviter

- Centrer chaque ligne
- Trois ou quatre polices dans une création
- Des cadres et des contours pour séparer le contenu
- Espacer davantage les lettres des grands titres
- De nombreuses tailles presque identiques

### À faire

- Aligner le texte à gauche sur le bord d’une colonne
- Une seule famille grotesque en deux ou trois graisses
- L’espace et l’alignement pour séparer le contenu
- Resserrer légèrement les grands titres
- Peu de tailles, avec des sauts nets entre elles

Le détail le plus suisse, c’est l’échelle des tailles. Utilisez trois ou quatre tailles avec des sauts évidents, comme 24, 36 et 112 px sur un post de 1080 px, plutôt qu’une progression douce. Les grands titres sont généralement plus beaux avec un interlettrage légèrement négatif ; [l’espacement des lettres](https://gradiently.design/fr/guide/letter-spacing) donne les valeurs.

## Comment le design suisse s’associe aux fonds riches

Les affiches suisses classiques étaient souvent en aplats, mais la grille ne l’exige pas. Une mise en page stricte est justement ce qui permet à un fond riche de fonctionner : la typographie est calme, alignée et limitée, si bien qu’un dégradé profond peut porter l’ambiance sans que la page tourne au bruit. C’est la même mise en page sobre sur une matière riche que décrit [minimalisme ou maximalisme](https://gradiently.design/fr/guide/minimalism-vs-maximalism).

- Sang-de-bœuf vers rouge signal: `linear-gradient(160deg, #3a0306 0%, #b3120f 55%, #ff5a3c 100%)`
- Marine profond vers ciel: `linear-gradient(180deg, #0a1a3a 0%, #1f4fbf 60%, #7fb0ff 100%)`
- Soleil dans le coin supérieur: `radial-gradient(circle at 80% 20%, #ffe066 0%, #ff7a00 35%, #b8002e 75%, #2a0010 100%)`

Des dégradés qui conviennent à une grille suisse : une seule famille de teintes ou une seule source de lumière, avec une zone calme là où se trouve le bloc de texte.

Trois règles gardent l’association nette. Placez le bloc de texte sur la partie la plus calme du dégradé. Utilisez une seule couleur de texte pour tout, en général le blanc ou le noir. Et laissez la source de lumière du fond tomber dans une zone vide de la grille, pour qu’elle se lise comme une partie de la composition. Pour beaucoup de mots sur de la couleur, voyez [la typographie sur fond chargé](https://gradiently.design/fr/guide/type-on-busy-backgrounds).

Une affiche A3 avec le titre La forme suit la grille, aligné à gauche dans une linéale sur un fond en dégradé profond

Une affiche A3 sur une grille de six colonnes : les mots tiennent la gauche, la couleur tient la droite.

Un post portrait avec le titre Dire moins. Aligner plus. aligné à gauche sur le même dégradé que l’affiche

Le même système sur un post Instagram : une famille, trois tailles, une couleur de texte.

Dans Gradiently, un Mark rend le fond en direct derrière la mise en page et déplace sa zone la plus calme derrière les mots : un bloc de texte suisse garde ainsi son contraste quand vous le déplacez d’une colonne à l’autre ou copiez la création vers d’autres tailles.

> **Le test des yeux plissés** Plissez les yeux devant une mise en page suisse terminée. Vous devriez voir quelques blocs nets sur des colonnes invisibles et une forme dominante. Si vous voyez une dispersion de petits éléments, supprimez-en ou calez-les sur la grille.

## FAQ

### Qu’est-ce que le design suisse ?

Le design suisse, ou Style typographique international, est une approche du graphisme née en Suisse dans les années 1950. Il utilise des grilles, des linéales, un texte aligné à gauche et des mises en page asymétriques pour communiquer clairement sans décoration.

### Quelle police utilise le design suisse ?

Les designers suisses utilisaient surtout des linéales grotesques : Akzidenz-Grotesk, puis Helvetica et Univers, toutes deux sorties en 1957. N’importe quelle grotesque neutre à la texture régulière donne aujourd’hui un résultat semblable.

### Combien de colonnes pour une grille suisse ?

Six colonnes conviennent à la plupart des posts et des affiches, car elles se divisent en moitiés et en tiers. Douze colonnes conviennent aux formats larges comme les slides et les sites web. Vérifiez que marges, gouttières et colonnes font exactement la largeur.

### Le design suisse peut-il utiliser des dégradés ?

Oui. Ce sont la grille, la typographie et la retenue qui rendent une mise en page suisse. Un dégradé riche derrière un bloc de texte strict fonctionne bien, tant que le texte est posé sur une zone calme, dans une seule couleur.

### Qui sont les grands noms du design suisse ?

Josef Müller-Brockmann, connu pour ses affiches construites sur des grilles et son livre Grid Systems in Graphic Design, et Emil Ruder, qui enseignait la typographie à Bâle et a écrit Typographie, comptent parmi les plus connus.