Calculer une échelle typographique fluide étape par étape

Ouvrez la feuille de style de nombreux sites fluides et vous y trouverez trente expressions clamp() — une par taille, chacune avec sa propre pente et sa propre ordonnée à l’origine, qui doivent toutes s’accorder pour que l’échelle reste cohérente. Ouvrez la feuille de style d’un système fluide fondé sur la racine et vous n’en trouverez qu’une.

Une échelle typographique fluide requiert quatre décisions — la taille de base au plus petit viewport, la taille de base au plus grand, et les deux largeurs de viewport — plus le ratio que vous avez déjà. Calculez une seule pente et une seule ordonnée à l’origine pour la taille de police racine, exprimez toutes les autres tailles en rem, et l’échelle entière glisse en conservant ses proportions. Cet article parcourt ce calcul une fois, entièrement. Il fait partie de notre guide de la typographie fluide ; l’alternative taille par taille est également traitée plus bas, car vous la rencontrerez dans la nature.

De quelles quatre entrées une échelle typographique fluide a-t-elle besoin ?

Le modèle à quatre entrées est la méthodologie popularisée par Utopia, qui a présenté la typographie fluide comme la conception de deux états — une échelle pour petit écran et une échelle pour grand écran — en laissant le navigateur interpoler. Les quatre mêmes nombres pilotent l’architecture à clamp racine présentée ici :

• base-min — taille du corps de texte côté petit. 16px est le plancher habituel ; descendre en dessous échange la lisibilité contre de la place.
• base-max — taille du corps de texte côté grand. 18px donne un glissement doux ; des valeurs plus grandes conviennent aux mises en page centrées sur la lecture, vues de plus loin.
• vp-min — le viewport où le glissement commence, typiquement un petit téléphone (360px ici).
• vp-max — le viewport où le glissement s’arrête, typiquement là où le conteneur de votre mise en page plafonne (1280px ici).

16→18 sur 360→1280 est un brief par défaut raisonnable : une croissance suffisante pour garder les grands écrans confortables, assez subtile pour que personne ne la remarque.

Comment calcule-t-on le clamp racine ?

Deux nombres dérivés transforment les quatre entrées en une expression clamp(). La pente est la croissance sur la plage :

slope = (18 − 16) / (1280 − 360) = 2 / 920 ≈ 0.002174   → ×100 ≈ 0.2174vw

L’ordonnée à l’origine ancre la droite en un point connu :

intercept = 16 − 0.002174 × 360 ≈ 15.22px

Assemblé et appliqué à la racine :

html {
  font-size: clamp(16px, 15.22px + 0.2174vw, 18px);
}

Vérifiez les deux extrémités : à 360px, 15,22 + 0,2174 × 3,6 ≈ 15,22 + 0,78 = 16px ✓ ; à 1280px, 15,22 + 0,2174 × 12,8 ≈ 15,22 + 2,78 = 18px ✓. Voilà tout le calcul — vous n’en aurez plus besoin pour aucune autre taille.

Pourquoi chaque taille n’a-t-elle pas besoin de son propre calcul ?

Parce que le rem est défini par rapport à la racine, et c’est la racine qui glisse. Un titre défini à 2.369rem (trois crans au-dessus sur une échelle de ratio 1,333) s’affiche à 2,369 × 16 ≈ 37,9px quand la racine est à son minimum et à 2,369 × 18 ≈ 42,6px à son maximum — pas de second clamp, pas de seconde pente. Chaque cran de l’échelle hérite du glissement de la même façon :

Lisez le tableau verticalement et le ratio tient aux deux extrémités — chaque ligne vaut 1,333× la précédente. Lisez-le horizontalement et chaque ligne croît du même 12,5%, parce que chaque ligne suit la même racine. Proportions intactes, une seule pente, aucune dérive entre les tailles. C’est aussi pourquoi aucune session de calculateur d’échelle typographique fluide n’est nécessaire par taille : les quatre paramètres constituent toute l’entrée. Dans le mode fluide de Scale Composer, vous voyez cela directement — ouvrez le jeu complet de paramètres et le tableau d’échelle affiche la valeur en pixels de chaque cran aux deux extrémités de viewport, recalculée à mesure que vous faites glisser l’une des quatre entrées.

L’export de tokens DTCG transporte les quatre mêmes paramètres fluides dans sa section d’échelle, afin que les outils en aval puissent reconstruire le clamp au lieu d’analyser du CSS.

Quand les clamps par taille sont-ils le meilleur outil ?

Le modèle à clamp racine donne à chaque taille la même croissance relative. La sortie de type Utopia donne à chaque taille son propre clamp — son propre min, max et sa propre pente — ce qui achète un pouvoir légitime : la raideur par niveau. Un titre d’affichage peut glisser de 40px à 64px (60% de croissance) tandis que le texte courant glisse de 16 à 18 (12,5%) :

font-size: clamp(2.5rem, 1.913rem + 2.6087vw, 4rem); /* 40px @360 → 64px @1280 */

Vérifié : 30,61 + 2,6087 × 3,6 ≈ 40px ✓ ; 30,61 + 2,6087 × 12,8 ≈ 64px ✓ (ordonnée à l’origine ≈30,61px ≈ 1,913rem). Si votre design veut que la hiérarchie s’élargisse sur les grands écrans — en-têtes éditoriaux, héros marketing — ce glissement différentiel est la raison honnête de payer le coût. Le coût, c’est la surface : une feuille de style dont l’ampleur est le produit du nombre de tailles par le nombre de clamps, où trente expressions doivent rester mutuellement cohérentes, et où changer la plage de viewport implique de toutes les régénérer plutôt que d’éditer une seule ligne.

Comment l’espacement devient-il fluide dans la même passe ?

Si la typographie glisse mais pas l’espacement, la composition dérive — le texte grandit tandis que l’espace autour reste immobile. Dans l’architecture à clamp racine, l’espacement n’a besoin d’aucun clamp propre : les tokens d’espacement sont de simples valeurs en rem, et le rem suit la racine glissante exactement comme le font les tailles de police. L’export enveloppe chacune dans une étape d’arrondi :

--space-md: round(nearest, calc(1.5rem * var(--spacing-density)), 0.5rem); /* 24→27px (fluide) */

Le token 1.5rem s’affiche à 24px quand la racine est à 16 et à 27px quand elle atteint 18 — le même 12,5% que gagne la typographie, gardant l’espacement et la typographie en ratio — et round(nearest, …, 0.5rem) accroche la valeur mobile au demi-rem le plus proche, de sorte que l’espacement fluide atterrit toujours sur la grille d’espacement au lieu de dériver à travers des valeurs fractionnaires. L’export CSS commente chaque valeur d’espacement fluide avec sa plage en pixels, afin que les extrémités conçues restent visibles dans le code.

Faites vos propres calculs

Les quatre entrées sont des décisions au sujet de votre mise en page, et la façon la plus rapide de vous les approprier est de les changer : partez des paramètres par défaut, réglez base-max sur la taille du corps de texte de votre grand écran, déplacez vp-max jusqu’au plafond de votre conteneur, et lisez le tableau d’échelle aux deux extrémités. Si le cran supérieur paraît juste aux deux largeurs, les trente clamps que vous n’avez pas écrits étaient bien les trente clamps à ne pas écrire.