Générateur CSS clamp() | Typographie fluide sans media queries

Saisis une largeur de viewport minimale et maximale ainsi qu'une valeur minimale et maximale, et cet outil résout l'interpolation linéaire à ta place pour renvoyer une déclaration clamp(min, pentevw + ordonnée, max) prête à coller. Il prend en charge font-size, padding, gap, border-radius et plus, bascule entre px et rem, et affiche à la fois le calcul de la pente et de l'ordonnée et un aperçu de la valeur par viewport.

💡 À propos de cet outil

En conception responsive, le même besoin revient sans cesse : qu'un titre passe de 24px sur mobile à 48px sur grand écran, mais de façon progressive. La méthode classique consistait à empiler des media queries à chaque point de rupture, ce qui fait sauter le texte par paliers et impose une nouvelle règle dès que la maquette évolue.

clamp() remplace tout cet escalier par une seule ligne qui s'adapte de manière continue. La difficulté tient au deuxième argument : la valeur préférée doit suivre le viewport, quelque chose comme 2vw + 8px. Calculer cette pente et cette ordonnée à la main revient à résoudre une équation linéaire à chaque fois : la pente vaut (valeurMax − valeurMin) / (vpMax − vpMin) et l'ordonnée à l'origine vaut valeurMin − pente × vpMin. C'est faisable, mais fastidieux et source d'erreurs quand on itère sur un design.

Saisis tes quatre nombres et le calculateur fait l'algèbre puis renvoie la déclaration. Le panneau de détail montre précisément comment la pente et l'ordonnée ont été obtenues : la sortie n'est donc pas une boîte noire et tu peux vérifier le résultat ou ajuster les entrées en confiance. L'aperçu trace la valeur réellement calculée à des largeurs courantes de 320px à 1920px, y compris l'endroit où elle se fige (clamp) à chaque extrémité.

🧐 Questions fréquentes

Puis-je saisir des valeurs en px et obtenir une sortie en rem ? Oui. Bascule l'unité de sortie sur rem et l'outil convertit depuis les px en s'appuyant sur ta font-size racine (16px par défaut). Pour font-size, la sortie en rem est généralement préférable car elle respecte la taille de police définie par l'utilisateur dans son navigateur.

Que se passe-t-il si la valeur max est inférieure à la valeur min ? Tu obtiens une pente négative : la propriété diminue à mesure que le viewport s'élargit. C'est du CSS parfaitement valide, pratique pour des espacements que tu veux resserrer sur les grands écrans.

Le viewport min et le viewport max peuvent-ils être identiques ? Non. Avec des viewports égaux ou inversés (min ≥ max), la pente de la droite n'est pas définie : l'outil affiche donc une erreur et arrête le calcul. Garde min < max.

Un clamp() basé sur vw pose-t-il un problème d'accessibilité ? Une valeur préférée composée uniquement de vw peut résister au zoom de l'utilisateur. Cet outil conserve un décalage fixe vw + rem (ou px) : ainsi, quand ton minimum est en rem, tu gardes une certaine résistance au zoom au lieu de tout figer en unités de viewport.

Fonctionne-t-il pour d'autres propriétés que font-size ? Oui. Tu peux choisir padding, margin, gap, width, height, border-radius, letter-spacing ou line-height parmi les préréglages, ou saisir n'importe quel nom de propriété personnalisé.

📚 Le saviez-vous

clamp() est une fonction mathématique normalisée dans le CSS Values and Units Module Level 4, aux côtés de min() et max(). En interne, clamp(MIN, VAL, MAX) équivaut à max(MIN, min(VAL, MAX)) : elle renvoie la valeur médiane des trois, un modèle mental utile quand un résultat surprend. La prise en charge est arrivée dans les principaux moteurs autour de 2020, et la typographie fluide est vite devenue la façon habituelle de gérer le texte responsive. L'astuce d'ajouter un terme vw à une unité fixe est antérieure à la fonction — elle circulait depuis des années sous des noms comme « fluid type » et « CSS locks » — mais elle nécessitait calc() et quelques media queries. Tout condenser dans un seul clamp() est ce qui a démocratisé le motif.