Créer une échelle typographique fluide avec CSS clamp()

Une échelle typographique fluide, ce sont deux échelles fixes, l’une pour un téléphone et l’autre pour un ordinateur, reliées par une droite. clamp() est la façon dont le CSS trace cette droite et l’arrête aux deux bouts. Le calcul tient en quatre étapes, et il vaut la peine de le faire une fois à la main pour que les nombres d’une feuille de style générée cessent de paraître magiques.

Deux termes pour commencer

Une échelle typographique est une suite ordonnée de tailles de police obtenue en multipliant une taille de texte courant par un ratio, une fois par palier. Avec un ratio de 1.25, un texte courant de 19px donne 23.75px pour le palier au-dessus, 29.69px pour le suivant, et ainsi de suite.

Une taille fluide est une taille qui croît en ligne droite avec le viewport entre deux largeurs et reste fixe en dehors. En CSS, elle s’écrit clamp(minimum, preferred, maximum), où la valeur préférée combine une longueur fixe et une unité de viewport.

Construire l’échelle avec l’outil

1. Ouvrez le Type scale generator et choisissez d’abord la police, dans Typeface. Chaque famille de la liste affiche sa hauteur d’x, et toutes les mesures plus bas dépendent de la famille : la choisir en dernier, c’est lire les chiffres deux fois.
2. Réglez Body size, narrow (taille du texte courant, étroit ; de 12 à 24px, 16 au départ) et Body size, wide (taille du texte courant, large ; de 14 à 28px, 19 au départ).
3. Choisissez Ratio, wide parmi sept boutons, de 1.125 (Major second) à 1.618 (Golden ratio). L’extrémité étroite utilise 1.2, comme le panneau l’indique sous les boutons.
4. Réglez Steps up (paliers au-dessus, de 1 à 8) et Steps down (paliers en dessous, de 0 à 4). Les valeurs par défaut sont cinq et deux.
5. Réglez Column width (largeur de colonne) en pourcentage du viewport, et lisez Body line length (longueur de ligne du texte courant), qui compte les caractères par ligne à 360, 768, 1024, 1280 et 1440px.
6. Lisez chaque ligne de l’échelle : sa taille aux extrémités étroite et large, puis sa hauteur de capitale et sa hauteur d’x en pixels.
7. Choisissez un format de sortie : CSS custom properties, Tailwind v4 @theme, SCSS map ou Design tokens (W3C DTCG). Appuyez sur Copy scale dans la barre du bas. Le bouton Cap at …rem de cette barre copie un max-width qui ramène le texte courant à 66 caractères par ligne.

Le calcul de clamp(), en entier

Prenez les valeurs par défaut de l’outil pour le palier du texte courant : 16px sur un viewport de 360px, 19px sur un viewport de 1440px, et la taille racine par défaut du navigateur, 16px.

Étape 1, la pente. Combien de pixels de taille de police par pixel de viewport : (19 − 16) ÷ (1440 − 360) = 3 ÷ 1080 = 0.0027778.

Étape 2, la pente en unité de viewport. 1vw vaut 1 % de la largeur du viewport, donc on multiplie par 100 : 0.0027778 × 100 = 0.2778vw.

Étape 3, l’ordonnée à l’origine. La taille de police que donnerait la droite pour un viewport de largeur nulle : 16 − 0.0027778 × 360 = 16 − 1 = 15px, et 15 ÷ 16 = 0.9375rem.

Étape 4, les extrémités. 16 ÷ 16 = 1rem et 19 ÷ 16 = 1.1875rem.

Assemblé : clamp(1rem, 0.9375rem + 0.2778vw, 1.1875rem).

Pour vérifier, réinjectez des largeurs de viewport. La valeur préférée vaut 15px plus 0.0027778 fois le viewport :

Viewport	Valeur préférée	Ce que renvoie clamp()
320px	15 + 0.89 = 15.89px	16px, le minimum
360px	15 + 1 = 16px	16px
768px	15 + 2.13 = 17.13px	17.13px
1440px	15 + 4 = 19px	19px
1920px	15 + 5.33 = 20.33px	19px, le maximum

Le palier au-dessus se calcule de la même façon, avec des nombres plus grands. Étroit : 16 × 1.2 = 19.2px. Large : 19 × 1.25 = 23.75px. La pente vaut 4.55 ÷ 1080 = 0.0042130, soit 0.4213vw. L’ordonnée à l’origine vaut 19.2 − 0.0042130 × 360 = 19.2 − 1.5167 = 17.6833px, soit 1.1052rem. Les extrémités sont 19.2 ÷ 16 = 1.2rem et 23.75 ÷ 16 = 1.4844rem.

Voici ces deux lignes telles que l’outil les écrit dans sa sortie CSS avec les réglages par défaut (il émet tous les paliers, du plus grand au plus petit, suivis de la règle de rognage) :

:root {
  --step-md: clamp(1.2rem, 1.1052rem + 0.4213vw, 1.4844rem);
  --step-base: clamp(1rem, 0.9375rem + 0.2778vw, 1.1875rem);
}

h1, h2, h3, h4, .trim {
  text-box: trim-both cap alphabetic;
}

