7 erreurs d’échelle typographique qui cassent un système de design

Auditez les tailles de police d’un produit vieux de deux ans et vous trouvez rarement les six tailles que la documentation du système de design promet. Vous en trouvez une vingtaine : les six, plus 15px « pour la barre latérale », 17px « parce que 16 paraissait petit dans cette carte », 30px « assez proche de 28 » — chacune livrée par une personne raisonnable résolvant un problème local.

La plupart des erreurs d’échelle typographique partagent un même mécanisme : l’échelle cesse d’être la source dont les tailles, les interlignes et l’espacement sont réellement dérivés, et se transforme en une documentation dont la production s’écarte discrètement. Les sept ci-dessous sont les chemins courants vers cet état — chacune nommée par la défaillance que vous pouvez observer, puis le mécanisme qui la sous-tend, puis un correctif en une phrase.

Ce sont des erreurs de typographie au niveau du système de design, pas des questions de goût ; elles supposent que vous savez ce qu’est une échelle modulaire. Si ce n’est pas encore le cas, commencez par notre guide de l’échelle typographique.

1. Des valeurs hors échelle s’infiltrent — « juste cette fois, 17px »

La défaillance : la base de code accumule des tailles que l’échelle n’a jamais générées, une exception raisonnable à la fois, jusqu’à ce que l’échelle ne décrive plus rien et ne contraigne personne — de la décoration dans la documentation.

Le mécanisme : chaque exception est localement rationnelle et globalement corrosive. Le premier 17px résout un vrai problème ; il établit aussi que l’échelle est négociable, et chaque exception suivante est plus facile à justifier que la précédente. L’échelle typographique traditionnelle que l’imprimerie a portée pendant des siècles — 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24 points et au-delà — a tenu en partie parce qu’elle était physiquement fermée : les caractères étaient en métal, fondus dans ces tailles, et il n’existait aucun 17pt à aller chercher. La typographie numérique a supprimé la contrainte mais pas le besoin de celle-ci, la discipline doit donc être explicite.

Le correctif : traitez l’échelle comme fermée — quand une taille nécessaire manque, changez l’échelle (ajustez le ratio, subdivisez un palier), n’ajoutez jamais une valeur à côté.

2. Le ratio est trop raide pour le produit

La défaillance : l’équipe saute régulièrement des niveaux — les pages passent de h1 à h4, et la moitié supérieure de l’échelle reste discrètement inutilisée.

Le mécanisme : un ratio choisi pour son allure sur un spécimen plutôt que pour la densité de texte du produit. Comparez une échelle en nombre d’or avec une échelle plate, toutes deux sur une base de 16px :

Dans un produit dense en texte, la colonne 1,618 échoue presque immédiatement : rien n’existe entre 16 et 26, là où vit la plupart du texte d’interface, et un h1 de 110px appartient à une affiche, pas à un tableau de bord. Face à cela, les équipes n’abandonnent pas la hiérarchie — elles abandonnent l’échelle.

Le correctif : choisissez le ratio en fonction de la densité de texte — environ 1,125–1,25 pour une UI dense, plus raide pour un travail éditorial — et subdivisez les intervalles quand vous avez besoin de tailles intermédiaires plutôt que de tolérer des trous.

3. Les tailles suivent une échelle, les interlignes sont devinés

La défaillance : des colonnes qui commencent alignées finissent par diverger ; l’espace après les titres paraît différent sur chaque page ; les mises en page semblent bruitées et personne ne peut dire pourquoi.

Le mécanisme : c’est l’interligne, pas la taille de police, qui occupe réellement l’espace vertical. Si les tailles sont systématiques mais que l’interligne de chaque élément est un 1,3, un 1,45 ou un « 28px semblait bien » improvisé, la hauteur de chaque bloc de texte est arbitraire — les relations verticales ne peuvent pas s’additionner parce qu’il n’existe aucune unité dans laquelle les compter.

Le correctif : dérivez les interlignes d’une unité de ligne de base égale à la moitié de la base — 8px sur une base de 16px — et n’autorisez que des multiples entiers ou demi : corps de 16px sur une ligne de 24px (trois lignes de base), h2 de 38px sur 48px (six).

