Échelles typographiques : comment j'ai choisi 13 paliers et pourquoi le ratio compte

L’ouvrage de Robert Bringhurst, The Elements of Typographic Style, a établi que les relations typographiques harmonieuses suivent les mêmes ratios mathématiques que ceux de la musique : la quarte juste (1,333), la quinte juste (1,5) et le nombre d’or (1,618). J’ai commencé avec une quarte juste et j’ai terminé avec une progression personnalisée qu’aucun ratio standard ne produit — parce que ma structure de contenu exigeait des paliers spécifiques entre le corps de texte et les titres d’affichage.¹

TL;DR

Une échelle typographique génère une hiérarchie de tailles de police à partir d’une taille de base et d’un ratio mathématique. Après avoir construit le système typographique de blakecrosley.com — 13 paliers de 0,75rem (12px) à 5rem (80px), en utilisant exclusivement des polices système — j’ai appris que le ratio compte moins que les paliers entre le corps de texte et le H1. Mon échelle utilise une progression d’environ 1,18 entre les paliers adjacents, mais effectue des sauts délibérés (de 3,875rem à 5rem) là où la structure du contenu nécessite une séparation visuelle. La comparaison interactive ci-dessous montre la différence entre des ratios stricts et des ajustements guidés par le contenu.

Mon échelle typographique : 13 paliers

Voici l’échelle réelle extraite du fichier critical.css de mon site :

:root {
  --font-size-xs:      0.75rem;   /* 12px — metadata, timestamps */
  --font-size-sm:      0.875rem;  /* 14px — captions, fine print */
  --font-size-base:    1rem;      /* 16px — body text, default */
  --font-size-lg:      1.125rem;  /* 18px — lead paragraphs */
  --font-size-xl:      1.3125rem; /* 21px — large body, section intro */
  --font-size-2xl:     1.5625rem; /* 25px — H4, card titles */
  --font-size-3xl:     1.875rem;  /* 30px — H3 */
  --font-size-4xl:     2.25rem;   /* 36px — H2 */
  --font-size-5xl:     2.7rem;    /* 43.2px — H1 */
  --font-size-6xl:     3.25rem;   /* 52px — large H1 */
  --font-size-7xl:     3.875rem;  /* 62px — page title */
  --font-size-display: 5rem;      /* 80px — hero headline */
}

La progression entre les paliers adjacents ne suit pas un ratio mathématique strict. Les paliers de xs à xl suivent approximativement un facteur de 1,17-1,18x. Les paliers de 5xl à display augmentent plus agressivement (1,20-1,29x), car le titre hero nécessite une séparation visuelle par rapport aux titres de niveau page.²

Pourquoi pas un ratio strict ?

Un ratio strict de tierce majeure (1,25) à partir d’une base de 16px produit ces paliers : 16, 20, 25, 31,25, 39,06, 48,83, 61,04. Le saut du corps de texte (16px) au H3 (31,25px) est de presque 2x — trop dramatique pour des pages riches en contenu où le H3 apparaît fréquemment. Mon échelle compresse la plage intermédiaire (18, 21, 25, 30, 36) pour maintenir les titres proportionnels au corps de texte, tout en élargissant la plage supérieure (43, 52, 62, 80) pour la typographie d’affichage.

C’est la structure du contenu qui a guidé l’échelle, pas les mathématiques. J’ai testé chaque palier sur du vrai contenu d’article de blog et ajusté les tailles là où le test de plissement des yeux échouait.³

Pourquoi les polices système

Ma pile de polices :

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}

L’argument de la performance

Les polices système se chargent en zéro milliseconde. Aucune requête réseau, aucun FOIT (Flash of Invisible Text), aucun FOUT (Flash of Unstyled Text). Ce choix contribue à mon score Lighthouse de 100/100 en performance.

Les polices web personnalisées ajoutent généralement 100 à 300 ms au First Contentful Paint en raison du téléchargement des fichiers de police et des décisions de rendu du navigateur. Google Fonts se charge depuis un CDN (une recherche DNS + une requête HTTP au minimum). Les polices auto-hébergées éliminent la recherche DNS mais nécessitent toujours le téléchargement. Les polices système éliminent chaque composante de la latence de chargement des polices.⁴

L’argument du design

Les polices système s’harmonisent avec la plateforme. Sous macOS, mon site s’affiche en SF Pro — la même police que l’interface système de macOS, Apple Mail et le chrome de Safari. La continuité visuelle entre le système d’exploitation et le site web produit une sensation native plutôt que marquée.

Linear, Vercel et Raycast utilisent la même approche. Ce pattern a émergé de mes 16 études de design produit : les produits qui privilégient la lisibilité du contenu par rapport à l’expression de la marque tendent à utiliser les polices système.

Quand les polices personnalisées en valent la peine

