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

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.

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 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 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 explique pourquoi.

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. 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. 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. 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. 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. 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.

Approche, crénage et interlignage en 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;
}

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. 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.