L’essentiel en bref
- Une échelle typographique est un court jeu de tailles de police obtenu en multipliant une taille de base par le même ratio, encore et encore.
- Les petits ratios comme 1,2 conviennent aux interfaces denses, tandis que les grands ratios comme 1,5 conviennent aux affiches, aux publications sociales et aux pages d’atterrissage.
- Avec une base de 16 px et un ratio de 1,25, l’échelle donne 16, 20, 25, 31, 39 et 49 px.
- La plupart des créations n’ont besoin que de cinq ou six tailles, et arrondir les résultats au pixel entier convient très bien.
- En CSS, une échelle typographique se maintient le plus facilement en propriétés personnalisées, rendues fluides avec clamp().
Sur cette page
Une échelle typographique est un jeu de tailles de police construit à partir d’une taille de base et d’un ratio. Vous partez de la taille de votre texte, disons 16 px, et la multipliez par le ratio pour obtenir la taille supérieure, puis encore pour la suivante. Avec un ratio de 1,25, vous obtenez 16, 20, 25, 31, 39 et 49 px. Comme chaque palier grandit de la même proportion, les tailles paraissent liées, et choisir une taille de titre n’est plus un pari.
Pourquoi une échelle rend les tailles cohérentes
L’œil lit la taille comme une proportion, pas comme des pixels. Le saut de 16 à 20 se ressent comme celui de 39 à 49, car les deux sont d’un quart plus grands. Des tailles choisies à l’instinct tendent à se tasser à certains endroits et à laisser des vides ailleurs, si bien que deux titres finissent presque à la même taille et ressemblent à une erreur. Une échelle donne à chaque niveau un palier net et régulier, ce qui fait l’ossature de la hiérarchie visuelle.
Comparaison des ratios d’échelle courants
Beaucoup de ratios populaires empruntent leur nom aux intervalles musicaux, et une échelle construite ainsi s’appelle souvent échelle modulaire. Le nom compte moins que la taille du palier : plus le ratio est grand, plus il y a de drame entre les niveaux et moins de niveaux tiennent sur une page.
Ratio
Impression
Idéal pour
Ratio
Impression
Idéal pour
Ratio
Impression
Idéal pour
Ratio
Impression
Idéal pour
Ratio
Impression
Idéal pour
Ratio
Impression
Idéal pour
Ratio
Impression
Idéal pour
Ratio
Impression
Idéal pour
Valeurs de l’échelle en pixels
Voici la même base de 16 px passée dans quatre ratios. Remarquez la rapidité des grands ratios : au palier 4, une échelle à 1,5 est déjà à 81 px, tandis qu’une échelle à 1,2 est à 33 px.
1,2
1,25
1.333
1,5
1,2
1,25
1.333
1,5
1,25
1.333
1,5
1,25
1.333
1,5
1,25
1.333
1,5
1,25
1.333
1,5
1,25
1.333
1,5
Arrondir convient. Personne ne voit la différence entre 31,25 et 31 px, et les nombres entiers sont plus faciles à retenir et à aligner sur une grille.
Comment construire votre propre échelle typographique
- 1
Choisissez la taille de base
C’est votre texte courant. De 16 à 18 px convient à la plupart des sites ; sur un canevas social de 1080 px, partez de 40 px.
- 2
Choisissez un ratio selon le contenu
Beaucoup de texte et de nombreux niveaux de titres demandent un petit ratio. Peu de mots et un grand titre en demandent un grand.
- 3
Générez cinq ou six paliers
Multipliez vers le haut pour les titres et divisez une fois pour le petit texte. La plupart des créations n’utilisent jamais plus de six tailles.
- 4
Arrondissez et nommez
Arrondissez au pixel entier et nommez les paliers par rôle, comme légende, texte, titre et affichage, pas par numéro.
- 5
Réglez l’interlignage pour chaque palier
Les grandes tailles demandent un interlignage plus serré. Texte autour de 1,5, titres autour de 1,2, affichage près de 1.0.
- 6
Testez avec de vrais mots
Composez un vrai titre, un sous-titre et un paragraphe. Si deux paliers se ressemblent trop, sautez-en un ou augmentez le ratio.
Une échelle typographique pour les publications sociales
Les publications sociales demandent un ratio plus grand que les pages web, car un canevas de 1080 px se réduit au tiers de sa largeur sur mobile et il n’y a que deux ou trois niveaux de texte. Une base de 40 px avec un ratio de 1,5 donne 40, 60, 90 et 135 px, ce qui s’aligne bien avec les tailles de la taille de police pour Instagram.
Une publication de chiffre clé demande trois niveaux nets : le chiffre, le détail et l’étiquette. Sur une échelle à 1,5, ce sont 135, 60 et 40 px.
Un slide de liste utilise les paliers inférieurs de la même échelle, donc il se place sans heurt à côté du slide de chiffre dans un même carrousel.
Utiliser une seule échelle sur tous les slides d’un carrousel fait qu’un ensemble paraît conçu plutôt qu’assemblé. Les mêmes tailles pour les mêmes rôles, slide après slide. La mise en page du texte des publications sociales montre comment les organiser.
Comment écrire une échelle typographique en CSS
Stockez l’échelle en propriétés personnalisées pour que chaque composant s’y réfère. Vous pouvez enchaîner les multiplications avec calc(), ou écrire les valeurs arrondies. Pour une échelle qui grandit avec l’écran, donnez à chaque palier une plage clamp() : un minimum pour les mobiles, un maximum pour les grands écrans et une valeur fluide entre les deux.
/* A 1.25 scale from a 1rem (16px) base */
:root {
--ratio: 1.25;
--step-0: 1rem;
--step--1: calc(var(--step-0) / var(--ratio));
--step-1: calc(var(--step-0) * var(--ratio));
--step-2: calc(var(--step-1) * var(--ratio));
--step-3: calc(var(--step-2) * var(--ratio));
--step-4: calc(var(--step-3) * var(--ratio));
--step-5: calc(var(--step-4) * var(--ratio));
}
/* Fluid headings: smaller ratio on phones, larger on desktop */
h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 4.25rem); line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1.15; }
h3 { font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.25; }
body { font-size: var(--step-0); line-height: 1.55; }
small { font-size: var(--step--1); }--ratio une fois et chaque palier se met à jour. Gardez rem dans le minimum de chaque clamp pour que le texte respecte toujours le réglage de taille de police du lecteur.À éviter
- Dix tailles quand cinq suffiraient
- Deux titres à 2 px d’écart
- Le même ratio pour un tableau de bord et une affiche
- Des tailles fixes en pixels qui ignorent les réglages de police du lecteur
À faire
- Cinq ou six paliers, chacun avec un rôle nommé
- Sauter un palier si deux niveaux se ressemblent
- Petit ratio pour les écrans denses, grand pour peu de mots
- Des tailles en rem, fluides avec clamp()
Une échelle est une partie d’un ensemble plus large de décisions sur les polices, l’espacement et les rôles. Le système typographique les réunit, et approche et crénage couvre les valeurs d’espacement qui accompagnent chaque palier. Si vous concevez du contenu social, le kit de marque de Gradiently conserve vos polices de titre et de texte et le Designer les applique à chaque nouvelle taille, ce qui facilite le maintien d’une échelle choisie une fois.
Les questions qu’on nous pose
Qu’est-ce qu’une échelle typographique ?
Un jeu de tailles de police obtenu en multipliant une taille de base par le même ratio de façon répétée, si bien que chaque taille est proportionnellement liée aux autres.
Quel est le meilleur ratio d’échelle typographique ?
Il n’y en a pas un seul. 1,2 ou 1,25 convient aux sites et applications riches en texte ; 1,5 ou plus convient aux affiches et publications sociales avec peu de mots.
Combien de tailles de police une création doit-elle utiliser ?
En général cinq ou six : une petite taille, le texte, deux ou trois niveaux de titres et une taille d’affichage.
Faut-il arrondir les valeurs de l’échelle ?
Oui. Arrondir au pixel entier ne change rien de visible et rend l’échelle plus facile à utiliser et à retenir.
Comment rendre une échelle typographique responsive en CSS ?
Utilisez clamp() pour chaque palier, avec un minimum en rem, une valeur intermédiaire fluide en unités de fenêtre et un maximum pour les grands écrans.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil