Règles d’espacement entre les lettres selon la taille de police

Faites une petite expérience avant de lire la moindre règle. Composez le même mot — « Hardware » fonctionne bien — à 12px et à 64px dans la même police, et regardez les espaces entre les lettres plutôt que les lettres elles-mêmes. À 64px, ces espaces sont devenus des formes visibles à part entière, et le mot paraît légèrement lâche. À 12px, les mêmes lettres semblent se bousculer. Rien n’a changé dans la police — seulement la taille.

Voilà la règle fondamentale de l’espacement entre les lettres (les typographes parlent d’approche, ou tracking) : il évolue à l’inverse de la taille de police. Le grand texte de display se resserre — des valeurs négatives autour de −0,02em à partir de 48px ; le texte de corps est laissé tel quel, car les polices sont déjà espacées pour les tailles de lecture ; et le petit texte, surtout les étiquettes en majuscules, s’ouvre — +0,05em ou plus. Le reste de cet article explique pourquoi cette règle existe, quelle quantité appliquer à chaque niveau d’une échelle, et quelles unités utiliser. Il fait partie de notre guide de l’échelle typographique.

Pourquoi l’espacement entre les lettres dépend-il de la taille de police ?

Chaque glyphe d’une police porte un espace intégré de chaque côté — les créateurs de caractères parlent d’approches latérales (sidebearings) — réglé pour que le texte se compose uniformément aux tailles que le concepteur avait en tête, en général des tailles de lecture entre 9 et 14pt. Cet espace évolue de façon linéaire avec la police, mais pas la perception. Aux tailles de display, l’œil saisit le mot entier d’un coup, et les espaces agrandis se mettent à exister comme des formes à part entière : le mot paraît lâche. Aux très petites tailles, ces mêmes espaces rétrécissent en dessous de ce dont l’œil a besoin pour séparer un trait du suivant : le mot paraît serré.

En typographie au plomb, ce problème n’existait quasiment pas, car chaque taille physique était gravée séparément, avec son espacement ajusté pour cette taille. Une police numérique n’est en général qu’un seul tracé, mis à l’échelle — l’ajustement optique autrefois intégré à chaque taille doit donc être rétabli à la main. Le tracking, c’est ce rétablissement. (Certaines polices variables proposent désormais un axe de taille optique, opsz, qui en automatise une partie — mais il ajuste les formes de lettres et l’espacement choisis par le concepteur, et cela reste une minorité de polices en production.)

Quelle quantité d’espacement chaque taille doit-elle recevoir ?

Voici un jeu de valeurs de départ élaborées sur une échelle modulaire courante — base de 16px, ratio 1,333, deux notes par intervalle — couvrant les niveaux que la plupart des systèmes emploient :

Deux choses méritent l’attention dans ces chiffres. D’abord, les effets absolus sont minuscules : à 51px, −0,02em retire environ un pixel entre chaque paire de lettres — et cela suffit à faire la différence entre un texte aéré et un texte posé. Le tracking est un assaisonnement, pas un ingrédient. Ensuite, ces valeurs sont des points de départ, pas une loi : une sans-serif géométrique aux formes ouvertes et régulières tolère un tracking de display plus serré qu’une serif aux liaisons délicates, et les caractères condensés n’en veulent souvent aucun. La direction de la règle est fiable ; la quantité exacte est un jugement que vous portez avec vos yeux.

Observez le motif à l’échelle d’un système entier : ouvrez cette échelle dans Scale Composer — chaque niveau, de la légende au display, porte sa propre valeur d’espacement entre les lettres, se resserrant à mesure que les tailles grandissent. Ajustez le tracking sur n’importe quel niveau et comparez-le à ses voisins.

Pourquoi le texte en majuscules a-t-il besoin d’un espacement supplémentaire ?

Les mots en minuscules ont une silhouette : les ascendantes et les descendantes donnent à « hardware » une ligne d’horizon différente de celle de « software ». Un mot tout en majuscules est un rectangle uniforme — la ligne d’horizon disparaît, et le lecteur doit identifier le mot lettre par lettre. Un tracking supplémentaire rend chaque lettre plus facile à isoler et à reconnaître, et c’est pourquoi le petit texte en majuscules — surtitres, tags, libellés de boutons — reçoit par convention de +0,05em à +0,1em.

La même logique dit ce qu’il faut éviter : un tracking négatif sur du petit texte en majuscules va à l’encontre du seul canal de reconnaissance qui lui reste. Des majuscules resserrées peuvent fonctionner aux tailles de display, où chaque lettre est assez grande pour être identifiée sans effort, mais à 11–12px, ouvrez-les.

L’espacement entre les lettres doit-il utiliser em ou px ?

Utilisez em. Un tracking exprimé en em est relatif à la taille de police à laquelle il s’applique, si bien que la proportion voyage avec le texte : un style de libellé avec letter-spacing: 0.05em conserve la même ouverture visuelle, que le libellé s’affiche à 11px ou à 13px. Une valeur en pixels est figée — 1px de tracking qui semble juste à 12px devient invisible à 24px et lourd à 8px, et il faut le recalculer chaque fois qu’une taille change. Sur une échelle, où les tailles sont générées plutôt que fixées une fois pour toutes, em est l’unité qui survit à un réglage.

En CSS, la propriété est letter-spacing, et elle recèle une subtilité qui vaut la peine d’être connue : la valeur par défaut normal n’est pas la même que 0. normal signifie l’espacement intégré de la police plus la permission pour le navigateur d’ajuster les espaces lors de la justification du texte ; 0 interdit cet ajustement. Pour du texte d’interface aligné à gauche, les deux s’affichent de la même façon, mais cette distinction est une raison de laisser le texte de corps à normal plutôt qu’à un « zéro explicite ».

C’est aussi pourquoi le tracking a sa place à l’intérieur d’un token de typographie plutôt qu’à côté : un style de display, c’est sa taille, son interligne, sa graisse et son tracking réunis. Livrez la taille sans le −0,02em et vous n’avez pas livré le style.

Testez la règle sur votre propre police

La façon la plus rapide d’intérioriser le tracking dépendant de la taille, c’est de le voir échouer : ouvrez un niveau de display resserré à −0,02em, puis remettez l’espacement entre les lettres à 0 et regardez le titre de nouveau — le relâchement que vous ne saviez pas nommer au premier coup d’œil devient évident une fois que vous avez vu la version corrigée. Essayez ensuite l’expérience inverse sur le surtitre : ramenez son +0,08em à zéro et regardez le libellé en majuscules se figer. Votre propre police vous dira les valeurs exactes ; la direction de la règle, elle, tiendra.