2.1.8Crénez de façon régulière et légère, ou pas du tout
“Le crénage – la modification de l’espace entre deux caractères pour une paire donnée – peut augmenter considérablement l’équilibre des espaces dans un mot tel que Washington ou Toronto, où les combinaisons Wa et To sont crénées.”
Il n’existe pour l’instant aucun mécanisme en HTML ou en CSS qui permettent de cibler le crénage d’un couple de lettres. En règle générale, le texte présenté sur le web ne nécessite pas de crénage car les fichiers de fontes contiennent les informations d’approches entre tel ou tel couple de lettres (tables de crénage). Ces tables sont généralement gérées par les systèmes d’exploitation. Les occasions où le crénage manuel serait utile est l’utilisation des grandes tailles, comme pour les titres, et en particulier lorsque des nombres, des italiques ou de la ponctuation sont présents.
Il est important de garder en tête que des paires de lettres dans une de vos fontes précisées dans la propriété font-family
pourraient avoir besoin de crénage, alors que les autres fontes n’en auraient pas forcément besoin. Dans ce cas, il est conseillé de ne pas créner, car trop de crénage est presque toujours pire que pas du tout.
Là où vous voudriez créner une paire de lettres, vous devez insérer un élément inline neutre, comme un span
, et lui appliquer la propriété letter-spacing
. Par exemple :
<span class=“kern”>W</span>ashington and <span
class=“kern”>T</span>oronto
.kern { letter-spacing: -0.1em }
Ce qui se traduit visuellement comme :
Notez que le span
a été placé autour de la première lettre et non autour de la paire. C’est parce que la propriété letter-spacing
ajoute ou enlève de l’espace après chaque lettre. Notez aussi que letter-spacing
est qualifiée en ems pour assurer que l’interlettrage sera appliqué de façon proportionnelle à la taille du texte.
De même que pour les suites de capitales, ajouter un span
à chaque fois que vous voulez créner une lettre s’avérera fastidieux, et les regular expressions pourraient vous venir à l’aide une fois de plus. Cette fonction php utilise des regular expression pour placer un span
dans toute string de ‘To’ ou ‘Wa’ :
$search = ‘/(T)(o) | (W)(a)/’;
$replace = ‘<span class=”kern”>$1$3</span>$2$4;
$text = preg_replace($search,$replace,$text);
Le futur
Le module de texte CCS3 pourrait détailler des propriétés kerning-mode
et kerning-pair-treshold
pour aider à contrôler le crénage, même si ces propriétés restent encore à définir.