Crénage : corriger les écarts entre les lettres

Le crénage est l’ajustement de l’espace entre deux lettres précises pour qu’un mot paraisse régulièrement espacé. Certaines paires de formes laissent un trou côte à côte : la diagonale d’un A près de la diagonale d’un V, le débord d’un T au-dessus d’un petit o. Le crénage rapproche ces paires, ou parfois écarte une paire trop serrée, jusqu’à ce que les écarts paraissent identiques à l’œil. Il diffère de l’approche, qui modifie l’espacement de toutes les lettres d’une ligne à la fois.

Pourquoi certaines paires de lettres demandent du crénage

Chaque lettre d’une police se place dans une boîte invisible avec un peu d’espace intégré de chaque côté. Cela fonctionne pour la plupart des combinaisons : n près de o, h près de e. Cela échoue là où les formes sont ouvertes d’un côté. Diagonales, bras en surplomb et lettres rondes à côté de droites créent des poches de blanc qui ressemblent à une lettre manquante.

Le cas de r et n est à l’origine d’une vieille blague de typographe : serrez trop « rn » et « modèrne » se lit « modème ». C’est un bon rappel que le crénage joue dans les deux sens.

Quand créner à la main

Les bonnes polices sont livrées avec une table de crénage, une liste de paires et de l’ajustement de chacune, donc le texte courant et la plupart des textes d’interface sont déjà traités. Le crénage manuel vaut le temps passé quand le texte devient grand ou permanent.

• Titres au-dessus d’environ 60 px à l’écran, où un écart de 2 px devient un trou visible.
• Logos et logotypes, qui seront vus des milliers de fois à toutes les tailles. Le design de logotype va plus loin.
• Texte tout en capitales, où les diagonales comme A, V, W et Y s’alignent plus souvent.
• Lignes d’affiche et de miniature, où trois ou quatre mots portent toute la création.
• Polices libres ou d’affichage aux tables de crénage maigres, qui peuvent laisser des paires courantes sans ajustement.

Comment créner un titre ou un logotype à l’œil

Le but est une surface régulière entre les lettres, pas une distance mesurée égale. Deux hampes droites, comme H et I, demandent le plus d’espace entre elles. Une droite près d’une ronde, comme H et O, en demande un peu moins. Deux rondes, comme O et C, en demandent le moins. Les diagonales et les surplombs demandent la plus forte correction.

1. 1

   Réglez d’abord l’approche

   Décidez de l’espacement global de la ligne avant de toucher aux paires. Créner une ligne puis changer son approche défait la moitié du travail.

2. 2

   Travaillez par trois

   Regardez trois lettres à la fois et ajustez celle du milieu pour que les deux écarts de chaque côté s’égalent. Puis avancez d’une lettre.

3. 3

   Retournez-le

   Retournez le mot ou regardez-le en miroir. Quand vous ne pouvez plus le lire, vous voyez des formes et des écarts plutôt que des lettres.

4. 4

   Floutez ou plissez les yeux

   Un léger flou transforme les espaces en taches grises. Toute tache nettement plus claire ou plus sombre que ses voisines est une paire à corriger.

5. 5

   Vérifiez en petit et en grand

   Regardez le mot à la taille où il sera utilisé, et à la plus petite taille où il apparaîtra. Un logotype crénagé seulement à la taille d’une affiche peut se boucher à celle d’un favicon.

6. 6

   Laissez-le et regardez à nouveau

   Revenez après une pause. Le crénage à l’œil dérive si l’on regarde trop longtemps, et des yeux frais repèrent la paire trop serrée.

La plupart des outils de design permettent de créner en plaçant le curseur entre deux lettres et en poussant avec un raccourci clavier. Dans les applications Adobe, l’unité est un millième d’em, donc une valeur de moins 40 rapproche la paire de 4 % de la taille du texte, quelle que soit cette taille.

Crénage métrique ou optique

De nombreux outils de mise en page offrent deux modes automatiques. Le crénage métrique utilise les paires que le créateur de la police a intégrées. Le crénage optique les ignore et calcule l’espacement à partir des contours de chaque lettre. Le métrique est le meilleur choix par défaut pour une police bien faite, car une personne a pris ces décisions. L’optique peut sauver une police à la table pauvre ou absente, et aide quand vous mélangez deux polices dans un mot.

Le crénage en CSS

Les navigateurs appliquent automatiquement le crénage d’une police pour la plupart des textes, mais vous pouvez le rendre explicite. La propriété font-kerning active ou désactive les paires intégrées. Le CSS n’a aucune propriété pour ajuster une paire précise : pour un titre ou un logo isolé, on enveloppe donc généralement une lettre dans un span et on la déplace avec une marge négative ou un espacement de lettres.

/* Use the font's own kerning pairs everywhere */
body {
  font-kerning: normal;
}

/* Hand kerning one pair in a large headline: <h1>A<span class="k-av">V</span>A</h1> */
.k-av {
  margin-inline-start: -0.06em;
}

/* Monospaced code should never be kerned */
code, pre {
  font-kerning: none;
}

Si vous voulez changer l’espacement d’une ligne entière plutôt que d’une paire, c’est l’approche, réglée avec letter-spacing. Approche et crénage explique comment les deux fonctionnent avec l’interlignage, et l’espacement des lettres donne des valeurs de départ pour les capitales, les étiquettes et les titres.

Pour aller plus loin sur les grands textes qui paraissent voulus, voyez les polices d’affichage et les bases de la typographie. Sur un dégradé ou un fond texturé, l’espacement n’est que la moitié de la lisibilité : un mot bien crénagé peut encore se défaire là où la couleur derrière lui change. Un Mark Gradiently place sa zone la plus calme derrière vos mots et choisit une encre claire ou foncée ligne par ligne, si bien qu’un titre soigneusement espacé se lit régulièrement de sa première à sa dernière lettre.