Qu’est-ce que la typographie fluide avec clamp() ?
Plutôt que de changer la taille d’un titre par paliers avec des media queries, la typographie fluide la fait varier progressivement selon la largeur de l’écran. La fonction CSS clamp(min, préférée, max) le permet en une ligne : la valeur suit une formule basée sur vw, sans jamais descendre sous le minimum ni dépasser le maximum.
La difficulté est de calculer la valeur préférée. Pour qu’un titre passe de 1 rem sur un écran de 320 px à 2 rem sur un écran de 1280 px, il faut une pente et une ordonnée à l’origine précises. Ce générateur fait le calcul : vous indiquez la valeur minimale, la valeur maximale, la largeur d’écran minimale et maximale, en px ou en rem (avec une taille de police racine de 16 px par défaut, modifiable).
Il produit une expression comme clamp(1rem, 0.5rem + 2.5vw, 2rem) et explique la pente et l’ordonnée obtenues. Un curseur de largeur d’écran montre la taille calculée à n’importe quelle largeur, pour vérifier le comportement avant de l’intégrer. La même technique s’applique aux marges, padding et gap, pour des espacements qui respirent sur grand écran sans écraser le mobile.
Le générateur fonctionne dans votre navigateur et il est gratuit sans limite : pas d’essai à épuiser ni d’abonnement nécessaire.
Comment générer une valeur clamp() ?
- Choisissez l’unité (px ou rem) et, si besoin, la taille de police racine.
- Saisissez la valeur minimale et la valeur maximale.
- Saisissez la largeur d’écran minimale et maximale entre lesquelles la valeur varie.
- Déplacez le curseur de largeur pour vérifier la taille calculée.
- Copiez l’expression clamp() générée.
Quand utiliser clamp() ?
- Titres h1 et h2 qui grandissent progressivement avec l’écran.
- Padding de sections fluide entre mobile et desktop.
- gap d’une grille qui s’adapte à la largeur disponible.
- Échelle typographique complète d’un design system.
- Remplacer plusieurs media queries de font-size par une seule ligne.
La formule derrière clamp()
- Pente = (taille max − taille min) / (largeur max − largeur min).
- Ordonnée = taille min − pente × largeur min.
- Valeur préférée = ordonnée + (pente × 100)vw.
- Exemple : de 16 px à 32 px entre 320 et 960 px de large, pente = 16 / 640 = 0,025, ordonnée = 16 − 8 = 8 px, d’où clamp(1rem, 0.5rem + 2.5vw, 2rem).
- Gardez une partie en rem dans la valeur préférée : la taille réagit ainsi aussi au zoom et à la taille de police choisie par l’utilisateur, ce qui est important pour l’accessibilité.
Foire Aux Questions
Le générateur est-il gratuit ?
Oui, entièrement. Les générateurs CSS de ToolStudio sont gratuits et sans limite : vous ajustez les réglages, regardez l’aperçu en direct et copiez le CSS autant de fois que vous voulez, sans compte ni abonnement.
Pourquoi utiliser rem plutôt que px ?
Les rem suivent la taille de police définie par l’utilisateur dans son navigateur. Une typographie en rem respecte ce réglage, ce qui améliore l’accessibilité.
clamp() est-il bien pris en charge ?
Oui, clamp() est disponible dans tous les navigateurs modernes.
Puis-je l’utiliser pour autre chose que la police ?
Oui : padding, margin, gap, largeur ou hauteur, toute propriété qui accepte une longueur.
Que se passe-t-il en dehors des largeurs choisies ?
La valeur reste bloquée au minimum sous la largeur minimale et au maximum au-delà de la largeur maximale.