# Échelle typographique : des tailles cohérentes, avec ratios

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

Choisissez les tailles à l’instinct et elles dérivent : 18, 22, 23, 30, 31. Une échelle typographique remplace ces tâtonnements par une taille de base et un ratio, pour que chaque taille paraisse de la même famille.

## The short version

- Une échelle typographique est un court jeu de tailles de police obtenu en multipliant une taille de base par le même ratio, encore et encore.
- Les petits ratios comme 1,2 conviennent aux interfaces denses, tandis que les grands ratios comme 1,5 conviennent aux affiches, aux publications sociales et aux pages d’atterrissage.
- Avec une base de 16 px et un ratio de 1,25, l’échelle donne 16, 20, 25, 31, 39 et 49 px.
- La plupart des créations n’ont besoin que de cinq ou six tailles, et arrondir les résultats au pixel entier convient très bien.
- En CSS, une échelle typographique se maintient le plus facilement en propriétés personnalisées, rendues fluides avec clamp().

Une **échelle typographique** est un jeu de tailles de police construit à partir d’une taille de base et d’un ratio. Vous partez de la taille de votre texte, disons 16 px, et la multipliez par le ratio pour obtenir la taille supérieure, puis encore pour la suivante. Avec un ratio de 1,25, vous obtenez 16, 20, 25, 31, 39 et 49 px. Comme chaque palier grandit de la même proportion, les tailles paraissent liées, et choisir une taille de titre n’est plus un pari.

## Pourquoi une échelle rend les tailles cohérentes