Les extrémités sont en rem pour qu’un lecteur qui a choisi une taille de police par défaut plus grande dans son navigateur en profite. Seul le terme central utilise des vw. La règle text-box supprime l’espace qu’une police prévoit au-dessus des capitales et sous la ligne de base, si bien qu’un titre repose exactement sur sa boîte. Elle est passée en Baseline sur tous les moteurs de navigateur en août 2026.

Pourquoi les deux extrémités utilisent des ratios différents

À cinq paliers au-dessus, l’extrémité étroite donne 16 × 1.2⁵ = 16 × 2.48832 = 39.81px et l’extrémité large 19 × 1.25⁵ = 19 × 3.0518 = 57.98px. Si le téléphone avait aussi utilisé 1.25, son plus grand titre ferait 16 × 3.0518 = 48.83px, soit 9px de plus sur un écran de 360px de large. Un ratio plus doux côté étroit garde le haut de l’échelle utilisable sur téléphone sans rendre l’échelle de bureau timide.

La taille que vous réglez n’est pas celle que vous voyez

font-size définit le cadratin, qui est invisible. Ce que voit le lecteur, ce sont les lettres à l’intérieur, et leurs proportions dépendent de la police. La hauteur de capitale est la hauteur d’une capitale à sommet plat comme le H, exprimée en fraction de la taille de police.

Les données de polices de l’outil donnent à Inter une hauteur de capitale de 0.728 et une hauteur d’x de 0.546, et à EB Garamond 0.650 et 0.400. Composez la même échelle dans chacune :

Police	Capitales à 57.98px	Hauteur d’x à 19px	Caractères par ligne du texte courant à 1440px
Inter	57.98 × 0.728 = 42.21px	19 × 0.546 = 10.37px	98
EB Garamond	57.98 × 0.650 = 37.69px	19 × 0.400 = 7.60px	122

Pour égaler les capitales de 42.21px d’Inter en EB Garamond, il faut 42.21 ÷ 0.650 = 64.94px. Les mêmes valeurs clamp() produisent deux échelles d’aspect différent, et c’est pourquoi l’outil affiche la hauteur de capitale et la hauteur d’x à côté de chaque palier. Pour l’ampleur des écarts de hauteur d’x d’une famille à l’autre, voir la hauteur d’x de 872 familles de polices.

Le défaut que clamp() masque : la longueur de ligne

Une taille de police fluide et une colonne définie en pourcentage du viewport ne grandissent pas au même rythme : la ligne s’allonge à mesure que l’écran s’élargit, et rien sur la page ne paraît cassé.

Avec les réglages par défaut de l’outil (Inter, texte courant de 19px côté large, colonne à 62 % du viewport), Body line length affiche 29, 58, 74, 89 et 98 caractères aux cinq largeurs, chacune mesurée à la taille de texte courant que donne clamp() à cette largeur. Le dernier chiffre correspond à 1440 × 0.62 = 892.8px de colonne, divisés par la chasse moyenne d’un caractère Inter, 0.478 × 19 = 9.082px, soit 98 ; le premier à 360 × 0.62 = 223.2px avec le texte courant de 16px de l’extrémité étroite, 223.2 ÷ (0.478 × 16) = 29. Le critère WCAG 1.4.8, de niveau AAA, fixe le plafond à 80. Deux des cinq largeurs le dépassent. (Jusqu’en octobre 2026, le balayage mesurait chaque largeur à la taille de l’extrémité large et affichait 25 côté étroit ; c’est la rédaction de ce guide qui l’a révélé.)

Une police plus étroite aggrave les choses. Le caractère moyen d’EB Garamond fait 0.385 em, donc la même colonne contient 892.8 ÷ (0.385 × 19) = 122 caractères.

La solution consiste à plafonner la colonne, pas à réduire le texte. Avec les réglages par défaut, l’outil suggère 0.478 × 19 × 66 = 599.4px, soit 599.4 ÷ 16 = 37.46rem, et son bouton Cap at 37.46rem copie cette valeur sous forme de ligne max-width.

Les autres méthodes

Aucun système d’exploitation ne propose de méthode intégrée pour construire une échelle typographique. L’alternative, c’est le calcul ci-dessus, qui tient dans un tableur : une ligne par palier, une colonne pour chacun des éléments suivants, taille étroite, taille large, pente, ordonnée à l’origine et clamp() final. Ce qu’un tableur ne vous donnera pas, c’est la hauteur de capitale et la longueur de ligne, parce qu’elles exigent les métriques propres à la police.

Vérifier ce qui sort de la page

L’échelle est calculée dans l’onglet. La seule requête effectuée concerne la police que vous choisissez : pour toute famille autre qu’une poignée de polices système courantes comme Arial et Georgia, la page charge la feuille de style de la police depuis Google Fonts, ce qui signifie que le nom de la famille est envoyé. Vos tailles et votre ratio, eux, ne le sont pas. Ils se trouvent dans la barre d’adresse après un #, la partie d’une URL qu’un navigateur n’envoie pas, et vous pouvez le confirmer dans le panneau Network des outils de développement en déplaçant les curseurs.

Et ensuite

Ouvrez le Type scale generator avec votre propre police et votre taille de texte courant. Pour trouver la plus petite taille de texte courant que vos couleurs et votre police peuvent supporter, passez d’abord par le Type legibility checker.