Comment fonctionne ce calculateur clamp()
Vous choisissez deux points : la taille voulue sur l’écran le plus étroit et celle voulue sur le plus large. Le calculateur trace une droite entre les deux et la transforme en une seule expression CSS clamp() en trois parties : un minimum, une valeur préférée et un maximum. Sous le viewport minimal, la valeur reste au minimum ; au-delà du viewport maximal, elle reste au maximum ; entre les deux, elle évolue en douceur, sans aucune media query.
La pente indique de combien de pixels la valeur augmente pour chaque pixel de largeur de viewport ; elle s’écrit en unités vw, où 1vw vaut 1 % de la largeur du viewport. L’ordonnée à l’origine est la valeur qu’aurait cette droite pour un écran de largeur nulle. Ensemble, elles forment l’argument central, par exemple 0.8333rem + 0.8333vw.
Pourquoi le résultat utilise rem
Intégrer une part en rem dans la valeur préférée garde le texte fluide lié à la taille de police que le lecteur a réglée dans son navigateur. Une taille construite uniquement en vw ignore cette préférence et peut affaiblir le zoom. C’est pourquoi rem est la sortie par défaut ; px reste disponible si vos design tokens sont en pixels, et le champ de police racine couvre les projets qui modifient la taille de police de l’élément html.
Aperçu, breakpoints et accessibilité
Faites glisser le curseur de viewport de 320 à 1920 px pour voir le texte à la taille qu’il aurait à cette largeur. Le tableau donne les tailles calculées à 320 et 375 px pour les mobiles, 768 et 1024 px pour les tablettes, et 1280, 1440 et 1920 px pour les ordinateurs, afin de vérifier que les titres ne sont ni à l’étroit sur mobile ni démesurés sur grand écran.
Le critère de succès WCAG 1.4.4 exige que le texte puisse être agrandi à 200 % sans perte de contenu. Le zoom du navigateur réduit aussi le viewport mesuré en pixels CSS : une typographie fluide trop agressive peut donc grossir moins que prévu. Une règle empirique répandue consiste à garder le maximum sous 2,5 fois le minimum, et le calculateur vous prévient si vous dépassez ce seuil.
Partager et exporter
Chaque réglage est enregistré dans l’URL de la page : vous pouvez mettre un résultat en favori ou l’envoyer à un collègue. Copiez la valeur clamp() brute, une propriété personnalisée CSS pour votre :root ou une classe Tailwind à valeur arbitraire. Besoin d’une série complète de tailles ? Passez en mode échelle typographique pour exporter une échelle modulaire sous forme de variables CSS.