Générateur d'échelle typographique

Qu'est-ce que Générateur d'échelle typographique ?

Le générateur d'échelle typographique transforme une taille de base et un ratio modulaire en une échelle typographique complète et cohérente mathématiquement, avec autant de paliers de titres grands et de paliers de légende petits que nécessaire. Au-delà des tailles de police, il déduit un interligne et un interlettrage assortis pour chaque palier, plus une expression fluide clamp() facultative qui interpole entre un viewport mobile et un viewport de bureau en utilisant un ratio mobile distinct. Les designers et les développeurs front-end l'utilisent pour créer les tokens typographiques d'un design system, garder des tailles cohérentes et coller du CSS, Sass, Tailwind ou JSON prêt à l'emploi. Saisissez n'importe quel ratio personnalisé ou choisissez-en un classique, définissez la taille de base et l'unité (px ou rem), prévisualisez dans votre propre font-family, puis copiez le format voulu.

Comment utiliser Générateur d'échelle typographique

1. Saisissez n'importe quel ratio personnalisé dans le champ ratio, ou choisissez-en un classique comme quarte juste (1.333) dans le menu déroulant des préréglages, dans les réglages.
2. Définissez la taille de base ; elle devient la taille du corps de texte et l'ancre de l'échelle.
3. Dans les réglages, choisissez combien de paliers plus grands et plus petits générer ; les paliers plus petits sont sous la base pour les légendes et les mentions.
4. Ajustez l'interligne de base et l'interligne serré ainsi que l'interlettrage aux grandes tailles, et saisissez une font-family pour prévisualiser l'échelle dans votre propre police.
5. Pour une typo responsive, définissez les largeurs de viewport minimale et maximale et un ratio mobile pour construire une échelle fluide clamp().
6. Basculez le format de sortie entre variables CSS, clamp() fluide, Sass, config Tailwind et JSON, puis copiez le code ou la taille d'un palier précis.

Exemples

ratio 1.333, base 16px, 5 vers le haut / 1 vers le bas

--font-size-2xl: 37.897px; --line-height-2xl: 1.27; --letter-spacing-2xl: -0.017em;

base 16px, ratio 1.333, ratio mobile 1.2, 320-1240px

--font-size-2xl: clamp(27.648px, 24.083px + 1.114vw, 37.897px);

n'importe quelle échelle, export Tailwind

fontSize: { base: ['16px', { lineHeight: '1.5', letterSpacing: '0em' }] }

Questions fréquentes

Puis-je utiliser un ratio personnalisé, pas seulement les préréglages ?

Oui. Saisissez n'importe quel nombre dans le champ ratio, comme 1.2, 1.5, 1.618 ou une valeur non standard telle que 1.45. Le menu déroulant des préréglages dans les réglages n'est qu'un raccourci qui remplit le même champ, et choisir une valeur qui ne correspond à aucun préréglage affiche simplement Personnalisé.

Comment fonctionnent les paliers plus petits (négatifs) ?

L'échelle est ancrée à la taille de base (palier 0). Les paliers plus grands multiplient la base par le ratio, tandis que les plus petits la divisent, produisant des tailles de légende et de mention sous la base comme sm et xs. Définissez le nombre de paliers plus grands et plus petits dans les réglages.

Comment sont calculés l'interligne et l'interlettrage ?

L'interligne passe de votre valeur de base à la taille du corps vers une valeur plus serrée quand le texte grandit, et l'interlettrage passe de zéro à la base vers votre valeur pour les grandes tailles, si bien que les grands textes d'affichage sont un peu plus serrés et les petits un peu plus espacés. Les deux courbes s'ajustent dans les réglages.

Qu'est-ce que l'échelle fluide clamp() ?

Elle construit un font-size: clamp() pour chaque palier qui grandit en douceur entre une largeur de viewport minimale et maximale, en utilisant votre ratio principal à la largeur maximale et un ratio mobile distinct à la largeur minimale. Choisissez le format de sortie CSS clamp() pour l'exporter.

Mes données sont-elles envoyées à un serveur ?

Non. Toute l'échelle, y compris les tailles, l'interligne, l'interlettrage et les valeurs fluides clamp(), est calculée localement dans votre navigateur avec une arithmétique simple. Rien n'est envoyé, de sorte que l'outil fonctionne hors ligne et garde vos réglages privés.