Générateur d'échelle typographique
Générez une échelle typographique modulaire à partir d'une taille de base et d'un ratio, avec un ratio plus petit pour mobile. Prévisualisez avec votre police et exportez en CSS, SCSS ou Tailwind.
Chargement de Générateur d'échelle typographique…
Vos fichiers ne quittent jamais votre appareil
Comment utiliser Générateur d'échelle typographique
- 1
Ouvrez Générateur d'échelle typographique sur cette page. Il se charge directement dans votre navigateur.
- 2
Ajoutez votre fichier, texte ou valeurs et ajustez les réglages.
- 3
Copiez ou téléchargez le résultat. Rien n'est envoyé ni stocké.
À propos de cet outil
Une échelle typographique est un ensemble de tailles de police qui augmentent selon le même ratio, de sorte que titres, texte courant et légendes paraissent liés plutôt qu'aléatoires. Ce générateur d'échelle typographique calcule l'échelle à partir d'une taille de base et d'un ratio, la prévisualise avec du vrai texte dans la police choisie et exporte les tailles sous forme de code.
Comment créer une échelle typographique
- Définissez la taille de base, généralement 16px pour le texte courant.
- Choisissez un ratio, de la seconde mineure (1.067) à la quinte juste (1.5), le nombre d'or (1.618) et au-delà.
- Définissez le nombre de niveaux vers le haut (titres) et de niveaux vers le bas (petit texte).
- Définissez un ratio mobile plus petit pour que les titres n'écrasent pas les petits écrans.
- Choisissez une police et tapez un texte d'exemple à prévisualiser, puis copiez le code CSS, SCSS ou Tailwind.
Choisir un ratio
| Ratio | Nom | Rendu |
|---|---|---|
| 1.125 | Seconde majeure | Subtil, adapté aux applications denses |
| 1.2 | Tierce mineure | Équilibré, courant pour les sites web |
| 1.25 | Tierce majeure | Hiérarchie claire pour les blogs |
| 1.333 | Quarte juste | Titres marqués |
| 1.5 à 1.618 | Quinte juste, nombre d'or | Spectaculaire, pour les landing pages |
Exemple avec 16px et 1.25
12.8px, 16px, 20px, 25px, 31.25px, 39.06px, 48.83px. Chaque taille est la précédente multipliée par 1.25.
Conseils
- Utilisez un ratio plus doux sur mobile, par exemple 1.2 sur téléphone et 1.333 sur ordinateur.
- Arrondissez les tailles au pixel ou au demi-pixel dans vos design tokens finaux.
- Associez les tailles à une hauteur de ligne : environ 1.5 pour le texte courant et entre 1.1 et 1.25 pour les grands titres.
- Utilisez des unités rem en CSS pour que le texte respecte le réglage de police du navigateur de l'utilisateur.
Complétez votre design system avec une grille du générateur de système de grille et des couleurs du générateur de palette de couleurs.
Questions fréquentes
Qu'est-ce qu'une échelle typographique modulaire ?
Un ensemble de tailles de police où chaque taille est la précédente multipliée par le même ratio, ce qui donne un rythme visuel cohérent.
Quelle taille de police de base utiliser ?
16px est la valeur par défaut des navigateurs et une bonne base pour le texte courant sur la plupart des sites.
Quel ratio est le meilleur ?
Il n'y en a pas un seul. 1.2 ou 1.25 conviennent à la plupart des sites ; 1.125 fonctionne pour les interfaces denses ; 1.333 et plus donnent des titres spectaculaires.
Pourquoi utiliser un ratio différent sur mobile ?
Les grands ratios rendent les titres énormes sur les petits écrans. Un ratio mobile plus petit conserve la hiérarchie tout en tenant dans l'écran.
Puis-je exporter vers Tailwind ?
Oui. Choisissez le format Tailwind pour obtenir une configuration fontSize avec votre échelle.
Les tailles de police doivent-elles être en px ou en rem ?
Le rem est recommandé en CSS, car il s'adapte aux réglages du navigateur de l'utilisateur. L'outil peut vous donner des valeurs à utiliser en rem.