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

Une échelle typographique modulaire — souvent abrégée en simplement échelle modulaire — est un petit ensemble fixe de tailles de police où chaque taille est dérivée d’une taille de base multipliée par un ratio constant. Au lieu de choisir les tailles à l’œil, vous prenez deux décisions — une base (généralement 16px) et un ratio (disons 1,333) — et une formule génère toutes les autres tailles. Le résultat est un système typographique où les tailles sont liées les unes aux autres mathématiquement plutôt qu’accidentellement.

De nombreux systèmes de design modernes organisent leur typographie autour d’une forme d’échelle, et l’échelle modulaire en est la forme la plus courante. L’idée a des racines profondes dans la typographie imprimée et a été introduite dans la pratique du web en grande partie grâce à l’essai de Tim Brown More Meaningful Typography sur A List Apart. C’est l’une des premières fondations à définir, aux côtés de l’espacement. Cet article fait partie de notre guide des échelles typographiques.

Comment fonctionne la formule d’une échelle typographique ?

La formule classique est :

size(i) = base × ratio^i

où i est le numéro de palier — les paliers positifs montent depuis la base, les paliers négatifs descendent. Avec une base de 16px et un ratio de 1,333 (une « quarte juste »), l’échelle ressemble à ceci :

Une conséquence est facile à manquer dans le tableau : chaque saut entre les niveaux est proportionnellement identique. Un h2 est lié à un h3 par le même ratio qu’un h3 est lié au corps de texte (les tailles sont arrondies en pratique, mais la relation tient).

C’est cette cohérence proportionnelle qui donne à une page l’impression d’être composée plutôt qu’assemblée. Les gens sont remarquablement doués pour percevoir les proportions même lorsqu’ils ne savent pas les nommer — la même faculté qui entend qu’un accord sonne faux. Une échelle cohérente réduit aussi le bruit visuel de la page : lorsque chaque relation de taille est une instance d’un seul ratio, l’œil n’a qu’une règle à concilier au lieu d’une douzaine arbitraires.

Comment choisir un ratio ?

Le ratio détermine l’ampleur des sauts de taille, et la bonne valeur dépend de la densité de texte de votre produit :

• 1,125–1,25 (seconde majeure à tierce majeure) : des paliers subtils. Idéal pour les interfaces produit denses — tableaux de bord, tableaux, écrans de paramètres — où vous avez besoin de nombreuses tailles utilisables et rapprochées.
• 1,333–1,414 (quarte juste à quarte augmentée) : une hiérarchie claire sans dramatisation. La plage passe-partout pour les sites marketing et les pages de contenu.
• 1,5–1,618 (quinte juste au nombre d’or) : des sauts grands et expressifs. Fonctionne pour les mises en page éditoriales et les landing pages au texte court ; du gaspillage pour une UI, car les paliers supérieurs deviennent énormes très vite.

Une règle empirique utile : plus votre interface porte de texte, plus votre ratio doit être petit.

Que sont les « notes », et pourquoi les ratios simples sont-ils insuffisants ?

Voici le problème que chaque équipe rencontre avec la formule pure : les écarts sont trop grands précisément là où vous avez besoin de précision. Avec une base de 16 et un ratio de 1,333, il n’y a rien entre 16px et 21px — mais les interfaces réelles ont constamment besoin d’une taille de 18px (un paragraphe d’introduction, un grand libellé de bouton).

Une analogie utile vient de la musique. Une octave ne saute pas d’un do au suivant — elle est divisée en notes. Une échelle typographique peut être subdivisée de la même manière :

size(i) = base × ratio^(i/notes)

Avec notes = 2, chaque saut de ratio reçoit un palier intermédiaire : 16, 18, 21, 25, 28… Les tailles intermédiaires vivent toujours sur l’échelle — ce sont des demi-pas, pas des exceptions — de sorte que la cohérence proportionnelle survit tandis que l’échelle devient suffisamment dense pour être réellement utilisable.

Voyez-le en direct : ouvrez cette échelle exacte dans Scale Composer — quarte juste, base de 16px, 2 notes par intervalle. Faites glisser le ratio et regardez chaque niveau se recalculer.

Pourquoi une échelle vaut-elle mieux que de choisir les tailles à la main ?

Quatre raisons pratiques :

1. Moins de décisions. Chaque débat « faut-il 17 ou 18px ? » disparaît — si ce n’est pas sur l’échelle, ce n’est pas une taille.
2. Protection contre la dérive. Les systèmes choisis à la main accumulent les tailles. Auditez n’importe quelle base de code mature et vous trouverez probablement 14, 15, 16, 17 et 18px, tous en production, faisant le même travail. Une échelle rend cette classe d’entropie bien plus difficile à introduire.
3. Des tokens nommables. Un ensemble fini de tailles se mappe proprement sur des tokens typographiques (heading-lg, body-md) que le design et le code peuvent partager — et il en faut moins que la plupart des équipes ne le pensent.
4. Une progression partagée. La même base et le même ratio peuvent piloter plus que la typographie : les paliers d’espacement le plus souvent, et certains systèmes utilisent même la même progression pour générer les rampes de couleur — de sorte que changer un seul nombre réaccorde le système de manière cohérente.

Où l’interligne trouve-t-il sa place ?

Une échelle pour les tailles résout la moitié de la typographie ; l’autre moitié est verticale. Une convention courante consiste à dériver une unité de ligne de base égale à la moitié de la taille de base (8px sur une base de 16px) et à définir chaque interligne comme un multiple entier ou demi de celle-ci : corps de 16px sur une ligne de 24px (3 lignes de base), h2 de 38px sur 48px (6 lignes de base). Le texte se pose alors sur un rythme partagé plutôt que sur des valeurs arbitraires par élément — le même rythme sur lequel le système d’espacement peut s’appuyer.

Essayez avec vos propres chiffres

Le moyen le plus rapide de comprendre une échelle modulaire est d’en casser une : ouvrez la même échelle avec quatre notes par intervalle et regardez l’échelle se densifier sans perdre ses proportions — puis remettez-la à deux, montez le ratio à 1,5 et voyez exactement à quel moment les paliers supérieurs cessent d’être utilisables. Votre taille de corps et votre moment d’UI le plus dense vous indiqueront votre ratio plus vite que n’importe quel tableau.