Design / Typographie
Générateur d’échelle typographique (échelle modulaire pour CSS et Tailwind)
Générez une échelle typographique modulaire à partir d’une taille de police de base et d’un ratio comme 1.25 ou le nombre d’or, prévisualisez chaque niveau avec votre propre texte, puis copiez les tailles sous forme de propriétés CSS personnalisées ou de configuration Tailwind fontSize, en rem ou en px.
Générateur d’échelle typographique (échelle modulaire pour CSS et Tailwind): Chaque taille correspond à la taille de base multipliée par le ratio autant de fois que le nombre de niveaux : avec 16 px et une tierce majeure, soit 1.25, les niveaux supérieurs sont 20, 25, 31.25, 39.06 et 48.83 px, et les niveaux inférieurs 12.8 et 10.24 px. Les tailles sont indiquées en px et en rem et nommées comme les tailles de texte de Tailwind, de xs à 4xl. Fonctionne 100 % localement dans votre navigateur, sans aucun téléversement de fichier vers le serveur.
- Catégorie
- Outils développeur
- Exécutions
- Dans votre navigateur
- Coût
- Gratuit · sans inscription
- Disponibilité
- Prêt à l'emploi
Fonctionne entièrement dans votre navigateur
:root {
--step-5: 3.0518rem;
--step-4: 2.4414rem;
--step-3: 1.9531rem;
--step-2: 1.5625rem;
--step-1: 1.25rem;
--step-0: 1rem;
--step--1: 0.8rem;
--step--2: 0.64rem;
}Chaque étape correspond à celle du dessous multipliée par le ratio : avec une base de 16 px et un ratio de 1.25, les tailles supérieures sont de 20, 25 et 31.25 px, et les tailles inférieures de 12.8 et 10.24 px. Les petits ratios comme 1.125 conviennent aux interfaces denses ; les ratios plus élevés, comme 1.5, donnent davantage de contraste aux titres. Les valeurs en rem supposent une taille racine par défaut du navigateur de 16 px.
Origine des noms de ratios
Les noms viennent des intervalles musicaux : une quinte juste correspond à un ratio de fréquences de 3 : 2. Une échelle typographique basée sur 1,5 augmente donc dans la même proportion que des notes séparées par une quinte. L’échelle modulaire de Tim Brown a popularisé cette idée pour le Web.
Le nombre d’or, 1,618, produit des écarts très importants ; il est expliqué dans le calculateur du nombre d’or.
Arrondi
Les navigateurs affichent les tailles en pixels fractionnaires : 31,25 px convient donc parfaitement. Si un système de design nécessite des pixels entiers, arrondissez chaque étape et conservez les valeurs rem en quatre décimales, comme le fait l’outil ; convertissez les autres valeurs avec le convertisseur px vers rem.
Comment l'utiliser
- Saisissez la taille de base et choisissez un ratio.
- Indiquez le nombre de niveaux à ajouter et à réduire, puis prévisualisez-les avec votre texte.
- Copiez les variables CSS ou la configuration Tailwind.
Confidentialité et limitations
Tout s’exécute dans votre navigateur.
Outils associés
Questions fréquentes
Quel ratio dois-je utiliser ?
Les interfaces riches en texte et destinées aux petits écrans s’adaptent bien à des ratios modérés comme 1.125 ou 1.2 ; les pages éditoriales et les landing pages peuvent utiliser 1.333 à 1.618 pour des titres plus affirmés.
Pourquoi utiliser rem ?
Les tailles en rem suivent le réglage de taille de police du navigateur du lecteur : le texte s’agrandit donc pour les personnes qui en ont besoin. La conversion suppose une racine par défaut de 16 px.
Puis-je rendre les tailles fluides ?
Oui : prenez la taille minimale et la taille maximale souhaitées pour un niveau, puis transformez-les en expression clamp() avec le générateur CSS clamp.
Outil gratuit · dans votre navigateur exécutions · aucun compte requis