2.2.1Choisissez un interlignage correspondant à la police, au texte et à la longueur de ligne
“L’espacement vertical est mesuré différemment (de l’espacement horizontal). Il faut non seulement choisir les dimensions générales – la profondeur de la page ou de la colonne – mais aussi une unité rythmique de base. Cette unité est l’interlignage, la distance entre la base d’une ligne et la suivante.”
Le contrôle de l’interlignage est obtenu en CSS par la propriété line-height. Par exemple, on peut donner 3 points d’interlignage à un texte en 12 points de la façon suivante :
p {
font-size: 12pt;
line-height: 15pt
}
Mais ceci est un mauvais exemple car l’interlignage ne devrait jamais être appliqué en utilisant les points ou les pixels comme unités de mesure. Dans l’exemple qui précède, lorsque le texte est re-dimensionné par le navigateur, la taille des caractères augmente (jusqu’à 18 points par exemple), mais l’interlignage peut ne pas être pris en compte par cette mise à l’échelle et rester à 18 points. Les lignes de texte pourraient alors se superposer.
Une meilleure façon de faire est d’utiliser une particularité de la propriété line-height : c’est la seule propriété CSS qui accepte des valeurs numériques différentes de zéro sans unités. L’exemple précédent pourrait être codé comme suit :
p {
font-size: 12pt;
line-height: 1.25
}
Dans cet exemple, la valeur de line-height est un multipliant : 12pt x 1.25 = 15pt. Cette méthode est beaucoup plus fiable car l’interlignage restera ainsi toujours proportionnel à la taille des caractères. L’interlignage peut être déclaré dans la propriété font en utilisant une abréviation connue des typographes :
p {
font: 12pt/1.25 “Minion Pro “, “Minion web”, serif
}
Notez que certains navigateurs ajoutent par défaut un léger interlignage: Safari et Internet Explorer par exemple, alors que d’autres comme Camino ou Firefox n’en ajoutent pas. Le texte sur le web bénéficie presque toujours d’une augmentation de l’interlignage, et des valeurs supérieures à 1.3 sont assez communes (cette page a un interlignage de 1.5 par exemple).
Contrairement à ce qu’il se passe dans l’impression mécanique, où une ligne de plomb est ajoutée sous une ligne pour créer un espacement, l’espace ajouté aux lignes sur le web se réparti de façon égale entre le haut et le bas de la ligne. Pour illustrer cela, l’exemple suivant a une line-height de 3 et montre le texte placé entre les deux lignes horizontales qui définissent le bloc texte.
Un interlignage négatif, soit un line-height de valeur inférieure à 1, peut être utilisé pour des parties de texte très courtes, tant que les ascendantes et les descendantes des lettres n’entrent pas en collision. Par exemple :
p {
font-size: 1.5em;
line-height: 0.85em;
text-indent: -0.5em
}
d’interlignage négatif