L’essentiel en bref
- Un système typographique est un petit ensemble de rôles nommés, comme display, titre, texte et étiquette, chacun avec une police, une graisse, une taille, un interligne et une casse fixes.
- Les tailles d’un système typographique viennent d’une seule échelle, une taille de base multipliée par un rapport constant, si bien que chaque palier se rapporte aux autres.
- La plupart des marques n’ont besoin que d’un ou deux caractères ; le système crée la variété par les rôles, les graisses et les tailles.
- Les design tokens stockent chaque rôle comme une valeur nommée : sites web, applications et fichiers de design suivent les mêmes décisions typographiques.
- Posts sociaux, présentations et sites web demandent des tailles différentes pour les mêmes rôles : un bon système liste chaque rôle par canal.
Sur cette page
Un système typographique est l’ensemble des règles qui décident du comportement du texte dans une marque : quelques rôles nommés (display, titre, texte, étiquette), chacun avec une police, une graisse, une taille, un interligne et une casse, tous dimensionnés sur une seule échelle et stockés en tokens pour que chaque designer et développeur utilise les mêmes valeurs. Les polices donnent sa voix à une marque. Le système rend cette voix cohérente : un titre d’affiche, de site web ou de story semble venir du même endroit. Voici comment en construire un.
Les rôles d’un système typographique
Partez des usages, pas des polices. Chaque texte publié par une marque remplit l’une de quelques fonctions, et chaque fonction devient un rôle. La plupart des marques en ont besoin de cinq à sept.
Réglage typique
Réglage typique
Fonction
Réglage typique
Réglage typique
Fonction
Réglage typique
Réglage typique
Fonction
Réglage typique
Trois rôles sur un post : une étiquette en surtitre, un titre et une ligne de texte. Chacun se distingue aussitôt : l’œil sait où commencer.
Combien de polices un système typographique de marque demande-t-il
En général une ou deux. Une famille en trois graisses peut porter tout un système. Deux polices, une pour les titres et une pour le texte, ajoutent du caractère. Une troisième ne se justifie que pour un usage précis comme le code ou les données. La variété vient des rôles, des tailles et des graisses, pas de caractères supplémentaires. Les associations Google Fonts et les polices de marque aident à choisir.
À éviter
- Une nouvelle police à chaque campagne
- Des tailles choisies à l’œil sur chaque création
- Neuf graisses chargées, trois utilisées
- Des règles de casse différentes selon les équipes
- Un guide de style qui liste les polices mais pas les rôles
À faire
- Une ou deux familles pour tout
- Toutes les tailles tirées d’une échelle
- Seulement les graisses dont les rôles ont besoin
- Une règle de casse écrite pour les titres et les boutons
- Des rôles avec police, graisse, taille, interligne et casse
Construire une échelle typographique
Une échelle typographique choisit une taille de base et la multiplie par le même rapport à chaque palier. Les paliers se rapportent les uns aux autres : deux tailles quelconques du système paraissent voulues ensemble. Un rapport de 1,25 convient aux interfaces et aux pages denses ; 1,333 ou 1,5 donne plus de relief à l’éditorial et au marketing. L’échelle typographique explique les rapports plus en détail.
Rôle
Rôle
Rôle
Rôle
Rôle
Rôle
Rôle
Taille à 1,25 depuis 16 px
Rôle
Stocker le système en tokens
Un système qui ne vit que dans un PDF dérive. Les tokens sont des valeurs nommées que le code et les fichiers de design lisent tous les deux : changer une valeur met tout à jour. Nommez les tokens par rôle, jamais par taille : --type-heading survit à une refonte, --type-31 non. Les design tokens traitent l’idée plus largement.
:root {
--font-heading: "Fraunces", Georgia, serif;
--font-body: "Inter", system-ui, sans-serif;
--type-display: 600 clamp(3.0625rem, 6vw, 3.8125rem) / 1.05 var(--font-heading);
--type-heading: 600 1.9375rem / 1.15 var(--font-heading);
--type-subheading: 500 1.25rem / 1.4 var(--font-body);
--type-body: 400 1rem / 1.5 var(--font-body);
--type-label: 600 0.8125rem / 1.2 var(--font-body);
}
h1 { font: var(--type-display); }
h2 { font: var(--type-heading); }
p { font: var(--type-body); }
.eyebrow { font: var(--type-label); text-transform: uppercase; letter-spacing: 0.08em; }
.price { font-variant-numeric: tabular-nums; }Un rôle, des tailles différentes selon le canal
Un titre de site web et un titre de post Instagram font le même travail à des tailles très différentes : l’un se lit à bout de bras sur grand écran, l’autre rétrécit dans un fil de téléphone. Gardez des rôles identiques et donnez à chaque canal ses propres tailles.
Post social 1080×1350
Slides 1920×1080
Post social 1080×1350
Slides 1920×1080
Post social 1080×1350
Slides 1920×1080
Site web
Post social 1080×1350
Slides 1920×1080
Comment construire votre système typographique
- 1
Rassemblez ce que vous publiez déjà
Faites des captures de votre site, de vos posts, e-mails et diapositives. Entourez chaque style de texte distinct. La plupart des marques en trouvent bien plus qu’elles ne pensaient.
- 2
Regroupez les styles en rôles
Fusionnez les quasi-doublons. Visez cinq à sept rôles qui couvrent tout ce que vous avez entouré.
- 3
Choisissez les polices des rôles
En général une police de titre et une police de texte. Vérifiez que la licence couvre le web, les applications et tout usage en logo.
- 4
Fixez l’échelle et les détails
Choisissez une base et un rapport, puis fixez graisse, interligne, casse et espacement de chaque rôle. Décidez une fois de la casse des titres ; casse de phrase ou casse de titre aide.
- 5
Publiez-le en tokens et en une fiche d’une page
Des tokens pour le code et les fichiers de design, une fiche visuelle unique dans votre guide de style de marque pour tous les autres.
Pour les posts sociaux et présentations du quotidien, un kit de marque Gradiently (avec Pro) garde les polices de titre et de texte de votre système, y compris des fichiers de polices téléversés, avec vos logos, vos couleurs et votre voix. Les nouvelles créations partent avec ces deux polices et le Designer applique le kit quand il met une création en page : la répartition titre et texte tient sans que personne ait à s’en souvenir.
Les questions qu’on nous pose
Qu’est-ce qu’un système typographique ?
Un ensemble de rôles typographiques nommés, comme display, titre, texte et étiquette, chacun avec une police, une graisse, une taille, un interligne et une casse fixes, le plus souvent stockés en design tokens.
Combien de polices une marque doit-elle utiliser ?
Une ou deux pour la plupart des marques : une pour les titres et une pour le texte. Une troisième ne vaut la peine que pour un usage précis comme le code ou les données.
Qu’est-ce qu’une échelle typographique ?
Une suite de tailles de police obtenue en multipliant une taille de base par un rapport constant, comme 1,25, pour que chaque taille du système se rapporte aux autres.
Comment nommer les tokens typographiques ?
Par rôle, comme type-heading ou type-body, pas par taille. Les noms de rôle gardent leur sens quand les tailles changent.
Les posts sociaux doivent-ils utiliser les mêmes tailles de police qu’un site web ?
Non. Gardez les mêmes rôles et les mêmes polices, mais employez des tailles bien plus grandes sur les posts, car ils s’affichent en petit dans un fil de téléphone.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil