Espacement des lettres : quand aérer le texte et quand le resserrer

L’espacement des lettres (approche) est l’espace uniforme ajouté ou retiré entre toutes les lettres d’un mot ou d’une ligne. La règle courte : ajoutez de l’espacement aux majuscules et aux petits libellés, resserrez légèrement les grands titres, et laissez le texte courant à l’espacement par défaut de la police. La plupart des problèmes d’espacement dans les vraies créations viennent du contraire : des majuscules serrées, de grands titres lâches et des paragraphes espacés pour remplir un cadre.

L’espacement des lettres est l’un des trois réglages d’espacement qui façonnent la lecture du texte. Les deux autres sont l’interligne et la longueur de ligne, et les trois sont présentés dans les bases de la typographie.

Approche ou crénage : quelle différence

Les deux mots sont souvent employés l’un pour l’autre, mais ils font des choses différentes. L’approche change uniformément l’espacement de toute une sélection. Le crénage change l’espace entre une paire de lettres précise, parce que certaines formes laissent des écarts disgracieux avec leur espacement par défaut : pensez à AV, To, Ty ou LT.

Les bonnes polices sont livrées avec des milliers de paires de crénage : aux tailles de texte, vous avez rarement besoin de créner à la main. Aux tailles de titre et de logo, les petits écarts deviennent visibles, et le crénage manuel d’une paire ou deux vaut la minute qu’il demande.

Pourquoi les majuscules ont besoin de plus d’espacement

Les minuscules sont dessinées pour se placer à côté d’autres minuscules : hampes, jambages et formes rondes créent un contour varié que l’œil lit comme la forme d’un mot. Les majuscules sont massives et de hauteur semblable : à l’espacement par défaut, elles s’entassent en une barre pleine. Un peu d’approche supplémentaire les sépare et rend chaque lettre plus facile à reconnaître.

La dose dépend de la taille. De minuscules capitales, comme un libellé ou une accroche à 11 à 13 px, peuvent prendre de 0,08em à 0,12em. Les majuscules d’un sous-titre en demandent moins, autour de 0,04em à 0,06em. De très grandes majuscules dans un titre peuvent n’en demander aucune, voire un léger resserrement.

Quand resserrer l’espacement des lettres

Les polices sont espacées pour une plage de tailles précise, en général les tailles de texte. Agrandi à 60 ou 100 px, le même espacement paraît aéré et le mot cesse de se lire comme une seule forme. Resserrer légèrement les grands titres, souvent de 0,01em à 0,03em, les remet d’aplomb. Les polices dotées d’un axe de taille optique ou d’une coupe Display distincte le font souvent pour vous, un des avantages traités dans les polices variables.

Resserrez avec prudence. Des lettres qui se touchent, ou des lettres rondes qui commencent à fusionner, indiquent que vous êtes allé trop loin, surtout avec des graisses grasses. Vérifiez les paires aux limites de ce que la police fait bien, comme rn (qui peut se lire m) et cl (qui peut se lire d).

L’espacement des lettres en CSS

Définissez letter-spacing en em, pas en pixels, pour que l’espacement suive la taille de la police. Une valeur qui convient à un libellé de 12 px restera alors proportionnellement juste si le libellé passe à 14 px. Voir la référence MDN pour letter-spacing pour le comportement complet.

body {
  letter-spacing: normal; /* leave paragraphs alone */
  font-kerning: normal;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.button {
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.display {
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* Tracking also adds space after the last letter.
   Balance it when centring a short label. */
.eyebrow--centred {
  padding-inline-start: 0.1em;
}

L’espacement pour le petit texte, les libellés et les chiffres

Le petit texte gagne à un peu d’espace supplémentaire, car aux petites tailles les lettres se brouillent, surtout un texte clair sur fond sombre. Beaucoup de familles de polices ouvrent déjà leur espacement aux petites tailles optiques. Si la vôtre ne le fait pas, 0,01em à 0,03em sur les légendes et les mentions en petits caractères peut aider. Les chiffres des tableaux profitent davantage des chiffres tabulaires (font-variant-numeric: tabular-nums) que de l’approche, car ils s’alignent en colonnes.

Deux autres cas demandent de l’attention. Les écritures liées, comme l’arabe, ne doivent pas être espacées, car l’espacement brise les liaisons entre les lettres. Et le texte en minuscules ne devrait presque jamais être aéré : des minuscules espacées brisent les formes de mots qui rendent la lecture facile.

Un point de départ d’espacement pour chaque rôle

Prenez ces valeurs comme réglages par défaut, puis ajustez à l’œil pour votre police. Regardez le résultat à la taille réelle, sur un vrai écran, car un espacement qui paraît juste en zoom sur un canevas de design paraît souvent différent à 100 %.

Si votre création se trouve sur un dégradé ou une photo, l’espacement affecte aussi la lisibilité : des lettres fines et très serrées disparaissent plus vite sur un fond chargé que des lettres aérées. Associez ces réglages aux conseils sur le texte sur un dégradé et l’association de polices pour des créations qui se lisent d’un coup d’œil.