Générateur d'échelle typographique avec CSS clamp() fluide | We.Inc
Générez une échelle typographique modulaire à partir d'une taille de base et d'un ratio, avec des valeurs clamp() fluides pour chaque niveau, un aperçu en direct et des variables CSS ou Tailwind à copier.
Générateur d'échelle typographique
Une échelle typographique multiplie une taille de police de base par un même ratio, encore et encore, pour que chaque taille de titre soit liée au texte courant. Choisissez une base et un ratio pour les téléphones, et d'autres pour les ordinateurs ; ce générateur transforme chaque niveau en valeur clamp() en rem et vw qui grandit progressivement entre les deux largeurs.
Ratios courants et usages adaptés
Ratio
Valeur
Effet
Seconde mineure
Applications denses, tableaux de bord
Seconde majeure
Applications denses, tableaux de bord
Tierce mineure
Articles, pages marketing
Tierce majeure
Articles, pages marketing
Quarte juste
Articles, pages marketing
Quarte augmentée
Affiches, landing pages audacieuses
Quinte juste
Affiches, landing pages audacieuses
Nombre d'or
Affiches, landing pages audacieuses
La plupart des outils d'échelle typographique donnent un seul jeu de tailles fixes. Celui-ci en donne deux, une échelle pour petits écrans et une pour grands écrans, et les relie avec clamp() : vous livrez ainsi une seule règle par niveau au lieu d'une pile de media queries.
Pourquoi deux ratios
Un ratio qui paraît généreux sur un écran de 1440 pixels fait passer les titres sur quatre lignes sur un téléphone. Un ratio plus serré sur petits écrans, comme 1.2, et plus large sur grands écrans, comme 1.25 ou 1.333, garde des titres percutants sur ordinateur et lisibles sur mobile.
Les niveaux inférieurs à zéro fonctionnent de la même manière, à l'inverse : la base est divisée par le ratio, ce qui donne des tailles de légendes et de petits caractères qui restent proportionnées.
Comment les valeurs clamp() sont calculées
Pour chaque niveau, l'outil connaît la taille à la petite largeur et à la grande largeur. Il trace une droite entre ces deux points : la pente devient la partie vw et le décalage de départ devient la partie rem de la valeur préférée.
clamp(min, preferred, max) maintient ensuite la taille au minimum sous la petite largeur et au maximum au dessus de la grande largeur. Inclure des rem dans la valeur préférée est important : une taille uniquement en vw ignore le zoom du navigateur, alors que la partie rem grandit toujours quand quelqu'un zoome.
MDN recommande, quand clamp() définit une taille de texte, que le maximum soit au moins le double du minimum, pour que le texte puisse atteindre un zoom de 200 pour cent, le niveau d'agrandissement de WCAG 1.4.4. Une plage fluide modeste n'y suffit pas à elle seule : testez donc vos plus grands niveaux avec le zoom du navigateur à 200 pour cent.
Définissez la taille de police racine (16, sauf si votre CSS modifie la taille de html) et les largeurs de viewport étroite et large.
Choisissez une taille de base et un ratio pour chaque extrémité. Des valeurs identiques donnent une échelle fixe ; des valeurs différentes, une échelle fluide.
Indiquez combien de niveaux au dessus et en dessous de la base il vous faut. La plupart des sites en utilisent quatre ou cinq au dessus et un ou deux en dessous.
Faites glisser le curseur de largeur de l'aperçu pour voir chaque niveau à n'importe quelle taille d'écran, puis copiez les variables CSS ou le bloc de thème Tailwind.
Commencez le texte courant entre 16 et 18 pixels ; plus petit, la lecture longue sur téléphone en pâtit.
Réduisez la hauteur de ligne à mesure que la taille augmente : environ 1.5 pour le texte courant et 1.1 à 1.2 pour les grands titres donne un bon équilibre.
Vous avez rarement besoin de plus de six niveaux. Si deux niveaux se ressemblent presque dans l'aperçu, supprimez-en un.
Nommez les variables par niveau, pas par élément (step-3 plutôt que h2), pour qu'un titre de carte puisse emprunter une taille de titre sans confusion.
Questions fréquentes
Quel est un bon ratio d'échelle typographique ?
Pour les sites riches en texte, 1.2 (tierce mineure) ou 1.25 (tierce majeure) sont des choix sûrs. 1.333 (quarte juste) convient aux pages marketing avec des titres courts et marqués. Les ratios de 1.5 ou plus créent de grands sauts qui fonctionnent pour des affiches, mais produisent vite des titres énormes.
Le nombre d'or convient-il à la typographie ?
À environ 1.618, il est très raide : cinq niveaux au dessus de 16px dépassent déjà 170px. Il peut convenir à une échelle d'affichage de deux ou trois niveaux, mais la plupart des interfaces se lisent mieux avec un ratio plus petit.
Pourquoi utiliser rem plus vw au lieu de vw seul ?
Un texte dimensionné uniquement en vw ne réagit pas au zoom du texte du navigateur, ce qui pénalise les personnes qui agrandissent le texte. La partie rem de la valeur préférée maintient le zoom fonctionnel, tandis que vw gère la croissance progressive entre les largeurs.
Puis-je utiliser le résultat avec Tailwind CSS ?
Oui. Tailwind v4 crée un utilitaire text-* à partir de chaque variable --text-* d'un bloc @theme : coller la sortie Tailwind vous donne donc des classes comme text-step-2 dans votre balisage.
Utiliser l'échelle dans votre CSS
Un exemple concret : base de 16px à 375px qui passe à 18px à 1280px, ratio de 1.2 qui passe à 1.25.
Les niveaux en custom properties
Chaque niveau est un clamp(). Appliquez-les aux éléments, ou à des classes utilitaires, avec une hauteur de ligne par niveau.
Résultat en direct
Les mêmes variables dans une petite page. Modifiez le code pour essayer d'autres valeurs ; le cadre est étroit, vous voyez donc l'extrémité petit écran.
Noms des ratios et valeurs exactes
Les noms musicaux viennent des rapports de fréquence des intervalles ; chaque valeur ici est la fraction exacte arrondie à trois décimales.
Ratios nommés
Nom
Fraction
Valeur
Cinq niveaux au dessus de 16px
Seconde mineure
Seconde majeure
Tierce mineure
Tierce majeure
Quarte juste
Quarte augmentée
Quinte juste
Nombre d'or
Construisez votre échelle
Définissez une taille de base et un ratio pour un petit écran et pour un écran large. Chaque niveau reçoit une valeur clamp() qui grandit progressivement entre les deux largeurs, avec un aperçu en direct et du CSS à copier.