Qu'est-ce qu'une échelle typographique ?

Une échelle typographique est l'ensemble ordonné des tailles de police qu'un design system autorise, généralement obtenu en multipliant une taille de base par un rapport constant. Restreindre le texte à ces paliers est ce qui maintient la cohérence typographique d'une interface construite à plusieurs.

Comment se construit une échelle

Choisissez une taille de base, généralement 16px parce que c'est la valeur par défaut du navigateur et la taille que devrait avoir le texte courant. Choisissez un rapport. Multipliez vers le haut et vers le bas.

Un rapport de 1,25 (une tierce majeure) depuis une base de 16px donne à peu près :

12px  ← 16 / 1,25 / 1,067
14px
16px  ← base
20px
25px
31px
39px

Les valeurs sont ensuite arrondies à quelque chose de sensé. Les rapports courants vont de 1,125 (discret, adapté aux interfaces denses) à 1,5 (spectaculaire, mieux pour des pages marketing que pour des applications).

Pourquoi restreindre les tailles

Sans échelle, les tailles se choisissent au cas par cas, et une application accumule du texte en 13px, 14px et 15px que personne n'a voulu différent. Cela se lit comme légèrement inabouti, sans qu'aucun élément soit identifiablement faux.

Une échelle rend aussi le rythme vertical abordable. Quand les tailles se rapportent les unes aux autres par un rapport connu, les interlignages et les espacements peuvent s'y rapporter de façon prévisible au lieu d'être réglés composant par composant.

Ce qu'une taille seule ne couvre pas

Une taille n'est qu'une partie d'une décision typographique. Un jeu de jetons complet associe à chaque palier :

L'interlignage : plus serré pour les titres, plus aéré pour le texte courant. Environ 1,2 pour les tailles d'affichage et 1,5 pour le corps est un défaut raisonnable.
La graisse : quelles graisses sont disponibles à quelles tailles
L'interlettrage : les grands textes d'affichage demandent généralement un léger crénage négatif, les petits textes souvent un léger positif

Les systèmes qui ne tokenisent que la taille laissent les trois autres à redécider dans chaque composant — et c'est là que l'incohérence revient.

Le nommage sémantique

Nommer les paliers par leur rôle plutôt que par leur taille vaut la peine pour la même raison qu'en couleur :

--font-size-body: 16px;
--font-size-heading-2: 25px;

--text-lg décrit une taille. --font-size-heading-2 décrit une décision, et changer ce qu'il vise n'oblige pas à retrouver chaque titre.

Le choix des polices

L'association habituelle est une police d'affichage avec du caractère pour les titres et une police de labeur très lisible pour le texte courant. Le mode d'échec, c'est de choisir deux polices semblables mais pas identiques, ce qui se lit comme une erreur plutôt que comme une décision. Contrastez, ou accordez ; ne restez pas dans le presque.

Ce que Flash DSM apporte ici

Les systèmes générés incluent une association de polices et une échelle complète, avec des jetons de taille, de graisse, d'interlignage et d'interlettrage à chaque palier, choisis pour le produit décrit dans la phrase de départ.