Générateur CSS clamp() (typographie fluide)
Échelle typographique qui grandit avec le viewport. Choisissez les tailles de police min et max, choisissez les largeurs d'écran min et max — obtenez une règle clamp() prête à coller avec un curseur d'aperçu en direct.
Qu'est-ce que la typographie fluide ?
La typographie fluide est une technique CSS où le texte s'échelonne en douceur entre une taille minimale et une taille maximale à mesure que la largeur du viewport change — au lieu de sauter aux points de rupture des media queries. Les navigateurs modernes prennent cela en charge nativement avec clamp(MIN, FORMULE, MAX), qui évalue la formule et plafonne le résultat entre le plancher et le plafond. La formule est typiquement un mélange d'un décalage fixe et d'un terme relatif au viewport (vw), donc la valeur suit la largeur d'écran dans la plage définie.
Comment utiliser ce générateur
Choisissez la taille de police min et max voulue pour les plus petites et plus grandes largeurs d'écran. Puis choisissez la plage de viewport — typiquement un minimum largeur de téléphone (320 à 375 px) et un maximum largeur de bureau (1200 à 1440 px). La zone de sortie affiche la déclaration clamp() exacte à coller dans votre CSS. Faites glisser le curseur d'aperçu pour voir ce que la règle produit à toute largeur sans redimensionner votre navigateur. Pour une échelle typographique complète (h1, h2, h3, body, small), déposez des valeurs en px séparées par virgule dans la zone de lot et obtenez un jeu de propriétés personnalisées CSS d'un coup.
Les maths derrière clamp()
Étant donnés (minVw, minFont) et (maxVw, maxFont) comme deux points, la fonction linéaire passant par ces deux points est font = pente · vw + ordonnée où pente = (maxFont − minFont) / (maxVw − minVw) et ordonnée = minFont − pente · minVw. Traduire la pente en unités vw la multiplie par 100, et l'ordonnée est convertie en rem en divisant par votre taille de police racine (pour que le zoom d'accessibilité fonctionne toujours). Le terme central de clamp() est alors {ordonnée}rem + {pente*100}vw.
Questions fréquentes
Pourquoi utiliser rem plutôt que px en sortie ?
rem quand l'utilisateur change la taille de police par défaut dans les paramètres du navigateur, mais ne mettent pas à l'échelle les valeurs px absolues. Utiliser rem dans le plancher, le plafond et l'ordonnée de clamp() préserve les préférences d'accessibilité de l'utilisateur et respecte WCAG 1.4.4 Redimensionnement du texte. Le terme vw n'a pas besoin de conversion — il est déjà relatif au viewport.Quelle plage de viewport utiliser ?
clamp() fonctionne-t-il partout ?
clamp(), min() et max() sont supportés dans tous les navigateurs majeurs depuis début 2020 (Chrome 79, Safari 13.4, Firefox 75). Pour les navigateurs antérieurs à 2020, vous pouvez prévoir un fallback avec une déclaration font-size classique en dehors de la règle, écrasée partout où c'est moderne.Puis-je utiliser clamp() pour autre chose que font-size ?
clamp(2rem, 5vw, 6rem) paraît juste du téléphone à l'écran ultra-large sans une seule media query.Comment construire une échelle typographique complète ?
:root.C'est quoi l'avertissement de pente que certains outils affichent ?
vw dépasse un seuil comme 5 vw, parce qu'à cette pente un petit zoom ou un grand écran fait sursauter le texte. Ce générateur n'impose pas de limite — mais si votre sortie ressemble à clamp(1rem, 0.5rem + 8vw, 5rem), envisagez d'élargir la plage de viewport pour faire baisser la pente sous 4 à 5 vw.