2.1.1Définissez l'espace mot en fonction de la taille du caractère et de son interlettrage naturel

Si le texte est ferré à gauche, l'espace entre chaque mot doit être fixe et constant. Si le texte est justifié (les bords gauche et droit du bloc de texte sont droits), cet espace doit être souple. Dans tous les cas, la taille idéale d'un espace mot varie d'une circonstance à l'autre, en fonction de l'espacement des lettres, de la couleur, ou de la taille du caractère. Une fonte grasse ou généreuse en interlettrage nécessitera un espace mot plus important. Avec de plus grandes tailles, alors que la distance entre chaque lettre se trouve réduit, l'espace mot subit lui aussi cette diminution.”

En CSS, l'espace mot est défini par la propriété word-spacing dont la valeur par défaut est normal. Cette valeur est d'à peu près 0.25em, même si la valeur exacte dépend de l'information incluse dans le fichier de la fonte. Pour modifier l'espace mot, vous devriez spécifier une dimension en cadratins, ou «ems». Cette dimension est ajoutée à la valeur par défaut ; c'est à dire que la propriété word-spacing ne qualifie pas la valeur de l'espacement entre deux mots, mais une incrémentation de la valeur existante. Par exemple :

P {
  word-spacing:0.25em }
H1 {
  word-spacing:-0.125em }

Dans ce cas, l'espacement des mots dans un paragraphe est augmenté de 0.25em (le doublant donc) et celui du titre le plus fort est diminué de 0.125em (le réduisant de moitié).

Même si la théorie nous permet de spécifier le word-spacing en pixels ou autre unité de mesure autorisée, l'utilisation des ems est la seule façon de faire changer l'espacement entre les mots proportionnellement avec la taille du texte (quand les utilisateurs changent la taille de caractère par défaut de leur navigateur, par exemple).

Une explication des ems

Les ems s'appellent ainsi car ils représentent presque la taille d'un M majuscule (on prononce donc 'ème' ), même si 1 em est plus grand que cela. Voici comment Bringhurst les décrit :

l'em est une mesure variable. Un em est la distance égale à la force du caractère. A une taille de 6 points, un em vaut 6 points; à une taille de 12 points, un em vaut 12 points et à 60 points un em vaut 60 points. Un espace d'un em est donc proportionnellement identique à n'importe quelle taille.”

Pour illustrer ce principe dans un contexte CSS, considérons ces styles :

#box1 {
  font-size:12px;
  width:1em;
  height:1em;
  border:1px solid black }

#box2 {
  font-size:60px;
  width:1em;
  height:1em;
  border:1px solid black }

Ces styles seront rendus comme suit :

M
M

Notez que les deux boites ont une hauteur et une largeur d'un em, mais puisqu'elles ont deux tailles de caractère différentes, une des boîtes est plus grande que l'autre. Box1 a un font-size de 12px donc sa hauteur et sa largeur sont aussi de 12 px; de même, la force de caractère de box2 est donnée à 60px donc sa hauteur et sa largeur seront également de 60px.

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