Cette discipline de ligne de base est plus facile à évaluer face à une référence concrète. Ouvrez une échelle cohérente dans Scale Composer — base 16, quarte juste, chaque interligne aligné sur la ligne de base de 8px, l’espacement dérivé de la même progression. Les quatre erreurs restantes sont toutes visibles comme des écarts par rapport à cette image.

4. Les tokens sont nommés d’après des valeurs — et mentent après un réajustement

La défaillance : le système réajuste son ratio de 1,333 à 1,25, et font-24 produit désormais 21px. Ou, plus fréquemment, personne ne réajuste — parce que renommer font-24 à travers des centaines de points d’appel coûte plus cher que de vivre avec le mauvais ratio.

Le mécanisme : un nom fondé sur la valeur soude chaque point d’appel à la sortie d’aujourd’hui plutôt qu’à la fonction de la taille. Les noms de rôle décrivent la fonction, et la fonction survit à un réajustement — ce qui est précisément l’intérêt de générer les tailles à partir de deux paramètres.

Le correctif : nommez les tokens d’après les rôles (body, heading-lg), jamais d’après les valeurs.

5. La typographie est mise à l’échelle, l’espacement non

La défaillance : le texte est proportionné mais les espaces autour de lui sont estimés à l’œil — les cartes, les piles et les sections semblent subtilement décalées même là où la typographie elle-même est soignée.

Le mécanisme : la proportion se perçoit à partir de la taille et de l’espace ensemble. Quand les tailles de police suivent un ratio mais que les marges et le padding suivent l’habitude — 12px ici, 20px là — la moitié du système parle une langue différente, et l’œil a deux jeux de règles à concilier au lieu d’un.

Le correctif : dérivez les paliers d’espacement de la même base et de la même échelle que la typographie — dans Scale Composer, les paliers d’espacement proviennent de la même progression, de sorte que les deux ne peuvent pas diverger.

6. Les tailles de titre sont choisies page par page, pas dérivées une seule fois

La défaillance : le h2 fait 32px sur le site marketing, 28px dans la documentation et 30px dans l’application — visible sur n’importe quelle capture côte à côte, invisible dans n’importe quelle revue page par page.

Le mécanisme : chaque décision par page est un embranchement, et chaque embranchement est défendable dans son propre contexte. Mais ce qui fait de la typographie un système, c’est la reconnaissance — le sentiment du lecteur, et de l’équipe, qu’il s’agit d’un seul produit — et la reconnaissance ne se cumule que lorsque l’échelle de titres est dérivée une seule fois et réutilisée partout.

Le correctif : dérivez l’échelle de titres à partir de l’échelle une seule fois, et laissez les décisions par page choisir des rôles, jamais des valeurs en pixels.

7. Tout est livré en px

La défaillance : un lecteur augmente la taille de police par défaut de son navigateur — un réglage dont dépendent certains lecteurs malvoyants — et le site l’ignore complètement.

Le mécanisme : px est absolu, tandis que rem se résout par rapport à la taille de police par défaut de l’utilisateur (16px sauf s’il l’a modifiée). Le zoom de la page fonctionne toujours sur du texte défini en px, mais la préférence de taille de police est un canal d’accessibilité différent — elle agrandit le texte sans agrandir toute la mise en page — et un CSS uniquement en px désactive ce canal.

Le correctif : exprimez l’échelle en rem — divisez chaque valeur en px par 16 — et ne laissez px vivre que dans les maquettes des outils de design.

Mettez votre échelle à l’épreuve avant que la production ne le fasse

Ces problèmes d’échelle typographique partagent un trait de plus : chacun est peu coûteux à détecter tôt et coûteux à défaire une fois qu’une centaine de pages en dépendent. Le diagnostic le plus rapide est l’abus délibéré — poussez le ratio à ses extrêmes et observez quels niveaux cassent en premier. Vers 1,1, les paliers adjacents s’effondrent en quasi-doublons que personne ne peut distinguer ; au-delà de 1,6, les tailles display débordent de tout conteneur réaliste. Menez cette expérience sur l’échelle de test sous contrainte dans le Scale Composer — les niveaux qui cassent en premier là-bas sont ceux que la production aurait cassés à votre place.