Générateur d’échelle typographique
Type Scale Generator
Construit une échelle modulaire de tailles de texte et d’espacements à partir d’une taille de base et d’un rapport, exportable en CSS ou en jetons.
Construit une échelle typographique modulaire à partir d’une taille de base et d’un rapport, et montre chaque pas à sa taille réelle avec, à côté, les nombres qui comptent : rem, interlignage, approche et — celui qui décide si une taille est utilisable pour du texte suivi — combien de caractères tiennent sur une ligne à la largeur de votre colonne. Il dérive une échelle d’espacement du même rapport, calée sur une grille de 4 px.
Échelle
Rapport : 1.25
Des espacements tirés du même rapport
- space-14px
- space-24px
- space-38px
- space-48px
- space-58px
- space-612px
- space-716px
- space-820px
Calé sur une grille de 4px — la grille que presque tous les systèmes de design ont déjà, et un écart de 13px à côté d’un de 12px n’est que du bruit.
Aperçu
Portez ce vieux whisky au juge blond qui fume
Portez ce vieux whisky au juge blond qui fume
Portez ce vieux whisky au juge blond qui fume
Portez ce vieux whisky au juge blond qui fume
Portez ce vieux whisky au juge blond qui fume
Portez ce vieux whisky au juge blond qui fume
Portez ce vieux whisky au juge blond qui fume
Portez ce vieux whisky au juge blond qui fume
Portez ce vieux whisky au juge blond qui fume
Le vert marque 45 à 75 caractères par ligne — la plage de Bringhurst pour le texte latin, dont le hangul, écrit avec des espaces, est plus proche que le CJK pleine chasse.
Export
Vous voulez qu’une de ces tailles suive la fenêtre au lieu d’avancer par paliers ? Le calculateur de taille fluide transforme deux d’entre elles en un seul clamp().
Comment s’en servir
Réglez la taille de base
La taille du texte courant, presque toujours 16 px. Tout le reste est ce nombre multiplié ou divisé par le rapport, donc bien le fixer d’abord évite de rechoisir le rapport ensuite.
Choisissez le rapport — c’est la décision
Une seconde majeure (1,125) est le défaut sûr pour une interface : huit pas restent dans une plage sensée. Une quarte juste (1,333) est éditoriale — trois pas au-dessus de 16 px font déjà 38 px. Le nombre d’or est célèbre et trop raide pour du texte d’interface. Chaque préréglage dit à quoi il sert ; choisissez par la plage dont vous avez besoin, pas par le nom.
Décidez du nombre de pas, et de l’arrondi
Les pas vers le bas servent aux légendes et aux étiquettes ; ceux vers le haut aux titres. « Exact » garde la géométrie et vous donne des pixels fractionnaires ; l’arrondi au pixel ou aux deux pixels donne des nombres qu’une personne retient et casse légèrement le rapport. L’arrondi est le choix habituel, et la valeur exacte reste affichée à côté de chaque valeur arrondie.
Réglez la largeur de colonne et lisez le nombre de caractères
Tapez la largeur de la colonne où ce texte se trouve réellement. Le chiffre le plus à droite de chaque ligne est le nombre de caractères par ligne à cette largeur, et il passe au vert entre 45 et 75 — la plage qui a de vraies données derrière elle pour du texte suivi. Une taille qui se lit bien isolément et qui donne 110 caractères par ligne est la mauvaise taille pour du texte courant.
Exportez les jetons
Variables CSS, bloc de thème Tailwind, SCSS ou JSON. L’échelle d’espacement part avec, donc un seul collage couvre les deux.
Questions fréquentes
L’aperçu montre-t-il ma vraie police ?
Non : il est rendu dans la police de cette page. Les tailles, les interlignages et les approches sont réels, mais un autre caractère a une autre hauteur d’x, et c’est la hauteur d’x qui décide réellement de la taille apparente de 16 px. Prenez l’aperçu comme une vérification des proportions, et confirmez la taille de base dans votre propre produit.
Dois-je utiliser toute l’échelle ?
Non, et générer onze pas n’est pas une raison d’en utiliser onze. La plupart des interfaces ont besoin de quatre ou cinq tailles. Les pas supplémentaires existent pour que vous voyiez où va le rapport, et pour qu’une taille rarement nécessaire ait une valeur définie plutôt que d’être inventée sur le moment.
D’où viennent les interlignages et les approches ?
D’une règle, pas de votre caractère : l’interlignage baisse quand la taille grandit, l’approche se resserre sur les grands pas et se desserre un peu sur les petits. C’est le point de départ conventionnel, juste assez souvent pour être utile, mais un caractère condensé ou un caractère coréen aux blocs syllabiques hauts demandera d’autres nombres. Ajustez après avoir regardé.
Pourquoi l’échelle d’espacement est-elle calée sur 4 px alors que l’échelle typographique ne l’est pas ?
Parce que l’œil les lit différemment. Un titre de 17 px à côté d’un de 18 px, c’est une hiérarchie ; un écart de 13 px à côté d’un de 12 px, c’est du bruit, et c’est le genre de bruit qui survit à la relecture et se fait ensuite recopier. Presque tous les systèmes de design ont déjà une grille de 4 px, donc l’échelle d’espacement les y rejoint.
À alimenter depuis
Calculateur de taille fluide
Fluid Size Calculator
Calcule une expression clamp() qui fait varier une taille en douceur entre deux largeurs de fenêtre.
Association de polices
Font Pairing
Propose des couples de polices titre et texte tirés des piles système, prévisualisés avec votre propre texte, et vous rend le CSS.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Calculateur de taille fluide
Fluid Size Calculator
Calcule une expression clamp() qui fait varier une taille en douceur entre deux largeurs de fenêtre.
Extracteur de jetons CSS
CSS Token Extractor
Extrait couleurs, espacements, rayons et polices d’une feuille de style et propose un jeu de propriétés personnalisées.
Association de polices
Font Pairing
Propose des couples de polices titre et texte tirés des piles système, prévisualisés avec votre propre texte, et vous rend le CSS.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Vérificateur de contraste
Contrast Checker
Note un couple texte et fond selon WCAG 2 et APCA et propose la couleur conforme la plus proche.