Type Scale Generator
Générez des échelles typographiques modulaires avec variables CSS et config Tailwind.
① Définissez la taille de base et le ratio ② Cliquez Générer ③ Copiez les variables CSS ou tokens
Qu'est-ce qu'une échelle typographique modulaire ?
Une échelle typographique modulaire est une séquence de tailles de police où chaque pas est le précédent multiplié par un ratio fixe. Les ratios courants incluent la Quarte Parfaite (1.333), la Tierce Majeure (1.250) et le Nombre d'Or (1.618). Utiliser une échelle garantit l'harmonie visuelle entre titres, corps de texte et légendes.
Questions fréquentes
Une échelle typographique modulaire est un ensemble de tailles de police dérivées en multipliant une taille de base par un ratio constant. Au lieu de choisir des tailles arbitrairement, vous obtenez des valeurs mathématiquement liées qui créent une harmonie visuelle.
Chaque pas n relatif à la base utilise la formule : taille = base × ratio^n. Pour n=0 la taille de base, n=1 base × ratio, pas négatifs base × ratio^(-1).
Minor Second et Major Second pour des échelles subtiles. Minor et Major Third pour un contraste modéré. Perfect Fourth (1.333) est un choix classique. Perfect Fifth et Golden Ratio pour une typographie display dramatique.
Copiez le CSS Variables et collez-le dans :root { }. Puis utilisez les variables : font-size: var(--text-xl).
Copiez le Config Tailwind et collez-le dans theme.fontSize dans tailwind.config.js. Utilisez des classes comme text-xl avec vos valeurs personnalisées.
rem pour les tailles de police — respecte les préférences du navigateur. em pour les tailles relatives au composant parent. px uniquement pour les éléments décoratifs fixes.
Une hiérarchie visuelle claire guide les lecteurs. WCAG 1.4.4 exige que le texte soit redimensionnable à 200% — les échelles rem le garantissent.