Générateur clamp() CSS : police et espacement fluides

Mode d'emploi

Choisissez la Propriété, saisissez la Plus petite taille et la Plus grande taille, puis choisissez l'Unité des tailles.
Saisissez les deux largeurs dans Largeur de fenêtre où la taille est la plus petite et Largeur de fenêtre où la taille est la plus grande, et choisissez leur unité.
Si vous avez utilisé rem, vérifiez la Taille de police racine (px). Les navigateurs utilisent 16 px, sauf si le site définit une autre taille.
Copiez la Déclaration CSS, ou vérifiez le Calcul et la Taille aux largeurs courantes pour voir le résultat à chaque largeur.

Comment clamp() rend une taille fluide

clamp(MIN, VAL, MAX) prend un minimum, une valeur préférée et un maximum. La spécification CSS Values and Units précise qu'elle représente exactement la même valeur que max(MIN, min(VAL, MAX)). La taille ne descend donc jamais sous MIN et ne dépasse jamais MAX ; entre les deux, elle suit VAL, qui est ici une droite dépendant de la largeur de la fenêtre.

La droite va de la plus petite taille, à la plus petite largeur de fenêtre, jusqu'à la plus grande taille, à la plus grande largeur. Au-delà de ces deux largeurs, la taille reste la même.

pente = (plus grande taille − plus petite taille) / (plus grande fenêtre − plus petite fenêtre) ; ordonnée à l'origine = plus petite taille − pente × plus petite fenêtre ; valeur préférée = ordonnée à l'origine + pente × 100vw

Pente, ordonnée à l'origine et terme vw

La pente indique de combien la taille augmente par pixel de largeur de fenêtre. L'ordonnée à l'origine est le point où la même droite coupe une largeur de fenêtre de zéro. Une unité vw vaut un pour cent de la largeur de la fenêtre : la pente multipliée par 100 donne donc le terme qui suit la fenêtre.

Les deux largeurs et les deux tailles sont d'abord calculées en pixels avant que la pente soit trouvée. Une valeur en rem est multipliée par la taille de police racine : le même dessin donne donc le même résultat en rem ou en px lorsque la racine vaut 16 px.

Gardez la plus grande taille supérieure ou égale à la plus petite. L'outil refuse une plus grande taille plus petite, car une telle droite diminuerait quand l'écran s'agrandit.
Un terme en vw ne suit pas le réglage de taille de texte du visiteur, mais une ordonnée à l'origine en rem le suit. Testez la page à 200 % de zoom, et gardez l'ordonnée à l'origine en rem lorsque c'est possible.

Exemple détaillé : une police de 16 px à 24 px

Entre une fenêtre de 320 px et une fenêtre de 1 200 px, la police passe de 16 px à 24 px. La pente vaut (24 − 16) / (1 200 − 320) = 8 / 880, soit 0,0091 à quatre décimales près. L'ordonnée à l'origine vaut 16 − 0,0091 × 320 = 13,0909 px, et le terme en vw vaut 0,9091 vw.

La valeur est clamp(16px, 13.0909px + 0.9091vw, 24px), donc la déclaration CSS est font-size: clamp(16px, 13.0909px + 0.9091vw, 24px);. Avec des unités rem, de 1rem à 1.5rem entre 20rem et 75rem, et une racine de 16 px, on obtient clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem).

Questions fréquentes

Que devient la taille quand la fenêtre est plus étroite que la plus petite largeur ?

La taille reste à la plus petite taille. La formule clamp() ne laisse jamais la valeur descendre sous son minimum : le texte garde donc la taille que vous avez fixée pour la largeur la plus étroite.

Pourquoi la partie de la fenêtre est-elle écrite en vw ?

Une unité vw vaut un pour cent de la largeur de la fenêtre : elle change donc quand la fenêtre du navigateur change de taille. Une valeur en pixels ou en rem ne changerait pas avec la fenêtre, et la taille ne pourrait pas la suivre.

Pourquoi le code place-t-il parfois la partie en vw en premier ?

Lorsque l'ordonnée à l'origine est négative, le code écrit d'abord la partie en vw et soustrait l'ordonnée à l'origine, ce qui se lit plus clairement. Les deux formes donnent la même valeur.

Puis-je utiliser la valeur pour le padding, le margin ou le gap ?

Oui. Choisissez Padding (marge intérieure), Margin (marge extérieure) ou Gap (espacement) sous Propriété. La même droite convient à toute longueur : l'espacement grandit donc avec la fenêtre, comme une taille de police.

Quels navigateurs prennent en charge clamp() ?

Tous les grands navigateurs actuels prennent en charge clamp(). Si vos visiteurs utilisent des versions plus anciennes, vérifiez la page dans ces versions avant de vous fier à la taille fluide.

Ce que je saisis est-il enregistré ou envoyé à un serveur ?

Non. La valeur est calculée dans votre navigateur, et rien de ce que vous saisissez n'est enregistré ni envoyé à notre serveur. Copiez la déclaration avant de quitter la page.

Sources

Chiffres et texte vérifiés pour la dernière fois le mardi 10 novembre 2026.

Résultat

Calcul