Générateur d'Échelle Typographique — Tailles de Police Harmonieuses
Choisir les tailles de police au hasard produit une typographie incohérente. Une échelle typographique modulaire génère des tailles harmonieuses basées sur un ratio mathématique — comme la suite de Fibonacci pour la typographie. Notre générateur crée votre échelle et exporte les variables CSS prêtes à l'emploi.
Qu'est-ce qu'une échelle typographique ?
Une échelle typographique est une série de tailles de police générées par multiplication répétée d'un ratio. Le ratio 1,250 (Major Third) donne : 12, 15, 18.75, 23.4, 29.3 px... Ces tailles sonnent harmonieusement ensemble car elles partagent une relation mathématique.
Comment utiliser notre Générateur
- Choisissez votre taille de base (généralement 16px, la valeur par défaut des navigateurs).
- Sélectionnez un ratio : Minor Third (1,2), Major Third (1,25), Perfect Fourth (1,333), Golden Ratio (1,618).
- Prévisualisez l'échelle avec du texte exemple et ajustez jusqu'à satisfaction.
- Exportez en variables CSS, tokens de design ou Tailwind config.
Pourquoi utiliser une échelle modulaire ?
- Cohérence visuelle : Toutes les tailles partagent une relation mathématique — l'œil perçoit l'harmonie.
- Décisions rapides : Choisissez dans une liste fixe plutôt que de débattre de 18px vs 19px.
- Design system : Base parfaite pour les tokens de typographie de votre système de design.
- Responsive : Changez juste le ratio ou la base pour adapter toute l'échelle.
Prêt à l'essayer ? Utilisez notre Générateur d'Échelle Typographique gratuitement — sans inscription, fonctionne dans votre navigateur.
Questions fréquentes
Quel ratio typographique utiliser ?
Major Third (1,25) est adapté aux interfaces avec beaucoup de niveaux hiérarchiques. Perfect Fourth (1,333) donne un contraste plus marqué. Le Golden Ratio (1,618) est dramatique — parfait pour les sites éditoriaux.
Quelle taille de base choisir ?
16px est la valeur par défaut des navigateurs et le standard recommandé pour la lisibilité. Pour le mobile, 16px évite le zoom automatique d'iOS sur les champs de formulaire.
Comment intégrer l'échelle dans Tailwind CSS ?
Notre générateur exporte directement la configuration fontSize compatible Tailwind. Collez le résultat dans votre tailwind.config.js pour remplacer l'échelle par défaut.