Générez du CSS clamp() pour une typographie fluide et responsive : definissez taille min/max et largeurs d'ecran, obtenez la ligne clamp prete a copier.
Générateur de typographie fluide clamp()
🔧 Configuration
rem pour respecter le zoom et les préférences d'accessibilité de l'utilisateur.
styles.css
📐 Tailles calculées par écran
| Largeur d'écran | Taille calculée (px) | Équivalent rem |
|---|
Typographie fluide : faire varier le texte sans media queries
La typographie fluide (ou fluid typography) consiste à faire grandir et rétrécir la taille du texte en continu selon la largeur de l'écran, plutôt que par paliers brusques imposés par des @media. Le résultat : un rendu harmonieux du mobile au grand écran, avec une seule ligne de CSS. La fonction clamp() rend cela possible nativement, sans JavaScript ni feuille de calcul. Ce générateur calcule pour vous la formule exacte à partir d'une taille minimale, d'une taille maximale et de la plage de largeurs d'écran ciblée.
Comprendre la fonction clamp(MIN, PRÉFÉRÉ, MAX)
clamp() prend trois arguments et renvoie toujours une valeur bornée :
- MIN — la plus petite taille autorisée (plancher) ;
- PRÉFÉRÉ — une valeur idéale, généralement exprimée avec l'unité
vwpour qu'elle suive la largeur de la fenêtre ; - MAX — la plus grande taille autorisée (plafond).
Le navigateur choisit la valeur préférée tant qu'elle reste entre le min et le max ; au-delà, il « clampe » sur la borne la plus proche. C'est exactement le comportement d'un texte fluide : il grandit avec l'écran, puis se fige une fois les limites atteintes.
/* Titre fluide : 1rem sur petit mobile → 2rem sur grand écran */
h1 {
font-size: clamp(1rem, 0.714rem + 1.43vw, 2rem);
}La formule derrière le calcul
La partie PRÉFÉRÉ est une équation de droite reliant les deux points de design : (largeur min, taille min) et (largeur max, taille max). On en déduit une pente et une ordonnée à l'origine :
pente = (tailleMax - tailleMin) / (largeurMax - largeurMin)
origine = tailleMin - pente * largeurMin
préféré = origine + (pente * 100)vw /* vw = pourcentage de la largeur */clamp() exacte, déjà convertie en rem.
Pourquoi préférer rem aux px
Exprimer le min et le max en rem plutôt qu'en px est un choix d'accessibilité. Le rem est relatif à la taille de police racine définie par l'utilisateur dans son navigateur. Un internaute malvoyant qui augmente cette taille verra votre texte fluide grandir en conséquence — ce qui n'arrive pas avec des valeurs en pixels figés. Le générateur convertit automatiquement vos saisies en rem selon la base que vous indiquez (16 px par défaut).
clamp() uniquement en vw sans borne rem dans la partie préférée. Sans composante relative à la racine, le zoom texte du navigateur n'a plus d'effet et l'accessibilité en souffre.
Au-delà du texte : espacements et conteneurs
clamp() ne se limite pas à font-size. Il s'applique aussi aux espacements (padding, margin, gap), aux rayons d'arrondi et même aux largeurs de conteneur. C'est la base d'un design system fluide où toutes les dimensions respirent avec l'écran. Sélectionnez la propriété voulue dans l'outil pour générer le bon snippet.
.section {
padding: clamp(1.5rem, 1rem + 2.5vw, 4rem); /* marges intérieures fluides */
gap: clamp(0.5rem, 0.25rem + 1vw, 1.5rem); /* espacement de grille fluide */
}FAQ — Typographie fluide CSS clamp()
clamp() remplace plusieurs paliers de @media. Les media queries restent utiles pour des changements de mise en page (passer d'une à deux colonnes, masquer un bloc), pas pour redimensionner en continu.
clamp() n'utilise que des vw : le zoom texte du navigateur devient sans effet, ce qui échoue au critère WCAG 1.4.4. La solution, appliquée par cet outil, est d'inclure une composante en rem dans la valeur préférée (origine + pente·vw), qui garde le texte sensible au zoom.
--fs-h1), ou dans une classe utilitaire arbitraire Tailwind comme text-[clamp(1rem,0.71rem+1.43vw,2rem)].
clamp() est supporté par tous les navigateurs depuis 2020. Pour des cibles très anciennes, déclarez une font-size fixe avant la ligne clamp() : le navigateur appliquera la dernière valeur qu'il comprend, l'ancienne servant alors de repli.
Conclusion
La typographie fluide avec clamp() est l'une des techniques CSS modernes les plus rentables : un rendu impeccable sur toutes les tailles d'écran, zéro media query à maintenir, et une meilleure accessibilité quand on travaille en rem. Ce générateur vous fait gagner du temps en produisant la formule exacte, vérifiée par un aperçu en direct et un tableau des tailles intermédiaires. Copiez la ligne, collez-la dans votre feuille de styles, et étendez l'approche aux espacements pour un design entièrement fluide.
Convertisseur unités CSS
