Design / Adaptatif
Générateur CSS clamp() pour une typographie et des espacements fluides
Saisissez les tailles minimale et maximale ainsi que les largeurs de viewport auxquelles elles s’appliquent, puis obtenez une expression clamp() en rem qui évolue progressivement entre les deux, avec un tableau des tailles pour les largeurs d’écran courantes.
Générateur CSS clamp() pour une typographie et des espacements fluides: L’outil trace une ligne droite entre les deux points : de 16 px pour un viewport de 320 px à 24 px pour 1280 px, la taille augmente de 0.8333 px tous les 100 px de largeur. La ligne s’écrit comme une partie fixe en rem plus une partie en vw, 0.8333rem + 0.8333vw, et clamp() la maintient entre 1rem et 1.5rem en dehors de cette plage. Fonctionne 100 % localement dans votre navigateur, sans aucun téléversement de fichier vers le serveur.
- Catégorie
- Outils développeur
- Exécutions
- Dans votre navigateur
- Coût
- Gratuit · sans inscription
- Disponibilité
- Prêt à l'emploi
Fonctionne entièrement dans votre navigateur
CSS
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
| Largeur de fenêtre | Taille |
|---|---|
| 320 px | 16 px |
| 375 px | 16,46 px |
| 768 px | 19,73 px |
| 800 px | 20 px |
| 1024 px | 21,87 px |
| 1280 px | 24 px |
| 1440 px | 24 px |
| 1920 px | 24 px |
La valeur centrale de clamp() est une droite passant par les deux points indiqués : elle ajoute une valeur fixe en rem à une part de la largeur de la fenêtre, de sorte que la taille évolue progressivement entre ces deux largeurs et s’arrête aux limites au-delà. L’utilisation de rem pour la partie fixe permet à la taille de s’adapter au réglage de taille de police de chaque lecteur. Cela fonctionne pour toute longueur : tailles de police, marges intérieures, espacements ou marges extérieures.
Exemple détaillé
Pour un titre de 32 px sur un téléphone de 375 px et de 48 px sur un ordinateur de bureau de 1440 px, la pente est de 16 ÷ 1065 = 1,5023 px par 100 px, et l’expression est clamp(2rem, 1.6479rem + 1.5023vw, 3rem). Sur une tablette de 800 px, le titre mesure 38,38 px.
Accessibilité
Les WCAG demandent que le texte puisse être agrandi à 200 %. Comme une partie d’une taille fluide dépend de la fenêtre d’affichage, des pentes très fortes peuvent empêcher le zoom d’agrandir suffisamment le texte ; limitez la plus grande taille à environ 2,5 fois la plus petite et utilisez le générateur d’échelle typographique pour choisir des étapes cohérentes.
Comment l'utiliser
- Saisissez les tailles minimale et maximale en px.
- Saisissez les largeurs de viewport auxquelles elles doivent s’appliquer.
- Copiez la valeur clamp() et vérifiez les tailles dans le tableau.
Confidentialité et limitations
Calculé dans votre navigateur.
Outils associés
Questions fréquentes
Pourquoi ne pas utiliser simplement vw ?
Une taille exprimée uniquement en vw ignore le réglage de taille de police du lecteur et peut devenir minuscule sur les téléphones ou énorme sur les écrans larges. La partie en rem et les limites de clamp() corrigent ces deux problèmes.
clamp() fonctionne-t-il partout ?
Oui : tous les navigateurs actuels prennent en charge clamp() depuis 2020.
La taille peut-elle diminuer sur les écrans plus larges ?
Oui : saisissez une taille plus grande pour la largeur minimale et l’expression soustraira la partie en vw à la place.
Outil gratuit · dans votre navigateur exécutions · aucun compte requis