Générateur d'échelle typographique

À propos de cet outil

Ce générateur calcule une échelle de tailles de texte cohérente, des plus petites mentions aux grands titres, à partir d'une taille de base et d'un ratio. En mode fluide, chaque taille s'adapte en continu entre un petit et un grand écran grâce à la fonction CSS clamp() : on définit une base et un ratio pour chaque extrémité (par exemple 16 px et 1,2 sur mobile, 19 px et 1,25 sur ordinateur), et l'outil calcule la formule de chaque niveau. L'aperçu se règle sur la largeur d'écran de votre choix, et le code s'exporte en variables CSS, SCSS, Tailwind CSS v4 ou JSON, avec les valeurs en rem pour respecter la taille de texte choisie par chaque visiteur.

Comment utiliser cet outil

1. Choisissez une échelle fluide (la taille varie avec la largeur de l'écran) ou fixe (une seule valeur par niveau).
2. Réglez la taille de base et le ratio, et, en mode fluide, les valeurs pour le petit et le grand écran ainsi que les largeurs d'écran concernées.
3. Indiquez combien de niveaux vous voulez sous la base (petits textes) et au-dessus (titres), et le style de nommage.
4. Déplacez la largeur d'écran simulée pour voir l'échelle évoluer, puis copiez le code dans le format de votre projet.

Le principe : une taille de base et un ratio

Une échelle typographique (ou échelle modulaire) est une suite de tailles de texte obtenues en multipliant une taille de base par un ratio constant. Le niveau de rang n vaut :

Le rang 0 est le corps de texte, les rangs positifs servent aux titres, les rangs négatifs aux petits textes (légendes, mentions, étiquettes). Comme chaque taille est dans le même rapport avec sa voisine, les écarts paraissent réguliers à l'œil : c'est ce qui donne à une page son aspect ordonné. À l'inverse, des tailles choisies au cas par cas (17, 22, 29, 35 px…) produisent une hiérarchie hésitante.

Les ratios portent souvent des noms empruntés à la musique, parce que les rapports d'intervalles sont proches de ceux d'une gamme : 1,125 (seconde majeure), 1,2 (tierce mineure), 1,25 (tierce majeure), 1,333 (quarte juste), 1,5 (quinte juste) et 1,618 (le nombre d'or, qui n'est pas un intervalle musical mais s'utilise de la même manière). Ces noms sont une convention commode, pas une règle : n'importe quel ratio supérieur à 1 fonctionne.

Choisir un ratio

Plus le ratio est grand, plus l'échelle grimpe vite : avec 1,618 et dix niveaux, le plus grand titre dépasse largement 1 000 px, ce qui n'a aucun sens. D'où deux règles pratiques : un ratio élevé demande peu de niveaux, et un ratio faible demande des niveaux plus nombreux pour obtenir des titres marquants. Dans la plupart des cas, six à huit niveaux suffisent : un petit texte, le corps, et quatre à six tailles de titres.

Pourquoi une échelle fluide ?

Une échelle fixe donne les mêmes tailles sur un téléphone de 360 px de large et sur un écran de 1 920 px. Or un titre de 58 px, élégant sur ordinateur, occupe la moitié de l'écran d'un mobile et casse la mise en page. La solution traditionnelle consiste à multiplier les points de rupture (@media), avec des tailles différentes à chaque palier, ce qui crée des sauts brusques et beaucoup de code.

La typographie fluide remplace ces paliers par une interpolation continue : on définit la taille voulue sur un petit écran et sur un grand écran, et la taille évolue de façon linéaire entre les deux. La fonction CSS clamp(minimum, préférée, maximum) en est l'outil : la valeur préférée est une droite en fonction de la largeur d'écran (vw, centième de la largeur de la fenêtre), et les bornes empêchent la taille de sortir de la plage voulue au-delà des écrans de référence.

L'outil calcule cette formule pour chaque niveau, avec sa propre base et son propre ratio aux deux extrémités : par exemple 16 px et 1,2 sur mobile, 19 px et 1,25 sur grand écran. Les titres grandissent donc plus vite que le texte courant, ce qui est généralement l'effet recherché. Le curseur « Largeur d'écran simulée » de l'aperçu permet de le constater sans redimensionner la fenêtre.

Accessibilité : rem, zoom et taille minimale

• Exprimez les tailles en rem, jamais seulement en vw. Le rem se calcule à partir de la taille de texte du navigateur (16 px par défaut, modifiable dans les réglages). Une taille en vw pur ne change pas quand la personne agrandit son texte, ce qui contrevient au critère WCAG 1.4.4 « Redimensionnement du texte », qui exige que le texte reste lisible agrandi jusqu'à 200 %. C'est pourquoi les formules générées combinent une partie en rem et une partie en vw.
• Bornez toujours la formule avec un minimum et un maximum : c'est le rôle de clamp(). Sans plafond, une taille liée à la largeur d'écran devient gigantesque sur un grand écran et minuscule sur un petit.
• Ne descendez pas trop bas. Le corps de texte se situe en général entre 16 et 20 px. Les niveaux plus petits (légendes, mentions légales) doivent rester lisibles : l'outil vous avertit sous 12 px.
• Ne comptez pas sur la taille seule pour la hiérarchie. Un titre se reconnaît aussi à sa graisse, à son interlignage plus serré et à l'espace qui l'entoure. Pour un texte courant, un interligne de 1,5 est une bonne base ; pour de grands titres, 1,1 à 1,25 évite que les lignes paraissent détachées. C'est ce que fait l'aperçu.
• Limitez la longueur des lignes (environ 60 à 75 caractères) en plus de régler la taille : on exprime volontiers la largeur d'un bloc de texte en ch, par exemple max-width: 65ch.

Utiliser l'échelle dans un projet

Le plus simple est de coller les variables dans la feuille de style globale, puis de les appliquer aux éléments :

:root {
  --text-base: clamp(1rem, 0.9348rem + 0.3261vw, 1.1875rem);
  --text-xl: clamp(1.44rem, 1.2955rem + 0.7226vw, 1.8555rem);
}
body { font-size: var(--text-base); line-height: 1.5; }
h2   { font-size: var(--text-xl);   line-height: 1.2; }

• Nommage. Les noms « t-shirt » (sm, base, lg, xl, 2xl…) sont lisibles et rappellent Tailwind. Les noms numérotés (step-0, step-1, step--1) restent corrects si vous ajoutez des niveaux des deux côtés sans renommer l'existant.
• SCSS. L'export génère des variables $nom qui contiennent la même formule clamp() : le préprocesseur la laisse telle quelle.
• Tailwind CSS v4. Les variables --text-* déclarées dans un bloc @theme deviennent des classes utilitaires : --text-xl donne text-xl. Elles remplacent alors les valeurs par défaut du même nom.
• JSON. Pratique pour alimenter des jetons de design (design tokens) ou un outil de maquettage.
• Cohérence. Reliez cette échelle à vos autres choix visuels : la palette de couleurs, les arrondis et les ombres. Un système cohérent repose sur peu de valeurs, réutilisées partout.

Questions fréquentes