Typographie fluide
Des tailles qui suivent l'écran
Réglages
La taille reste minimale sous la largeur minimale, maximale au-delà de la largeur maximale, et varie en douceur entre les deux.
CSS généré
font-size: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
Aperçu
Taille obtenue : 18,09 px
Portez ce vieux whisky au juge blond qui fume
Échelle typographique
| Étape | Petit écran | Grand écran | À 800 px |
|---|---|---|---|
| --step-5 | 39,81 px | 61,04 px | Aa 50,89 |
| --step-4 | 33,18 px | 48,83 px | Aa 41,34 |
| --step-3 | 27,65 px | 39,06 px | Aa 33,6 |
| --step-2 | 23,04 px | 31,25 px | Aa 27,32 |
| --step-1 | 19,2 px | 25 px | Aa 22,23 |
| --step-0 | 16 px | 20 px | Aa 18,09 |
| --step--1 | 13,33 px | 16 px | Aa 14,72 |
| --step--2 | 11,11 px | 12,8 px | Aa 11,99 |
:root {
--step--2: clamp(0.6944rem, 0.6577rem + 0.1836vw, 0.8rem);
--step--1: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem);
--step-0: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
--step-1: clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem);
--step-2: clamp(1.44rem, 1.2615rem + 0.8924vw, 1.9531rem);
--step-3: clamp(1.728rem, 1.4799rem + 1.2407vw, 2.4414rem);
--step-4: clamp(2.0736rem, 1.7334rem + 1.7011vw, 3.0518rem);
--step-5: clamp(2.4883rem, 2.027rem + 2.3067vw, 3.8147rem);
}Convertisseur px / rem / em
À propos de l'outil
Cet outil calcule une taille de police fluide avec la fonction CSS clamp() : le texte garde une taille minimale sur petit écran, une taille maximale sur grand écran, et varie de façon linéaire entre les deux. Vous indiquez les deux tailles et les deux largeurs d’écran en pixels, ainsi que la taille de police racine, et obtenez une déclaration font-size exprimée en rem et en vw.
Un curseur simule la largeur d’écran pour voir la taille obtenue. L’outil génère aussi une échelle typographique : à partir de ratios classiques, de la seconde mineure au nombre d’or, distincts pour petit et grand écran, il produit des variables --step-N pour vos titres et textes. Un convertisseur px, rem et em complète l’ensemble.
Comment l'utiliser
- Renseignez la Taille minimale (px), la Taille maximale (px), les largeurs d’écran minimale et maximale et la Taille de police racine (px).
- Déplacez le curseur de Largeur d’écran simulée pour vérifier la Taille obtenue, puis copiez le CSS généré.
- Dans Échelle typographique, choisissez le Ratio sur petit écran, le Ratio sur grand écran et le nombre d’étapes sous et au-dessus de la base.
- Cliquez sur Copier les variables pour récupérer les variables --step-N.
- Utilisez le Convertisseur px / rem / em pour passer d’une unité à l’autre.
Questions fréquentes
Comment la valeur clamp() est-elle calculée ?
L’outil trace une droite entre la taille minimale à la largeur minimale et la taille maximale à la largeur maximale. Il en déduit une valeur en rem plus un pourcentage de vw, encadrée par les deux tailles converties en rem selon votre taille racine.
Pourquoi le résultat est-il en rem plutôt qu’en px ?
Les bornes en rem suivent la taille de police choisie par l’utilisateur dans son navigateur, ce qui respecte ses préférences d’accessibilité. La partie en vw assure la variation avec la largeur de l’écran.
Une taille peut-elle diminuer sur grand écran ?
Oui. Si la taille maximale est plus petite que la taille minimale, la pente devient négative et l’outil remet les bornes dans le bon ordre, car clamp() exige un minimum inférieur au maximum.
Qu’est-ce qu’une échelle typographique fluide ?
Chaque étape multiplie la taille de base par un ratio, par exemple 1,25. En prenant un ratio plus faible sur petit écran, les titres restent proportionnés sur mobile et gagnent en contraste sur grand écran, chaque étape devenant sa propre valeur clamp().