letter-spacing et word-spacing en CSS : aérer un texte sans casser sa lecture

Un même mot en majuscules paraît plus serré qu'en minuscules, parce que les lettres capitales, plus carrées, laissent moins de blanc entre elles. Les typographes corrigent cet effet depuis toujours en écartant légèrement les lettres. CSS offre exactement ce réglage avec deux propriétés cousines, letter-spacing et word-spacing.

La première agit entre les lettres, la seconde entre les mots. Toutes deux paraissent anodines, mais un excès de l'une ou de l'autre transforme un texte confortable en une suite de mots pénibles à relier visuellement.

Définition

letter-spacing ajoute (ou retire) un espace fixe entre chaque caractère d'un texte. word-spacing fait la même chose, mais uniquement entre les mots, en agissant sur la largeur des espaces qui les séparent.

.etiquette {
  letter-spacing: 0.08em;
}

.texte-aere {
  word-spacing: 0.3em;
}

Les deux propriétés acceptent une valeur en pixels, mais l'unité em est généralement préférée, parce qu'elle se calcule par rapport à la font-size de l'élément : l'espacement reste proportionné même si la taille du texte change ailleurs sur le site.

L'usage typique : les libellés en majuscules

L'association la plus courante combine text-transform et letter-spacing : un libellé court passé en majuscules, avec un léger écart entre les lettres pour compenser leur densité visuelle et donner un rendu plus aéré, presque affiché.

.badge {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
}

C'est ce réglage qui donne aux petites étiquettes de statut, aux boutons discrets ou aux libellés de navigation ce rendu net et espacé qu'on croise sur la plupart des interfaces modernes, très différent d'un texte en majuscules laissé sans aucun espacement.

Le piège sur du texte long

Ce qui fonctionne parfaitement sur trois mots en majuscules devient un problème sur un paragraphe entier. Un écart de lettres pensé pour un libellé court, appliqué par erreur ou par habitude à un bloc de texte courant, ralentit sensiblement la lecture : l'œil doit parcourir une distance plus grande pour reconnaître chaque mot, et la fatigue de lecture augmente sur un texte long.

word-spacing, moins fréquent mais parfois utile

word-spacing sert plus rarement, souvent pour aérer un texte déjà dense visuellement, ou pour un effet de mise en page particulier où les mots doivent respirer davantage que les lettres. Une valeur trop élevée casse cependant la lecture par groupes de mots que l'œil effectue naturellement, en donnant l'impression que chaque mot est un élément isolé plutôt qu'une phrase continue.

Questions fréquentes

Ce n'est pas obligatoire, mais c'est la combinaison la plus fréquente, parce que les majuscules profitent particulièrement d'un léger écart. Sur un texte resté en minuscules, un espacement positif est rarement nécessaire, la police gère déjà correctement l'espacement naturel des lettres.

Une valeur entre 0.05em et 0.1em couvre la plupart des besoins courants. Au-delà, les lettres commencent à se détacher visuellement les unes des autres, ce qui peut être un effet voulu pour un très gros titre, mais devient vite excessif sur un texte de taille normale.

Oui, il sert surtout sur de très grands titres, où l'espacement par défaut de certaines polices paraît trop généreux à grande taille. Resserrer légèrement les lettres, avec une valeur comme -0.02em, corrige cette impression sans nuire à la lisibilité, puisque le texte reste court.

Oui, chaque caractère supplémentaire écarté ajoute un peu de largeur au texte affiché. Sur un bouton ou une étiquette dont la largeur s'ajuste au contenu, un letter-spacing important peut donc légèrement agrandir l'élément par rapport à la même valeur sans espacement.