Typographie fluide CSS : variables clamp() pour chaque taille
Ce générateur de typographie fluide CSS transforme cinq nombres en un bloc de propriétés personnalisées, une par taille de police, écrites chacune sous forme de clamp() avec des unités rem et vw. Vous indiquez la plage de largeurs d'écran, la taille de base à chaque extrémité et un rapport d'échelle, et chaque palier, de --text-xs à --text-4xl, évolue en douceur avec l'écran, sans media queries. Rien n'est envoyé : le CSS est construit dans votre navigateur.
Utiliser le générateur de fluid typography pas à pas
Remplissez les cinq champs du haut. Viewport min. (320 par défaut) et Viewport max. (1200) sont les largeurs d'écran, en pixels, pour lesquelles le texte est le plus petit et le plus grand. Taille de base min. (16) et Taille de base max. (20) sont la taille du texte courant à ces deux largeurs. Le Rapport d'échelle (1,25) indique de combien chaque palier dépasse le précédent. Chaque champ comporte une case numérique et un curseur.
- Saisissez la plage de largeurs d'écran.
- Saisissez la taille de base pour les écrans étroits et larges.
- Choisissez le rapport d'échelle.
- Le cadre CSS se met à jour pendant la frappe : il n'y a pas de bouton d'envoi. Quand le résultat vous convient, appuyez sur Copier le CSS et collez le bloc :root dans votre feuille de style.
Un champ inutilisable affiche un message à la place : le viewport maximal doit être plus grand que le minimal, la taille de base maximale plus grande que la minimale, le rapport au moins égal à 1 et chaque nombre supérieur à 0. Utilisez un palier partout où vous fixez une taille, par exemple h1 { font-size: var(--text-3xl); }
Aperçu à n'importe quelle largeur
Sous Aperçu, faites glisser Largeur de l'aperçu entre le viewport minimal et le maximal. Chaque palier s'affiche sous la forme de la ligne d'exemple « Un texte qui s'adapte en douceur », à la taille qu'il prend à cette largeur, avec le nom de sa variable et sa taille en pixels, le plus grand palier en haut.
Vous jugez ainsi l'écart entre le texte courant et les titres sur un petit téléphone comme sur un grand écran, avant de copier quoi que ce soit.
Comment la taille de police clamp() est calculée
Pour chaque palier, l'outil calcule la taille à l'extrémité étroite (taille de base min. multipliée par le rapport élevé à la puissance du palier) et à l'extrémité large (taille de base max. multipliée par la même puissance). Il trace ensuite une droite entre les deux points : la pente est la variation de taille divisée par la variation de largeur, et l'ordonnée à l'origine est la taille minimale moins le viewport minimal multiplié par la pente. La pente devient la partie en vw, l'ordonnée la partie en rem, et les deux tailles extrêmes deviennent le minimum et le maximum de clamp(). Les valeurs sont arrondies à 4 décimales.
Avec les valeurs par défaut, les paliers donnent à 320, 760 et 1200 px :
- --text-sm : 12,8 / 14,4 / 16 px
- --text-base : 16 / 18 / 20 px
- --text-lg : 20 / 22,5 / 25 px
- --text-xl : 25 / 28,13 / 31,25 px
Pourquoi rem et vw plutôt que px
Une taille écrite seulement en vw ignore la taille de police choisie par le visiteur dans son navigateur et ne grandit pas au zoom. Comme chaque nombre est ici réparti entre une partie en rem et une partie en vw, le texte suit toujours la taille de base de l'utilisateur et reste zoomable, ce qui le garde lisible pour les personnes qui ont besoin de caractères plus grands. L'outil ne produit jamais de px.
Si votre site définit html { font-size: 62.5% } ou une racine autre que 16 px, ouvrez Avancé et modifiez Taille de police racine pour que 1rem corresponde.
Choisir viewports, tailles de base et rapport d'échelle
La plage par défaut, de 320 à 1200, va du petit téléphone à l'ordinateur portable. Choisissez comme maximum la plus grande largeur à partir de laquelle le texte doit cesser de grandir, car au-delà il reste à sa taille maximale. Pour le texte courant, le couple 16 px et 20 px est courant. Le rapport donne son caractère à l'échelle :
- 1,2 (tierce mineure) : paliers doux et proches
- 1,25 (tierce majeure) : équilibré, la valeur par défaut
- 1,333 (quarte juste) : contraste net
- 1,5 (quinte juste) : titres marqués
- 1,618 (nombre d'or) : sauts très importants
Avec un rapport de 1, tous les paliers ont la même taille. Le rapport est un nombre unique pour les deux extrémités : l'échelle à 320 px et à 1200 px a donc les mêmes proportions, seule la taille de base change.
Dans Avancé, Préfixe des variables (--text par défaut) renomme toutes les propriétés. Noms des paliers alterne entre sm, lg, xl (--text-sm, --text-base, --text-lg, etc.) et -1, 1, 2 (--text--1, --text-0, --text-1, etc.). Paliers plus petits (de 0 à 4, 2 par défaut) et Paliers plus grands (de 0 à 8, 5 par défaut) fixent le nombre de tailles sous et au-dessus de la base.
Ce que cet outil ne fait pas
Il ne produit que l'échelle de tailles. Il n'y a ni export Tailwind ou autre, ni réglage par palier, ni rapport distinct pour l'extrémité étroite et la large, ni sortie en px.
Questions fréquentes
Qu'est-ce qu'une fluid type scale ?
Une fluid type scale est un ensemble de tailles de police qui grandissent en douceur avec la largeur de l'écran au lieu de sauter aux points de rupture. Chaque palier, comme petit, base, grand et très grand, reçoit une taille minimale pour les écrans étroits et une taille maximale pour les larges, et la taille intermédiaire suit une droite. Le générateur écrit chaque palier sous forme de propriété personnalisée CSS réutilisable sur tout un site.
Comment utiliser clamp() pour la taille d'un texte ?
clamp(min, préférée, max) prend trois valeurs. Le navigateur utilise la valeur préférée, sans jamais descendre sous le minimum ni dépasser le maximum. Pour du texte, la valeur préférée est une quantité en rem plus une quantité en vw, par exemple clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem). Placez-la dans une propriété personnalisée, puis écrivez font-size: var(--text-base) partout où vous en avez besoin.
Comment rendre une taille de police adaptative en CSS ?
Déclarez les tailles une fois sous forme de variables clamp() et le texte se redimensionne en continu quand la fenêtre change, sans media queries. Réglez « Viewport min. » et « Viewport max. » sur les largeurs où vous voulez la plus petite et la plus grande taille, renseignez « Taille de base min. » et « Taille de base max. », puis copiez le CSS. Sous le viewport minimal, le texte reste à sa plus petite taille, et au-dessus du maximal à sa plus grande.
Pourquoi ma taille de police clamp() ne fonctionne-t-elle pas ?
Les causes habituelles sont une unité manquante sur une valeur, l'absence d'espaces autour du signe plus dans clamp(), un minimum supérieur au maximum, ou une valeur préférée écrite en vw seul, qui ignore le réglage de taille de police de l'utilisateur. Les lignes générées évitent ces quatre cas : chaque valeur porte une unité, le signe plus est entouré d'espaces et le minimum est toujours inférieur au maximum.
Fonctionne-t-il comme le Utopia fluid type scale calculator ?
Il repose sur la même idée : les tailles sont interpolées linéairement entre un viewport étroit et un viewport large, et chaque palier est un multiple de la taille de base selon le rapport. Les différences : un seul rapport d'échelle pour les deux extrémités, aucun réglage par palier, et uniquement des propriétés personnalisées CSS, sans export Tailwind ni autre. Choisissez-le quand vous voulez rapidement le bloc :root.
Tierce majeure ou quarte juste : quel rapport d'échelle choisir ?
La tierce majeure (1,25) est un bon choix par défaut pour les pages riches en texte, car les paliers sont assez proches pour que les titres n'écrasent pas le texte. La quarte juste (1,333) donne plus de contraste entre les paliers et convient aux pages commerciales et aux grands titres. La tierce mineure (1,2) est plus douce encore. Saisissez le rapport dans « Rapport d'échelle » et vérifiez l'« Aperçu » avant de copier.
Peut-on utiliser clamp() dans tous les navigateurs ?
clamp() fonctionne dans toutes les versions actuelles de Chrome, Edge, Firefox et Safari, et ce depuis 2020. Les navigateurs très anciens ignorent une déclaration qu'ils ne comprennent pas : si vous devez en prendre un en charge, placez une ligne font-size fixe avant la ligne clamp() comme solution de repli.
Ce que je saisis est-il envoyé à un serveur ?
Non. Votre navigateur transforme les nombres en CSS sur la page, et rien n'est envoyé ni enregistré. Il n'y a ni compte ni inscription.
Recommandés
-
Carnet de wireframes UX/UIEsquissez la hiérarchie de vos titres et du texte courant avant de régler l’échelle.
-
Écran portable KYY 15,6"Vérifiez vos tailles clamp() sur un second écran, en largeur mobile et en largeur bureau.
-
Support pour portable Rain Design mStandPlacez votre portable à hauteur des yeux pour les longues séances sur le CSS de votre design system.
Aide à garder les outils gratuits. ✨
Images non contractuelles. En tant que Partenaire Amazon, je réalise un bénéfice sur les achats remplissant les conditions requises.
