Typographie
Générateur d'Échelle Typographique
Générez des échelles typographiques proportionnelles pour les design systems et CSS
Aperçu de l'échelle
xs
9px / 0.5628rem
The quick brown fox
sm
12px / 0.7502rem
The quick brown fox
base
16px / 1rem
The quick brown fox
lg
21.33px / 1.333rem
The quick brown fox
xl
28.43px / 1.7769rem
The quick brown fox
2xl
37.9px / 2.3686rem
The quick brown fox
3xl
50.52px / 3.1573rem
The quick brown fox
4xl
67.34px / 4.2087rem
The quick brown fox
5xl
89.76px / 5.6102rem
The quick brown fox
6xl
119.66px / 7.4784rem
The quick brown fox
Code
:root {
--text-xs: 0.5628rem; /* 9px */
--text-sm: 0.7502rem; /* 12px */
--text-base: 1rem; /* 16px */
--text-lg: 1.333rem; /* 21.33px */
--text-xl: 1.7769rem; /* 28.43px */
--text-2xl: 2.3686rem; /* 37.9px */
--text-3xl: 3.1573rem; /* 50.52px */
--text-4xl: 4.2087rem; /* 67.34px */
--text-5xl: 5.6102rem; /* 89.76px */
--text-6xl: 7.4784rem; /* 119.66px */
}FAQ
Questions Fréquentes
Tout sur la typographie et les échelles modulaires
Qu'est-ce qu'une échelle typographique?
Une échelle typographique est un ensemble de tailles de texte proportionnellement liées les unes aux autres par un ratio fixe. L'utilisation d'une échelle cohérente crée une harmonie visuelle dans le design.
Quel ratio choisir?
Pour les interfaces numériques, la Perfect Fourth (1,333) et la Major Third (1,250) sont les choix les plus courants: elles offrent un contraste visible sans être excessive. Le Golden Ratio (1,618) crée des contrastes très marqués, idéal pour les titres.
Comment utiliser la sortie CSS?
Copiez les variables CSS dans votre fichier de style global (ex. `app.css`). Puis utilisez-les avec `font-size: var(--text-lg)`. Pour Tailwind, collez la configuration dans le bloc `fontSize` de votre `tailwind.config.js`.