L’œil lit la taille comme une proportion, pas comme des pixels. Le saut de 16 à 20 se ressent comme celui de 39 à 49, car les deux sont d’un quart plus grands. Des tailles choisies à l’instinct tendent à se tasser à certains endroits et à laisser des vides ailleurs, si bien que deux titres finissent presque à la même taille et ressemblent à une erreur. Une échelle donne à chaque niveau un palier net et régulier, ce qui fait l’ossature de [la hiérarchie visuelle](https://gradiently.design/fr/guide/visual-hierarchy).

## Comparaison des ratios d’échelle courants

Beaucoup de ratios populaires empruntent leur nom aux intervalles musicaux, et une échelle construite ainsi s’appelle souvent échelle modulaire. Le nom compte moins que la taille du palier : plus le ratio est grand, plus il y a de drame entre les niveaux et moins de niveaux tiennent sur une page.

| Nom | Ratio | Impression | Idéal pour |
| --- | --- | --- | --- |
| Seconde mineure | 1.067 | À peine différente | Tableaux de données denses, petits écrans |
| Seconde majeure | 1.125 | Douce | Applications et tableaux de bord |
| Tierce mineure | 1,2 | Calme et claire | Interfaces, documentation, lecture longue |
| Tierce majeure | 1,25 | Équilibrée | Sites et blogs, un choix par défaut sûr |
| Quarte juste | 1.333 | Assurée | Pages marketing, éditorial |
| Quarte augmentée | 1.414 | Forte | Pages d’atterrissage, présentations |
| Quinte juste | 1,5 | Audacieuse | Affiches, publications sociales, grands titres |
| Nombre d’or | 1.618 | Dramatique | Texte d’affichage avec peu de niveaux |

Ratios courants, du petit au grand. Dans le doute, partez de 1,25 pour le web et de 1,5 pour les publications sociales.

## Valeurs de l’échelle en pixels

Voici la même base de 16 px passée dans quatre ratios. Remarquez la rapidité des grands ratios : au palier 4, une échelle à 1,5 est déjà à 81 px, tandis qu’une échelle à 1,2 est à 33 px.

| Palier | 1,2 | 1,25 | 1.333 | 1,5 |
| --- | --- | --- | --- | --- |
| Petit (palier −1) | 13 | 13 | 12 | 11 |
| Texte (base) | 16 | 16 | 16 | 16 |
| Palier 1 | 19 | 20 | 21 | 24 |
| Palier 2 | 23 | 25 | 28 | 36 |
| Palier 3 | 28 | 31 | 38 | 54 |
| Palier 4 | 33 | 39 | 51 | 81 |
| Palier 5 | 40 | 49 | 67 | 122 |

Valeurs arrondies au pixel entier. Le palier sous la base est la base divisée par le ratio, utilisé pour les légendes et les étiquettes.

Arrondir convient. Personne ne voit la différence entre 31,25 et 31 px, et les nombres entiers sont plus faciles à retenir et à aligner sur une grille.

## Comment construire votre propre échelle typographique

1. **Choisissez la taille de base** C’est votre texte courant. De 16 à 18 px convient à la plupart des sites ; sur un canevas social de 1080 px, partez de 40 px.
2. **Choisissez un ratio selon le contenu** Beaucoup de texte et de nombreux niveaux de titres demandent un petit ratio. Peu de mots et un grand titre en demandent un grand.
3. **Générez cinq ou six paliers** Multipliez vers le haut pour les titres et divisez une fois pour le petit texte. La plupart des créations n’utilisent jamais plus de six tailles.
4. **Arrondissez et nommez** Arrondissez au pixel entier et nommez les paliers par rôle, comme légende, texte, titre et affichage, pas par numéro.
5. **Réglez l’interlignage pour chaque palier** Les grandes tailles demandent un interlignage plus serré. Texte autour de 1,5, titres autour de 1,2, affichage près de 1.0.
6. **Testez avec de vrais mots** Composez un vrai titre, un sous-titre et un paragraphe. Si deux paliers se ressemblent trop, sautez-en un ou augmentez le ratio.

## Une échelle typographique pour les publications sociales

Les publications sociales demandent un ratio plus grand que les pages web, car un canevas de 1080 px se réduit au tiers de sa largeur sur mobile et il n’y a que deux ou trois niveaux de texte. Une base de 40 px avec un ratio de 1,5 donne 40, 60, 90 et 135 px, ce qui s’aligne bien avec les tailles de [la taille de police pour Instagram](https://gradiently.design/fr/guide/font-size-for-social-media).

Une publication sociale portrait avec une grande statistique Paiement 3 fois plus rapide au-dessus d’un texte d’appui plus petit

Une publication de chiffre clé demande trois niveaux nets : le chiffre, le détail et l’étiquette. Sur une échelle à 1,5, ce sont 135, 60 et 40 px.

Un slide de carrousel portrait intitulé Avant de publier avec une courte liste de contrôle dessous

Un slide de liste utilise les paliers inférieurs de la même échelle, donc il se place sans heurt à côté du slide de chiffre dans un même carrousel.

Utiliser une seule échelle sur tous les slides d’un carrousel fait qu’un ensemble paraît conçu plutôt qu’assemblé. Les mêmes tailles pour les mêmes rôles, slide après slide. [La mise en page du texte des publications sociales](https://gradiently.design/fr/guide/text-hierarchy-social) montre comment les organiser.

## Comment écrire une échelle typographique en CSS

Stockez l’échelle en propriétés personnalisées pour que chaque composant s’y réfère. Vous pouvez enchaîner les multiplications avec `calc()`, ou écrire les valeurs arrondies. Pour une échelle qui grandit avec l’écran, donnez à chaque palier une plage [clamp()](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp) : un minimum pour les mobiles, un maximum pour les grands écrans et une valeur fluide entre les deux.

```css
/* A 1.25 scale from a 1rem (16px) base */
:root {
  --ratio: 1.25;
  --step-0: 1rem;
  --step--1: calc(var(--step-0) / var(--ratio));
  --step-1: calc(var(--step-0) * var(--ratio));
  --step-2: calc(var(--step-1) * var(--ratio));
  --step-3: calc(var(--step-2) * var(--ratio));
  --step-4: calc(var(--step-3) * var(--ratio));
  --step-5: calc(var(--step-4) * var(--ratio));
}

/* Fluid headings: smaller ratio on phones, larger on desktop */
h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 4.25rem); line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1.15; }
h3 { font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.25; }
body { font-size: var(--step-0); line-height: 1.55; }
small { font-size: var(--step--1); }
```

Changez `--ratio` une fois et chaque palier se met à jour. Gardez `rem` dans le minimum de chaque clamp pour que le texte respecte toujours le réglage de taille de police du lecteur.

### À éviter

- Dix tailles quand cinq suffiraient
- Deux titres à 2 px d’écart
- Le même ratio pour un tableau de bord et une affiche
- Des tailles fixes en pixels qui ignorent les réglages de police du lecteur

### À faire

- Cinq ou six paliers, chacun avec un rôle nommé
- Sauter un palier si deux niveaux se ressemblent
- Petit ratio pour les écrans denses, grand pour peu de mots
- Des tailles en rem, fluides avec clamp()

Une échelle est une partie d’un ensemble plus large de décisions sur les polices, l’espacement et les rôles. [Le système typographique](https://gradiently.design/fr/guide/brand-typography-system) les réunit, et [approche et crénage](https://gradiently.design/fr/guide/tracking-vs-kerning) couvre les valeurs d’espacement qui accompagnent chaque palier. Si vous concevez du contenu social, le kit de marque de Gradiently conserve vos polices de titre et de texte et le Designer les applique à chaque nouvelle taille, ce qui facilite le maintien d’une échelle choisie une fois.

## FAQ

### Qu’est-ce qu’une échelle typographique ?

Un jeu de tailles de police obtenu en multipliant une taille de base par le même ratio de façon répétée, si bien que chaque taille est proportionnellement liée aux autres.

### Quel est le meilleur ratio d’échelle typographique ?

Il n’y en a pas un seul. 1,2 ou 1,25 convient aux sites et applications riches en texte ; 1,5 ou plus convient aux affiches et publications sociales avec peu de mots.

### Combien de tailles de police une création doit-elle utiliser ?

En général cinq ou six : une petite taille, le texte, deux ou trois niveaux de titres et une taille d’affichage.

### Faut-il arrondir les valeurs de l’échelle ?

Oui. Arrondir au pixel entier ne change rien de visible et rend l’échelle plus facile à utiliser et à retenir.

### Comment rendre une échelle typographique responsive en CSS ?

Utilisez `clamp()` pour chaque palier, avec un minimum en rem, une valeur intermédiaire fluide en unités de fenêtre et un maximum pour les grands écrans.