# Approche, crénage, interlignage : le trio de l’espacement

[Canonical HTML page](https://gradiently.design/fr/guide/tracking-vs-kerning)

Trois mots pour trois écarts différents. Mélangez-les et vous corrigez le mauvais. Voici ce que chacun contrôle, lequel régler d’abord, et les chiffres qui servent de point de départ.

## The short version

- L’approche change l’espace entre toutes les lettres d’une ligne ou d’un bloc de texte à la fois.
- Le crénage change l’espace entre une paire précise de lettres, comme A et V.
- L’interlignage est la distance verticale entre les lignes de texte, appelée line-height en CSS et dans la plupart des applications.
- Réglez d’abord l’interlignage et l’approche pour un style entier, puis ne crénez les paires qu’en grand texte.
- Les grands titres demandent en général une approche et un interlignage un peu plus serrés, tandis que les capitales et le petit texte demandent plus d’approche.

Dans **approche et crénage**, la différence est la portée. L’approche ajuste l’espace entre toutes les lettres d’une sélection, donc un titre entier s’ouvre ou se resserre régulièrement. Le crénage ajuste l’espace entre une paire précise, comme le A et le V de VAGUE, pour corriger un écart laissé par la police. L’interlignage, troisième du trio, n’a rien à voir avec les lettres côte à côte : c’est l’espace vertical d’une ligne de texte à la suivante.

| Terme | Ce qu’il change | Portée | Nom en CSS |
| --- | --- | --- | --- |
| Approche | L’espace entre toutes les lettres | Un mot, une ligne ou un paragraphe | `letter-spacing` |
| Crénage | L’espace entre une paire de lettres | Deux caractères | `font-kerning` (activé ou désactivé seulement) |
| Interlignage | L’espace entre les lignes | Un paragraphe ou une zone de texte | `line-height` |

Le trio de l’espacement en un coup d’œil. Deux agissent à l’horizontale, un à la verticale, et un seul travaille sur une paire isolée.

## Qu’est-ce que l’approche en typographie

L’approche est un changement uniforme. Sélectionnez une ligne, ajoutez de l’approche, et chaque écart grandit de la même quantité. C’est l’outil pour changer la *texture* du texte : aérien et formel, ou dense et percutant. Dans les applications de design, elle se mesure en millièmes d’em (Adobe) ou en pourcentage de la taille de police (Figma), et en CSS avec `letter-spacing`, de préférence en em pour qu’elle suive la taille du texte.

Trois situations la demandent. Les grands titres paraissent généralement lâches à l’espacement par défaut, donc un peu d’approche négative les resserre. Les capitales paraissent à l’étroit, car elles ont été dessinées pour se placer près de minuscules, donc elles demandent une approche positive. Et le très petit texte, comme les étiquettes et les mentions légales, se lit mieux avec un peu plus d’air. [L’espacement des lettres](https://gradiently.design/fr/guide/letter-spacing) détaille chaque cas.

## Qu’est-ce que le crénage

Le crénage est une réparation locale. Certaines paires de lettres laissent un trou visible ou une collision même dans une police bien espacée : AV, To, LT, Yo, P suivi d’un point. Les polices incluent une table de ces paires et les ajustent automatiquement, donc pour le texte courant vous pouvez laisser le crénage tranquille. Dans les titres, logos et logotypes, il peut rester une paire ou deux à ajuster à la main. [Le crénage](https://gradiently.design/fr/guide/kerning) donne la liste complète des paires problématiques et une méthode pour les corriger à l’œil.

## Qu’est-ce que l’interlignage en typographie

L’interlignage tire son nom des lames de plomb que les imprimeurs plaçaient entre les lignes de caractères en métal. Aujourd’hui, c’est la hauteur de ligne : la distance d’une ligne de base à la suivante. Trop peu et les hampes heurtent les jambages ; trop et les lignes s’éloignent en pensées séparées. En règle générale, plus la ligne est longue et le texte petit, plus il faut d’interlignage. [Hauteur et longueur de ligne](https://gradiently.design/fr/guide/line-height-and-line-length) explique pourquoi.

Une publication portrait avec un surtitre en capitales espacées NOUVELLE SAISON au-dessus d’un titre serré La collection de printemps est là

La place de chaque réglage : approche ouverte sur le surtitre en capitales, approche et interlignage serrés sur le titre, espacement normal sur la ligne de détail.

Une publication éditoriale portrait avec une petite étiquette espacée NUMÉRO 04 et un titre Notes d’atelier

Une mise en page éditoriale. Son petit texte, l’étiquette et le sous-titre, se lit plus calmement avec un interlignage généreux et une approche légèrement ouverte.

## Quoi changer d’abord : approche, crénage ou interlignage

Travaillez de la plus grande décision à la plus petite. L’interlignage et l’approche définissent le style ; le crénage range ce qui reste. Changez-les dans le mauvais ordre et vous défaites votre propre travail.

1. **Choisissez la taille et la graisse** L’espacement dépend des deux. Réglez-les d’abord, car une graisse plus forte ou une taille plus grande demande d’autres valeurs.
2. **Réglez l’interlignage** Décidez à quel point les lignes s’empilent serré. Les titres plus serrés, les paragraphes plus aérés.
3. **Réglez l’approche du style** Appliquez une seule valeur d’approche à tout le style de titre, d’étiquette ou de texte. Gardez-la constante dans la création.
4. **Crénez les paires qui s’ouvrent encore** Seulement en texte grand ou permanent. Cherchez AV, To, LT et paires semblables et ajustez-les une à une.
5. **Vérifiez à la taille réelle** Regardez le résultat à la taille où les gens le verront. Un espacement qui semble juste en zoom peut paraître lâche sur mobile.

## Valeurs de départ pour l’approche et l’interlignage

Ce sont des valeurs par défaut raisonnables, pas des lois. Les polices diffèrent, et une police d’affichage condensée n’a rien à voir avec une géométrique large. Partez de là, puis fiez-vous à votre œil.

| Rôle du texte | Approche (CSS) | Approche (unités Adobe) | Interlignage |
| --- | --- | --- | --- |
| Texte courant, 14 à 20 px | 0 | 0 | 1,4 à 1,6 |
| Titre, 48 px et plus | -0,01em à -0,03em | -10 à -30 | 1,0 à 1,15 |
| Très grand texte d’affichage, 120 px et plus | -0,02em à -0,04em | -20 à -40 | 0,9 à 1,05 |
| Étiquettes tout en capitales | 0,06em à 0,12em | 60 à 120 | 1,2 à 1,3 |
| Petit texte sous 13 px | 0,01em à 0,02em | 10 à 20 | 1,4 à 1,5 |

L’approche en em CSS et en millièmes d’em Adobe dit la même chose : 0,05em équivaut à 50 unités. L’interlignage s’exprime en multiple de la taille de police.

### Erreurs courantes

- Créner chaque paire alors que l’approche est mauvaise
- Resserrer l’approche du texte courant pour caser plus de mots
- Interlignage par défaut sur un titre de trois lignes
- Capitales sans approche
- Une approche différente à chaque titre d’une série

### Mieux

- Corriger d’abord l’approche, puis créner le reste
- Modifier plutôt le texte
- Ramener l’interlignage du titre vers 1,1
- Ouvrir les capitales de 0,06em ou plus
- Une valeur par style, notée dans vos règles de marque

## Approche, crénage et interlignage en CSS

```css
:root {
  font-kerning: normal; /* use the font's own pairs */
}

body {
  font-size: 1.0625rem;
  line-height: 1.55;      /* leading */
  letter-spacing: 0;      /* tracking */
}

h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.eyebrow {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
```

Écrivez `line-height` sans unité pour qu’il suive la taille de police, et `letter-spacing` en em pour la même raison.

Gardez ces valeurs en un seul endroit pour que chaque page utilise le même espacement pour le même rôle. C’est le cœur d’un [système typographique](https://gradiently.design/fr/guide/brand-typography-system). Si vous concevez des publications sociales plutôt que des pages web, la même idée vaut : décidez l’espacement une fois, notez-le dans vos règles de marque et réutilisez-le. Dans Gradiently, le kit de marque conserve vos polices de titre et de texte et le Designer l’applique en composant de nouvelles tailles, si bien que la typographie reste cohérente d’une publication carrée à une story.

## FAQ

### Quelle différence entre approche et crénage ?

L’approche change l’espacement entre toutes les lettres d’une sélection. Le crénage change l’espacement entre une paire précise de lettres.

### L’interlignage est-il la même chose que la hauteur de ligne ?

Oui, en pratique. L’interlignage est le terme traditionnel de l’imprimerie, et line-height est ce que CSS et la plupart des applications de design appellent la distance entre les lignes.

### Faut-il régler l’approche ou le crénage d’abord ?

L’approche d’abord. Elle fixe l’espacement global ; le crénage corrige ensuite les quelques paires encore inégales, et seulement en grand texte.

### Comment s’appelle l’approche en CSS ?

`letter-spacing`. Écrivez-la en em, comme `0.05em`, pour qu’elle reste proportionnelle quand la taille de police change.

### Quel interlignage pour le texte courant ?

Environ 1,4 à 1,6 fois la taille de police pour le texte courant, et environ 1,0 à 1,15 pour les grands titres.