clamp(), min() et max() en CSS : une taille fluide sans écrire de media query

Un titre lisible sur un grand écran devient souvent minuscule sur mobile, ou inversement, un titre confortable sur mobile déborde sur desktop. La solution classique empile une Media query par palier d'écran, pour ajuster font-size à chaque fois. clamp() remplace cette pile de règles par une seule ligne qui calcule une taille fluide entre deux bornes.

min() et max() sont les deux briques plus simples dont clamp() est construit, et elles ont chacune leur utilité propre en dehors de la typographie.

Définition

clamp(min, idéal, max) prend trois valeurs : un minimum, une valeur idéale qui varie généralement selon la taille de l'écran, et un maximum. Le navigateur retient la valeur idéale tant qu'elle reste entre les deux bornes, et bascule sur le minimum ou le maximum dès qu'elle les dépasse.

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}

Sur un petit écran, 1.2rem + 2vw descend sous 1.75rem : c'est le minimum qui s'applique. Sur un très grand écran, cette même expression dépasse 3rem : c'est le maximum qui prend le relais. Entre les deux, le titre grandit en continu avec la largeur de la fenêtre.

Comment le navigateur choisit

min() et max(), les briques plus simples

min() retient la plus petite valeur d'une liste, max() la plus grande. Elles servent souvent seules, sans passer par clamp(), pour des cas plus simples qu'une taille fluide.

.conteneur {
  width: min(
    90%,
    600px
  ); /* jamais plus large que 600px, mais toujours fluide en dessous */
}

.texte {
  font-size: max(
    1rem,
    3vw
  ); /* jamais plus petit qu'1rem, quel que soit l'écran */
}

clamp(min, idéal, max) revient d'ailleurs à écrire max(min, min(idéal, max)) : les trois fonctions partagent la même logique de comparaison, clamp() n'étant qu'un raccourci pour le cas à trois valeurs le plus courant.

Ce que la typographie fluide doit garder

Utiliser uniquement des Unités de viewport dans la partie idéale, sans aucune part fixe, ignore le réglage de taille de texte que certains utilisateurs configurent dans leur navigateur pour mieux lire. Garder une composante en rem dans l'expression, comme 1.2rem + 2vw plutôt que 4vw seul, permet à la taille de continuer à réagir à ce réglage d'accessibilité tout en restant fluide.

Au-delà de la typographie

clamp() ne se limite pas à font-size : une largeur de conteneur suit exactement la même logique, par exemple width: clamp(300px, 50%, 800px);, qui reste fluide entre deux bornes fixes plutôt que de sauter brutalement d'une valeur à l'autre à un seuil précis. La valeur idéale peut elle-même contenir un calcul plus complexe grâce à calc(), qui combine plusieurs unités dans la même expression avant que clamp() ne la compare à ses deux bornes.

Questions fréquentes

Non pour une couleur, qui n'a pas d'ordre naturel à comparer. Oui en revanche pour toute grandeur numérique comparable comme une durée ou un angle, même si l'usage reste très largement dominé par les longueurs et les tailles de texte.

La spécification prévoit ce cas en priorisant le minimum sur le maximum, mais le résultat visuel devient difficile à prévoir sans relire l'expression. La bonne pratique reste de garantir soi-même, avant d'écrire l'expression, que le minimum ne dépasse jamais le maximum.

Non, il remplace surtout les media queries qui ne servaient qu'à ajuster une taille ou un espacement. Les media queries restent nécessaires pour des changements structurels, comme passer d'une navigation en colonne à une navigation horizontale.