2.2.2Espacez ou rapprochez les transitions verticales
“Titres, sous-titres, blocs de citation, notes de pied de page, illustrations, légendes et autres intrusions dans le texte créent des arythmies et des variations dans la régularité verticale de l’interlignage. Ces variations peuvent et devraient insuffler de la vie à la page, mais le texte principal doit aussi retomber sur ses pattes après chacune d’elles.”
L’espace vertical ajouté le plus fréquemment sur une page web est celui qui sépare deux paragraphes. Si le rythme de la page doit être maintenu, l’espacement entre les paragraphes doit être conjugué à l’interlignage de base. Par exemple, le texte de cette page a une taille de 14px avec une line-height de 1.428em, ce qui équivaut à un interligne de 20px. Pour préserver le rythme de base du texte, l’espacement vertical entre les paragraphes devrait être de 20px également. On obtient ce résultat en appliquant une top-margin et une bottom-margin égales à l’interlignage.
p {
line-height: 1.428;
margin-top: 1.428em;
margin-bottom: 1.428em
}
Il est important de noter que par défaut, les navigateurs appliquent aux paragraphes (et aux autres éléments tels que les listes ou les blocs de citation) un top-margin et un bottom-margin de 1em. Ceci implique que les margin doivent toujours être spécifiées par le designer.
Variations de la taille du texte
Lorsqu’il y a un changement dans la taille du texte, par exemple avec un titre ou avec des notes de marge, le texte résultant devrait avoir une hauteur qui soit un multiple de l’interlignage de base. Comme annoncé plus haut, le texte de cette page a des lignes de 18px de haut. Cela implique que toute diversion du texte devrait avoir une hauteur multiple de 18px. On obtient ce résultat en ajustant la line-height et les margin de concert.
Titres
Les sous-titres de cette page ont une taille de 14px. Afin que la hauteur de chaque ligne fasse 20px, la line-height devrait être définie à 20/14 = 1.428. De même, les margins au-dessus et au-dessous du titre doivent être ajustées. La tentation est de définir les margins des titres à 1em, ou de laisser le navigateur appliquer sa valeur par défaut, mais cela aurait pour résultat de briser le rythme de la page. Dans le cas de cette page, les margins du dessus et du dessous ont une valeur égale entre elles, et équivalent à la hauteur d’une ligne, soit 1.428em.
p {
line-height: 1.428;
margin-top: 1.428em;
margin-bottom: 1,428em;
}
Mais on peut aussi définir des margins asymétriques, tant que leur somme soit un multiple de la ligne de base de la page. Par exemple, un top-margin d’une ligne et demie pourrait être complétée par un bottom-margin d’une demie ligne, comme suit :
p {
line-height: 1.428;
margin-top: 2,142em;
margin-bottom: 0,714em;
}
Notes de marge
Les notes de marge (et les notes de pied de page en l’occurrence) ont souvent une taille de caractère inférieure à celle du texte principal. Ce texte plus petit devrait quand même rester dans les pas du texte principal, donc un calcul similaire à celui effectué pour les titres doit être effectué. Par exemple :
Ici un commentaire sur le passage en vis-à-vis de cette note
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Comme précisé plus haut, la taille du texte principal est de 14px, et son interlignage est de 20px. Les notes de marges ont une hauteur de caractère de 10px donc leur interlignage doit être revu à 20 / 10 = 2.0.
Images
Sur le web, les images en marge et dans le corps du texte principal sont presque toujours coupables d’interrompre le rythme de la page. Les mêmes règles devraient être appliquées aux images qu’aux titres : toute image et légende associée devraient avoir une hauteur multiple de l’interlignage de base. Par exemple, l’image sur cette page illustrant les margins asymétriques des titres a une hauteur de 200px – précisément une hauteur de 10 lignes.
Des problèmes pourraient apparaître lorsque la taille du texte de base serait amenée à changer, par exemple si le lecteur modifie la taille du texte par défaut de son navigateur. Dans cette situation, si l’image est laissée à ses dimensions naturelles, ou si ses dimensions ont été spécifiées en pixels, sa hauteur ne sera plus un multiple de l’interlignage de base. Ceci pourrait être évité si les dimensions de l’image étaient déclarées en ems plutôt qu’en pixels. Par exemple, l’image mentionnée ci-dessus pourrait avoir une hauteur définie à 200 / 14 = 14.285em (12px étant la hauteur de caractère du texte).
Dimensionner les images en ems plutôt qu’en pixels implique qu’elles pourront changer d’échelle en accord avec le texte. Cela aura cependant pour conséquence de dégrader la qualité de l’image de façon plus ou moins acceptable.