# Système typographique de marque : un rôle pour chaque police

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

Choisir des polices est la partie facile. Décider exactement comment elles se comportent, à quelle taille, en quelle graisse, pour quel usage, voilà ce qui rend une marque cohérente partout.

## The short version

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

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ôle | Fonction | Réglage typique |
| --- | --- | --- |
| Display | Les plus grands mots : slogans de campagne, couvertures, titres d’accueil | Police de titre, grasse, interligne serré, peu de mots |
| Titre | Titres de section et titres de posts | Police de titre, demi-gras ou gras, casse de phrase |
| Sous-titre | Introduit une section, chapeau | Police de texte, graisse moyenne, un palier au-dessus du texte |
| Texte | Texte de lecture | Police de texte, normal 400, interligne d’environ 1,5 |
| Étiquette et surtitre | Petit texte au-dessus des titres, tags, boutons | Police de texte, demi-gras, souvent en capitales espacées |
| Légende | Crédits, notes de bas de page, mentions en petits caractères | Police de texte, normal, plus petit palier |
| Numérique | Prix, statistiques, tableaux | Chiffres tabulaires pour que les chiffres s’alignent |

Sept rôles couvrent presque toutes les marques. Si vous ne pouvez pas dire quelle fonction remplit un style, ce n’est pas un rôle : c’est une exception.

Un post en portrait de style newsletter avec un petit surtitre, un grand titre et une courte ligne d’appui

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](https://gradiently.design/fr/guide/google-fonts-pairings) et les [polices de marque](https://gradiently.design/fr/guide/brand-fonts) 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](https://gradiently.design/fr/guide/typographic-scale) explique les rapports plus en détail.

| Palier | Taille à 1,25 depuis 16 px | Rôle |
| --- | --- | --- |
| Palier 0 | 16 px | Texte |
| Palier 1 | 20 px | Sous-titre, grand texte |
| Palier 2 | 25 px | Petit titre |
| Palier 3 | 31 px | Titre |
| Palier 4 | 39 px | Grand titre |
| Palier 5 | 49 px | Display sur mobile |
| Palier 6 | 61 px | Display sur ordinateur |
| Palier moins 1 | 13 px | Légende, étiquette |

Une échelle web à partir d’une base de 16 px, au rapport de 1,25, arrondie au pixel. Chaque rôle prend un palier et le garde.

## 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](https://gradiently.design/fr/guide/design-tokens) traitent l’idée plus largement.

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

Chaque rôle est un token de police en notation abrégée : graisse, taille, interligne et famille voyagent toujours ensemble. Les valeurs suivent l’échelle ci-dessus en rem.

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

| Rôle | Site web | Post social 1080×1350 | Slides 1920×1080 |
| --- | --- | --- | --- |
| Display | 49 à 61 px | 140 à 200 px | 120 à 160 px |
| Titre | 31 px | 90 à 120 px | 88 à 112 px |
| Texte | 16 px | 40 à 48 px | 48 à 64 px |
| Étiquette et surtitre | 13 px | 28 à 32 px | 36 à 44 px |

Mêmes rôles, mêmes polices, mêmes graisses, tailles différentes. La [taille de police pour les posts Instagram](https://gradiently.design/fr/guide/font-size-for-social-media) et les [polices de présentation](https://gradiently.design/fr/guide/typography-for-presentations) expliquent les chiffres pour les réseaux et les diapositives.

## 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](https://gradiently.design/fr/guide/title-case-vs-sentence-case) 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](https://gradiently.design/fr/guide/brand-style-guide) 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.

## FAQ

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