Générateur d'échelle typographique Générer une échelle typographique modulaire avec une taille de base, un ratio et des unités personnalisables.
Générateur d'échelle typographique
Générer une échelle typographique modulaire avec une taille de base, un ratio et des unités personnalisables.
Définir la taille de base et le rapport
Choisissez la taille de police de base et un rapport mathématique d'échelle pour la progression.
Configurer la sortie
Sélectionnez l'unité (px, rem, em), la hauteur de ligne et le nombre d'étapes d'échelle.
Copier les CSS
Prévisualisez l'échelle de type et copiez les propriétés personnalisées CSS.
What Is Générateur d'échelle typographique?
Le générateur d'échelle de typographie crée un ensemble harmonieux de tailles de police basé sur une ratio mathématique, également connue sous le nom d'échelle modulaire. Une typographie cohérente est fondamentale pour une bonne conception, et les échelles modulaires fournissent des tailles de police qui se rapportent naturellement les unes aux autres par proportion mathématique. Cet outil propose huit ratios d'échelle classiques : la seconde mineure (1,067), la seconde majeure (1,125), la tierce mineure (1,200), la tierce majeure (1,250), la quarte parfaite (1,333), la quarte augmentée (1,414), la quinte parfaite (1,500) et le rapport d'or (1,618). À partir d'une taille de base, chaque étape est multipliée par le ratio choisi. La sortie comprend des propriétés CSS personnalisées nommées (--font-size-xs à --font-size-5xl) dans l'unité de votre choix, ainsi qu'un aperçu visuel montrant chaque taille avec du texte d'exemple.
Why Use Générateur d'échelle typographique?
-
Huit rapports d'échelle mathématiques classiques issus de la théorie musicale et du design
-
Sortie en unités px, rem ou em pour répondre à différents besoins de projet
-
Taille de base, hauteur de ligne et nombre d'étapes ajustables
-
Sortie des propriétés personnalisées CSS pour une intégration facile
Common Use Cases
Typographie du système de design
Établir une échelle de type cohérente comme fondement d'un système de design.
Configuration d'un nouveau projet
Générer des tailles de police harmonieuses lors du lancement de nouveaux projets web.
Mise en page de blog et d'articles
Créer une hiérarchie typographique lisible pour le contenu long-forme.
Typographie responsive
Générer des valeurs d'échelle à utiliser sur différents points de rupture responsives.
Technical Guide
Une échelle de type modulaire utilise une ratio mathématique pour générer une série de valeurs proportionnelles. En partant d'une taille de base (typiquement 16px pour le web), chaque étape est calculée en multipliant par la ratio. Pour une échelle de tierce majeure (1,25) avec une taille de base de 16px : 12,8px, 16px, 20px, 25px, 31,25px, 39,06px. La ratio détermine le contraste entre les tailles - des ratios plus petits (1,067, 1,125) créent des différences subtiles idéales pour le texte du corps, tandis que des ratios plus grands (1,5, 1,618) créent des différences dramatiques adaptées à la typographie d'affichage. Les ratios populaires proviennent de la théorie musicale (tierce mineure, quarte parfaite, quinte parfaite) et des mathématiques (rapport d'or). Pour la mise en œuvre web, définissez les tailles comme des propriétés CSS personnalisées et utilisez-les tout au long de la feuille de style. Les unités rem sont préférées pour l'accessibilité car elles respectent les préférences de taille de police de l'utilisateur. La hauteur de ligne devrait généralement diminuer à mesure que la taille de police augmente - 1,5 pour le texte du corps et 1,1-1,2 pour les titres importants.
Tips & Best Practices
-
1Utilisez Major Third (1,25) ou Perfect Fourth (1,333) pour la plupart des projets web
-
2Utilisez les unités rem pour une typographie accessible et respectueuse des préférences de l'utilisateur
-
3Diminuez la hauteur de ligne pour les titres plus grands (1,1-1,2) et augmentez-la pour le corps (1,5-1,7)
-
4Limitez-vous à 5-7 étapes d'échelle pour une hiérarchie typographique gérable
Related Tools
Générateur d'échelle d'espacement
Générer un système d'échelle d'espacement cohérent avec une unité de base personnalisable et des multiplicateurs.
🎨 CSS & Design
Aperçu des polices Google
Prévisualisez les polices Google avec un texte, une taille, un poids et un espacement entre lettres personnalisables.
🎨 CSS & Design
Générateur de Variables CSS
Générer des propriétés personnalisées CSS (variables) pour les couleurs, les espacements et la typographie.
🎨 CSS & Design
Générateur de rayon de bordure CSS
Générer des valeurs de rayon de bordure CSS avec un contrôle par coin et une prévisualisation visuelle.
🎨 CSS & DesignFrequently Asked Questions
Q Qu'est-ce qu'une échelle modulaire ?
Q Quel rapport devrais-je choisir ?
Q Devrais-je utiliser px ou rem ?
Q Combien d'étapes d'échelle ai-je besoin ?
Q Puis-je utiliser différentes échelles pour les appareils mobiles et les ordinateurs de bureau ?
About This Tool
Générateur d'échelle typographique is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.