Qu’est-ce que la typographie fluide ?

La typographie fluide définit chaque taille de police comme une fonction de la largeur du viewport : une taille minimale pour les petits écrans, une maximale pour les grands, et un glissement fluide et continu entre les deux. Elle remplace le modèle à points de rupture — des tailles fixes qui sautent à quelques largeurs choisies — par une taille de police responsive recalculée à chaque largeur intermédiaire.

La technique est devenue praticable quand CSS a acquis un moyen d’exprimer « une valeur glissante avec un plancher et un plafond » en une seule déclaration, et elle devient un système lorsque cette déclaration est appliquée une seule fois, à la racine, pour que toute l’échelle typographique se déplace d’un bloc. Les deux versions sont détaillées ci-dessous avec des chiffres réels. Cet article est le point de départ de notre guide de la typographie fluide.

Quel problème la typographie fluide résout-elle ?

Le modèle à points de rupture sert une plage continue d’écrans avec une fonction en escalier. Un titre réglé pour paraître juste à 1200px reste la taille affichée à 900px, où il encombre les colonnes plus étroites, et à 1400px, où il ne porte plus la mise en page plus large. Entre deux points de rupture quelconques, le design s’éloigne de la largeur pour laquelle il a été réglé ; ajouter davantage de points de rupture raccourcit cette dérive mais multiplie le travail de réglage — et chaque nouveau palier a ses propres bords.

La version intuitive du problème : les écrans forment un continuum. Les appareils existent à pratiquement toutes les largeurs, d’environ 320px jusqu’aux moniteurs ultra-larges, et un continuum servi par des paliers a toujours des bords — des largeurs où le saut est visible, et des plages où la taille est simplement tolérée. La typographie fluide dissout ces bords en faisant suivre directement la largeur à la taille : au lieu de demander « laquelle de mes trois tailles s’applique ici ? », le navigateur calcule l’unique taille qui appartient à cette largeur précise.

Comment la typographie fluide fonctionne-t-elle en CSS ?

Toute la technique tient dans une seule déclaration à l’aide de clamp(), qui prend un minimum, une valeur préférée et un maximum. La valeur préférée mélange une unité de viewport (la partie glissante) avec un terme en rem (l’ancre qui préserve le fonctionnement du zoom). Voici un titre qui glisse de 28px à un viewport de 360px jusqu’à 38px à 1280px :

h2 {
  font-size: clamp(1.75rem, 1.5054rem + 1.087vw, 2.375rem);
}

Les nombres ne sont pas arbitraires. Le terme 1.087vw est la pente — dix pixels de croissance répartis sur 920 pixels de viewport — et 1.5054rem (≈24,09px) est l’endroit où cette droite croise la largeur de viewport nulle. Vérifiez aux deux extrémités : à 360px, 1.087vw vaut ≈3,91px, et 24,09 + 3,91 = 28px. À 1280px, 1.087vw vaut ≈13,91px, et 24,09 + 13,91 = 38px. En dessous de 360px, le minimum s’impose ; au-dessus de 1280px, le maximum s’impose ; entre les deux, la taille est toujours sur la droite.

L’histoire derrière cette seule ligne est brève. Les unités de viewport, au début des années 2010, ont rendu possible le « la taille suit l’écran », et les formules calc() mêlant vw et rem l’ont rendu contrôlable. L’arrivée de clamp() dans les principaux navigateurs vers 2020 a condensé tout le motif en une seule déclaration.

Qu’est-ce qui transforme une taille fluide en système fluide ?

Écrire un clamp comme celui ci-dessus pour chaque taille d’une échelle fonctionne, mais cela donne à chaque taille sa propre pente — et une douzaine de pentes calculées indépendamment sont une douzaine d’occasions de se contredire. La version systématique déplace le clamp vers la taille de police racine et exprime toutes les autres tailles en rem :

html {
  font-size: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem); /* ≈16px @360 → ≈18px @1280 */
}

(Les bornes et l’ordonnée à l’origine sont en rem plutôt qu’en px pour une raison : sur l’élément racine, rem se résout par rapport à la préférence de taille de police du navigateur du lecteur, donc un clamp exprimé en rem respecte ce réglage tandis qu’un clamp en px l’écrase silencieusement.)

Comme rem est défini par rapport à la racine, chaque valeur basée sur rem dans le document suit désormais cet unique clamp. Le corps de texte à 1rem glisse de 16px à 18px ; un titre à 2.369rem glisse de ≈37,9px à ≈42,6px ; rien d’autre dans la feuille de style n’a besoin de changer. C’est ainsi que fonctionne le mode fluide de Scale Composer : vous définissez quatre paramètres — la taille de base à la petite extrémité, à la grande extrémité, et les deux largeurs de viewport — et une seule pente porte tout le système.

Voyez la version système en mouvement : ouvrez une échelle typographique complète en mode fluide et faites glisser la largeur de l’aperçu — chaque niveau de l’échelle se recalcule à partir du même clamp racine à mesure que le viewport change.

Qu’est-ce que la typographie fluide ne change pas ?

Deux choses survivent intactes, et toutes deux sont souvent perçues à tort comme des victimes.

Les proportions de l’échelle. La typographie fluide change les pixels rendus, pas les relations. Avec le clamp racine ci-dessus, chaque valeur en rem croît du même facteur — 12,5 % d’une extrémité du glissement à l’autre — de sorte qu’une échelle bâtie sur un ratio de 1,333 reste une échelle 1,333 à 360px, à 1280px et à toute largeur intermédiaire. La hiérarchie que vous avez conçue est ce qui glisse ; elle ne se dissout pas.

Les points de rupture de la mise en page. La typographie fluide concerne le texte, pas les colonnes. Une grille de mise en page change toujours le nombre de colonnes par paliers, parce qu’une grille est réellement discrète — vous pouvez avoir deux colonnes ou trois, pas 2,4. La typographie fluide retire les sauts du texte tandis que la mise en page conserve ses points de rupture ; les deux systèmes coexistent, chacun répondant à la largeur de la façon qu’exige son propre contenu.

Comparer fixe et fluide sur la même échelle

Le moyen le plus rapide d’intérioriser la différence est de regarder une même échelle changer de modèle : basculez la même échelle entre fixe et fluide, puis redimensionnez l’aperçu dans chaque mode. En fixe, les tailles restent immobiles jusqu’à ce qu’un point de rupture vienne les sauver ; en fluide, elles suivent la largeur en continu. Les proportions ne bougent jamais dans l’un ou l’autre mode — et c’est là tout l’intérêt : la typographie fluide change le moment où les tailles sont justes (toujours, dans la plage) plutôt que ce qu’est l’échelle.