Mis à jour 10 juillet 2026

Échelle typographique : le guide pratique

Une échelle typographique est un ensemble limité et ordonné de tailles de police généré à partir de deux décisions — une taille de base et un ratio — plutôt que de tailles choisies une à une. Chaque taille de l’échelle se rapporte à toutes les autres par la même proportion, ce qui fait qu’une page se lit comme composée plutôt qu’assemblée. Ce hub rassemble nos guides sur le choix, la construction et l’usage des échelles typographiques ; l’aperçu le plus rapide consiste à ouvrir une échelle fonctionnelle dans Scale Composer et à faire glisser le ratio.

Commencez par le ratio

Le ratio est la personnalité de votre typographie : les petits ratios (1,125–1,25) créent des hiérarchies subtiles et denses pour les interfaces produit ; la plage médiane (1,333–1,414) porte confortablement les sites de contenu ; les grands ratios (1,5–1,618) produisent une hiérarchie éditoriale spectaculaire qui consomme vite l’espace. Les articles ci-dessous détaillent les compromis, avec un regard honnête sur le fameux nombre d’or — là où 1,618 mérite sa réputation et là où il gaspille vos plus grands niveaux.

Si une seule proportion se lit comme composée, la raison est perceptuelle, pas mathématique : quand chaque saut entre tailles est la même proportion, l’œil apprend la relation une fois et cesse de la remesurer — la hiérarchie s’enregistre avant même que la lecture ne commence. Les tailles choisies une à une ne portent aucun signal commun, et c’est pourquoi une typographie ad hoc paraît bruyante même quand chaque taille prise isolément semble raisonnable.

Les notes : la partie que la plupart des calculateurs d’échelle négligent

Une pure séquence de ratios laisse des trous exactement là où les interfaces ont besoin de précision — rien entre 16px et 21px, alors qu’un chapô veut du 18. Diviser chaque intervalle de ratio en notes, comme une octave se divise en notes, produit des tailles intermédiaires qui appartiennent toujours à l’échelle. C’est la différence entre une échelle que l’on admire et une échelle que l’on peut réellement livrer.

Le vocabulaire est emprunté à la musique à dessein — Les intervalles musicaux en typographie explique ce que font les notes dans une échelle et pourquoi l’analogie tient. Les notes ne signifient pas pour autant plus de tailles nommées : Combien de tailles de police un système de design nécessite-t-il ? soutient que la réponse reste autour de neuf à douze même quand des tailles intermédiaires sont disponibles, parce que chaque taille nommée devrait être une décision visible plutôt qu’un sous-produit du calcul.

Une échelle, tout le système

La même base et le même ratio qui génèrent vos tailles de police peuvent générer davantage : une unité de ligne de base égale à la moitié de la base pour les interlignes, les pas d’espacement de votre système d’espacement, et des mesures de grille qui progressent selon la même suite. La typographie est là où l’échelle commence habituellement, mais le bénéfice se démultiplie quand le reste du système la partage — changez un seul nombre et tout se réaccorde d’un coup.

C’est la prémisse de Scale Composer : une seule échelle pilote la typographie, la couleur, l’espacement et la grille, et les exporte ensemble. Le hub grille de mise en page couvre le volet colonnes de ce système ; et si les tailles doivent aussi s’adapter d’un viewport à l’autre, la typographie fluide montre comment la même échelle peut interpoler avec CSS clamp() au lieu de sauter aux points de rupture.

Par où commencer la lecture

Si le concept est nouveau pour vous, commencez par Qu’est-ce qu’une échelle typographique modulaire ? — l’article construit l’idée centrale à partir d’un exemple concret. Fixez ensuite les deux paramètres d’entrée : Pourquoi 16px est la taille de police de base par défaut traite de la base, et les guides de ratio ci-dessus traitent du multiplicateur. Une fois ces deux éléments arrêtés, les guides d’application prennent le relais : Les tailles de titre applique l’échelle aux h1–h6, L’interligne : la méthode de la grille de ligne de base l’étend au rythme vertical, et rem, px ou em traite des unités dans lesquelles l’échelle est livrée. 7 erreurs d’échelle typographique fait office de liste de contrôle finale à passer sur le système que vous venez de construire.

Les guides de ce hub

Essayez avant d’aller plus loin

La théorie s’ancre mieux avec vos propres chiffres : ouvrez une échelle dense pour interface produit — ratio 1,2, le genre qui convient aux tableaux de bord — puis montez le ratio vers 1,5 et regardez les cinq mêmes niveaux devenir éditoriaux. Dix secondes à faire glisser expliquent le tableau des ratios mieux que n’importe quel texte.

Questions fréquentes

Qu'est-ce qu'un bon ratio d'échelle typographique ?

Ça dépend de la densité de texte de votre produit. Les ratios entre 1,2 et 1,333 conviennent aux interfaces produit denses, où de nombreuses tailles utilisables doivent se côtoyer ; 1,414 et au-delà conviennent aux mises en page éditoriales et aux pages d'atterrissage avec peu de niveaux de hiérarchie et des textes courts.

Quelle est la meilleure taille de police de base ?

16px est la valeur par défaut des navigateurs et un plancher raisonnable pour le corps de texte à l'écran. Les sites très axés sur la lecture s'en sortent souvent mieux à 18px. Quel que soit votre choix, la base ancre tout le reste — les tailles comme la ligne de base en dérivent.

Combien de tailles de police un système de design devrait-il avoir ?

Moins que ce que la plupart des équipes imaginent — environ 9 à 12 niveaux nommés (légende, tailles de corps, niveaux de titre, affichage) couvrent une large gamme de produits. Une échelle aide en faisant de chaque taille supplémentaire une décision visible plutôt qu'une dérive silencieuse.

Qu'est-ce qu'une échelle modulaire en typographie ?

Un ensemble restreint et fixe de tailles de police dérivées d'une taille de base multipliée par un ratio constant, de sorte que chaque taille se rapporte mathématiquement à toutes les autres. Subdiviser chaque pas de ratio en « notes », comme une octave se divise en notes, donne à l'échelle des tailles intermédiaires utilisables.

L'interligne doit-il aussi suivre une échelle ?

Oui — une convention courante dérive une unité de ligne de base égale à la moitié de la taille de base (8px sur une base de 16px) et fixe chaque interligne comme un multiple de celle-ci. Le texte partage alors un seul rythme vertical au lieu de valeurs propres à chaque élément.

Les tailles de police doivent-elles utiliser px, rem ou em ?

rem pour les tailles de police dans le code. Il s'adapte à la préférence de navigateur de l'utilisateur, ce que px ignore — et si votre échelle est définie sur une base de 16px, les valeurs en rem s'y alignent directement.