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 :

Washington and Toronto

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.

Sommaire

  1. 2Rythme & proportion
    1. 2.1Horizontalement
      1. 2.1.1Définissez l'espace mot en fonction de la taille du caractère et de son interlettrage naturel
      2. 2.1.2Établissez une longueur de ligne confortable
      3. 2.1.3Choisissez la justification en fonction du texte et de la page
      4. 2.1.4Utilisez une valeur d’espace entre les phrases
      5. 2.1.5N’ajoutez pas - ou alors très peu - d’espace dans une suite d’initiales
      6. 2.1.6Espacez toutes les suites de capitales et petites capitales, ainsi que les longues suites de chiffres
      7. 2.1.7N’augmentez pas l’interlettrage des bas de casse sans raison
      8. 2.1.8Crénez de façon régulière et légère ou pas du tout
      9. 2.1.9N’altérez pas les largeurs, les formes ou les lettres sans raison
      10. 2.1.10N’éloignez pas de trop les éléments apparentés
    2. 2.2Verticalement
      1. 2.2.1Choisissez un interlignage correspondant à la police, au texte et à la mesure
      2. 2.2.2Augmentez ou diminuez les transitions verticales avec une valeur constante
    3. 2.3Blocs & paragraphes
      1. 2.3.1Justifiez à gauche le premier mot du premier paragraphe
      2. 2.3.2Dans un texte continu, donnez à tous les paragraphes suivant le premier une indentation d’au moins un en.
      3. 2.3.3Séparez les citations du flot du texte
      4. 2.3.4Entrez l’alinéa ou centrez un bloc de vers
    4. 2.4Césure & pagination
      1. 2.4.1À la fin d’une ligne comportant une césure, laissez au moins deux caractères avant et au moins trois après
      2. 2.4.3Évitez les césures sur trois lignes consécutives
      3. 2.4.5Appliquez les césures en respectant les règles de la langue utilisée
      4. 2.4.6Ecrivez les numéros courts et les expressions mathématiques avec des espaces insécables
      5. 2.4.8Ne commencez jamais une page avec la dernière ligne d’un paragraphe
  2. 3Harmonie & contrepoint
    1. 3.1Dimension
      1. 3.1.1Ne composez pas sans une règle
    2. 3.2Chiffres, capitales & petites capitales
      1. 3.2.1Utilisez des titling figures en capitales, et des text figures en toute autre circonstance