Échelle typographique
Générez une hiérarchie de tailles de police harmonieuse. Prévisualisez en temps réel et exportez le CSS.
Prévisualisation de l'échelle
Base 16px × 1.333CSS Custom Properties
:root {
--font-size-small: 0,563rem; /* 9,0px */
--font-size-xs: 0,750rem; /* 12,0px */
--font-size-base: 1,000rem; /* 16,0px */
--font-size-h6: 1,333rem; /* 21,3px */
--font-size-h5: 1,777rem; /* 28,4px */
--font-size-h4: 2,369rem; /* 37,9px */
--font-size-h3: 3,157rem; /* 50,5px */
--font-size-h2: 4,209rem; /* 67,3px */
--font-size-h1: 5,610rem; /* 89,8px */
}Questions fréquentes
Qu'est-ce qu'une échelle typographique ?
Une échelle typographique est une série de tailles de police calculées mathématiquement à partir d'une taille de base et d'un ratio multiplicateur. Chaque niveau est obtenu en multipliant le précédent par ce ratio.
Cette approche garantit une hiérarchie visuelle harmonieuse et cohérente sur l'ensemble d'une interface.
Quel ratio typographique choisir pour mon projet ?
Pour un site corporatif ou une interface dense, choisissez un ratio modéré comme la Seconde Majeure (1.125) ou la Tierce Mineure (1.2). Pour un site éditorial ou créatif avec plus de contraste hiérarchique, optez pour la Quarte Parfaite (1.333) ou le Nombre d'Or (1.618).
Sur mobile, les ratios plus petits (1.125–1.2) fonctionnent généralement mieux.
Comment utiliser les custom properties CSS générées ?
Copiez les variables CSS générées dans votre fichier :root {}. Utilisez ensuite ces variables dans vos styles : font-size: var(--font-size-base) pour le corps de texte, var(--font-size-h1) pour les titres, etc.
Cette approche centralise la gestion typographique et facilite les ajustements globaux.
Quelle taille de base utiliser en 2026 ?
La taille de base standard est 16px (correspond à 1rem dans la plupart des navigateurs). Certains designers utilisent 18px pour améliorer la lisibilité sur les écrans haute densité.
Évitez les tailles inférieures à 14px pour le corps de texte principal. La taille de base influence directement toutes les autres tailles de l'échelle.
Quelle est la différence entre rem et px pour la typographie ?
Le rem est relatif à la taille de police de l'élément racine (html), tandis que px est une unité absolue. Les rem respectent les préférences d'accessibilité de l'utilisateur (zoom navigateur, paramètres d'accessibilité) alors que les px restent fixes.
Pour l'accessibilité, il est recommandé d'utiliser des rem ou des em pour les tailles de police.
Autres outils design :
Formule : taille = base × ratio^n, avec n de -2 à +6. Ratios basés sur les intervalles musicaux (Major Second, Perfect Fourth, etc.). Concept popularisé par la méthode "Modular Scale" de Tim Brown et Scott Kellum. Dernière mise à jour : mars 2026.