Échelle Typographique

Générez une échelle typographique modulaire pour votre design. Choisissez la taille de base et le ratio pour des titres parfaitement proportionnés.

px
Scale PreviewPreview capped at 72px - CSS below ↓
h1
-
The quick brown fox
h2
-
The quick brown fox
h3
-
The quick brown fox
h4
-
The quick brown fox
h5
-
The quick brown fox
h6
-
The quick brown fox
body
-
The quick brown fox
small
-
The quick brown fox
Generated CSS

Qu'est-ce qu'une échelle typographique modulaire?

Une échelle typographique modulaire est un ensemble de tailles de police suivant un ratio mathématique constant - par exemple Tierce majeure (1,25x) ou Quarte juste (1,333x). Chaque niveau de h1 à h6 est proportionnellement plus grand que le suivant, créant une typographie harmonieuse.

Comment choisir le bon ratio

Les petits ratios comme Minor Second (1,067) créent des échelles compactes pour les interfaces denses. Les grands ratios comme Perfect Fourth (1,333) ou le Nombre d'or (1,618) créent des contrastes dramatiques pour les sites éditoriaux. Major Third (1,25) est une valeur sûre.

Utiliser le CSS généré

Le panneau CSS génère des propriétés personnalisées dans :root (ex. --text-h1) et des sélecteurs directs pour chaque niveau de titre. Collez-les dans votre feuille de style. Utilisez rem pour un dimensionnement accessible ou px pour des tailles fixes.

Échelle typographique et accessibilité

L'utilisation de rem plutôt que px rend votre typographie évolutive avec les préférences de l'utilisateur, ce qui est essentiel pour l'accessibilité. Le WCAG recommande que le texte puisse être agrandi jusqu'à 200%. Une échelle modulaire en rem satisfait automatiquement cette exigence.