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