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

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.

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

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.

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 explique comment choisir 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; }

Le code utilise la mise en page en grille CSS. 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

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

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

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.