Les polices personnalisées servent les pages marketing, l’identité de marque et la typographie d’affichage où la police EST le design. Mon site est orienté contenu (articles de blog, descriptions de projets), où la typographie doit être transparente — les lecteurs doivent traiter le contenu, pas remarquer la police.

Le système de graisses

Quatre graisses couvrent tous les besoins de hiérarchie :

:root {
  --font-weight-normal:   400;  /* Body text */
  --font-weight-medium:   500;  /* Navigation, labels */
  --font-weight-semibold: 600;  /* Subheadings, emphasis */
  --font-weight-bold:     700;  /* Headlines, primary actions */
}

Combinées avec les 13 paliers de taille et les quatre niveaux d’opacité, j’obtiens 208 combinaisons possibles (13 tailles × 4 graisses × 4 opacités). En pratique, j’utilise environ 15 combinaisons de façon constante. Le système offre de la flexibilité sans nécessiter une décision à chaque instance de texte — la plupart du texte utilise la taille base, la graisse normal et l’opacité primary.⁵

Typographie responsive

Le problème des ratios uniques

Une échelle typographique conçue pour le bureau produit des titres surdimensionnés sur mobile. Ma taille display à 80px remplit magnifiquement un viewport de 1440px, mais submerge un écran de téléphone de 375px. Plutôt que de mettre à l’échelle l’ensemble du système avec des unités de viewport, je surcharge des breakpoints spécifiques :

@media (max-width: 1024px) {
  .hero__title { font-size: var(--font-size-6xl); }  /* 52px */
}

@media (max-width: 768px) {
  .hero__title { font-size: var(--font-size-3xl); }  /* 30px */
}

Le corps de texte reste à 16px sur tous les viewports — le corps de texte n’a pas besoin d’être mis à l’échelle, car 16px reste lisible sur tout écran moderne. Seules les tailles d’affichage et de titres diminuent sur les viewports plus petits. L’approche est plus simple que la typographie fluide (clamp()) et produit des résultats prévisibles aux breakpoints connus.⁶

L’espacement des lettres aux tailles d’affichage

Les grandes tailles nécessitent un interlettrage plus serré. À 80px, l’espacement par défaut des lettres produit des écarts visibles entre les caractères :

.hero__title {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

Le letter-spacing de -0.03em et le line-height de 1.05 produisent des titres serrés et percutants. Le corps de texte à 16px utilise l’espacement par défaut avec un line-height généreux de 1.7 pour la lisibilité. Le contraste entre des titres serrés et un corps de texte aéré crée un rythme visuel sans décoration.⁷

Tester la typographie

Le test de plissement des yeux

Plissez les yeux ou reculez par rapport à l’écran. La hiérarchie des titres devrait rester visuellement distincte à chaque niveau. Si les H3 et H4 se confondent, le ratio est trop petit pour la police choisie.

J’ai appliqué le test de plissement des yeux à mon échelle et j’ai identifié que --font-size-xl (21px) et --font-size-2xl (25px) se confondaient au départ. L’ajout d’une différence de graisse (xl utilise normal 400, 2xl utilise semibold 600) a résolu la distinction sans changer les tailles. La graisse fournit une hiérarchie indépendamment de la taille.⁸

Le test de contenu

Remplissez chaque niveau de titre avec du vrai contenu. Le texte de substitution masque les problèmes de hiérarchie, car « Lorem Ipsum » ne possède pas la variation de poids visuel du langage réel. Je teste chaque ajustement d’échelle sur mon article de blog le plus long (la correction d’erreurs de Hamming, plus de 2 000 mots avec des H2, H3, H4, des blocs de code, des tableaux et des notes de bas de page). Si l’échelle fonctionne pour le contenu le plus complexe, elle fonctionne pour tout.

Points clés à retenir

Pour les designers : - Commencez avec une taille de base de 16px et testez des ratios entre 1,15 et 1,25 sur du vrai contenu ; les ratios mathématiques stricts nécessitent souvent des ajustements guidés par le contenu aux extrêmes - Utilisez le test de plissement des yeux et le test de contenu avant de finaliser ; la distinction visuelle à chaque niveau de titre compte davantage que la pureté mathématique

Pour les développeurs : - Définissez les échelles typographiques en tant que propriétés CSS personnalisées au niveau :root ; référencez var(--font-size-*) dans l’ensemble du code pour empêcher l’accumulation de tailles de police arbitraires - Envisagez les polices système avant les polices web personnalisées ; l’économie de 100 à 300 ms sur le chargement des polices se cumule à chaque chargement de page, et les polices système offrent une lisibilité native à la plateforme - Utilisez des surcharges par breakpoint pour les tailles d’affichage plutôt que la typographie fluide si des résultats prévisibles à des largeurs connues comptent davantage qu’une interpolation fluide

Références