Échelle typographique (système de tailles de police)
Construisez un système de tailles pour titres et texte à partir d'une taille de base et d'un ratio, avec interlignages, aperçu et variables CSS à copier
Chargement de l’outil…
Génère les tailles de police des titres, du texte et des légendes à partir d'une taille de base et d'un ratio, afin que les tailles d'une page soient liées entre elles. Utile pour démarrer un site web, un écran d'application ou un modèle de document.
Mode d’emploi
- Saisissez la "Taille de base" du texte en px et choisissez un "Ratio" ; "Personnalisé" accepte toute valeur de 1,05 à 2.
- Sous "Arrondi", gardez les décimales, arrondissez aux px entiers ou alignez les tailles sur la "Grille de 4 px".
- Réglez l'"Interlignage" : "Plus serré pour les titres" réduit le multiplicateur pour les grandes tailles ; "Identique partout" utilise une seule valeur.
- Saisissez votre propre "Texte d'aperçu" et changez la "Police de l'aperçu" pour voir chaque palier à sa taille réelle.
- Appuyez sur "Copier les variables CSS", "Copier le CSS des éléments" ou "Copier le JSON".
Fonctionnement
- Taille du palier n = base × ratio puissance n. Les paliers vont de −2 (xs) à +6 (5xl) ; le palier 0 est le texte (p), les paliers 1 à 6 correspondent de h6 à h1.
- rem est la valeur en px divisée par la taille de base ; pt = px × 0,75 (96 px par pouce).
- Avec "Plus serré pour les titres", le multiplicateur descend en ligne droite de l'"Interlignage du texte" à la taille de base jusqu'à l'"Interlignage des titres" à trois fois la taille de base. "Grille de 4 px" arrondit aussi la boîte de ligne à un multiple de 4 px.
- Les réglages sont conservés dans ce navigateur pour la prochaine visite.
Questions fréquentes
- Quel ratio choisir pour un site web ?
- 1,2 et 1,25 donnent des titres modérés, adaptés aux articles longs ; 1,333 et plus donnent de grands titres, façon affiche. Sur petit écran, un ratio plus faible rend souvent mieux.
- Quelle taille pour le texte courant ?
- 16 px est la valeur par défaut des navigateurs et un point de départ courant ; pour la lecture longue on utilise 17 à 18 px. Le reste de l'échelle suit la taille de base saisie.
- Comment convertir les tailles en rem ?
- Le tableau affiche rem à côté de px. En fixant html à la taille de base en px, comme le fait le CSS des éléments copié, 1rem vaut la base.
- Quel interlignage pour les titres ?
- Le texte se situe généralement vers 1,5 et les grands titres entre 1,1 et 1,25, pour que les lignes d'un titre coupé ne laissent pas de grands vides. Le mode automatique applique ce changement.