Calculateur CSS Clamp() 🔒 Fonctionne localement dans votre navigateur — rien n’est envoyé.

Générez une valeur clamp() fluide pour une mise à l'échelle en douceur des tailles de police.

Ne modifiez ceci que si votre site définit html { font-size } différemment des 16px par défaut du navigateur.

Sortie CSS

 

Aperçu

Le redimensionnement fluide réel ne se voit qu'en redimensionnant la fenêtre du navigateur. Ces trois rendus approchent la plage aux largeurs min., moyenne et max. du viewport.

Au viewport min.
Le rapide renard brun saute par-dessus le chien paresseux
Point médian (approx.)
Le rapide renard brun saute par-dessus le chien paresseux
Au viewport max.
Le rapide renard brun saute par-dessus le chien paresseux

À propos de cet outil

La typographie responsive traditionnelle saute entre des tailles fixes à chaque point de rupture de media query — 16px sur mobile, puis un saut brutal à 20px passé une certaine largeur. Le `clamp(MIN, PRÉFÉRÉ, MAX)` de CSS remplace ce saut par une mise à l'échelle continue : la taille de police grandit en douceur, en phase avec le viewport, entre le minimum et le maximum choisis. En dessous de la largeur min. du viewport, elle se "fixe" au minimum ; au-dessus du maximum, elle se fixe au maximum. Ce n'est qu'entre les deux qu'elle est flexible.

Ce calculateur fait l'interpolation mathématique à votre place : il calcule la pente linéaire entre vos tailles de police min. et max. sur la plage de viewport choisie, l'exprime comme une valeur préférée basée sur `vw`, et enveloppe le tout dans une chaîne `clamp()` prête à coller. Collez le résultat directement dans `font-size` (ou toute autre propriété numérique) — plus besoin de surcharges spécifiques par point de rupture pour l'échelle typographique.

Questions fréquentes

Pourquoi utiliser clamp() plutôt qu'une simple media query ?

Les media queries sautent entre des tailles fixes aux points de rupture, tandis que clamp() s'adapte de manière fluide et continue entre votre min et max au fur et à mesure que le viewport change de taille — aucun « saut » visible à aucune largeur.

clamp() fonctionne-t-il dans tous les navigateurs ?

Oui — CSS clamp() est pris en charge par tous les grands navigateurs (Chrome, Firefox, Safari, Edge) depuis 2020, il est donc sûr de l'utiliser en production sans solution de repli pour pratiquement tous les publics aujourd'hui.