CSS : on reprend tout à zéro ! (épisode 4)
Par Joe Gillespie
Cet article est le quatrième d'une série qui en compte 15. Chaque épisode sera publié bimensuellement dans nos pages.
Quatrième étape : plus de mise en forme pour le texte
Avant d'aller plus loin dans la mise en forme du texte, c'est une bonne idée de vous familiariser avec quelques termes basiques de typographie.
Quand nous parlons de la taille de la police, ou font-size en CSS, cela fait référence à la distance entre le sommet d'une lettre majuscule comme « A » jusqu'au bas d'une lettre à jambage comme « p » ou « y ». Il peut aussi y avoir un léger espace supplémentaire appelé « interlignage ». Ce mot vient du fait que les imprimeurs utilisaient des petites lattes de plomb entre les lignes pour leur donner plus d'espace. (NdT : En anglais, « interlignage » se dit « leading » et le plomb se traduit « lead ».)
Aujourd'hui, on n'utilise plus de plomb. On dit juste qu'il y a un certain espace entre la base d'une ligne de caractères et la suivante. L'interlignage est donc la hauteur du caractère plus cet espace supplémentaire. Dans une définition CSS, nous pourrions dire line-height: 180%; avec la valeur spécifiée en pourcentage, em ou pixels (px). On reviendra sur l'interlignage un peu plus loin.
Vertical-align vous permet d'ajuster la ligne de base pour des lettres individuellement par rapport au reste du texte mais relève plutôt pour un usage spécialisé (comme les formules mathématiques), et on ne va pas s'étendre sur son cas ici. Dans l'exemple basique ci-dessous, j'aurais pu utiliser la balise <sup>2</sup> mais le recours à CSS permet plus de contrôle.
E=MC2
Les CSS nous donnent également le contrôle sur l'interlettrage (ou crénage), c'est-à-dire l'espace entre chaque caractère ou mot.
C'est très pratique pour ajouter un style visuel à un gros titre.
UN TITRE ESPACÉ.
letter-spacing: 0.5em; word-spacing: 0.5emPenser à la lisibilité
Avant que les navigateurs ne supportent aussi bien les CSS qu'à l'heure actuelle, il y avait une caractéristique essentielle qui manquait au formatage du texte en HTML, et que maîtrisait même la plus modeste des machines à écrire , l'interlignage. Quand il y a trop peu ou pas du tout d'espace entre les lignes, elles deviennent déprimantes et difficiles à lire. Et plus les lignes s'allongent, plus le problème s'accentue.
Des lignes trop courtes
interrompent trop
le schéma de lecture
de l'œil de la gauche
vers la droite.
Des lignes plus longues que la normale sont aussi fatigantes et le début de la ligne suivante devient difficile à localiser.
Pour une lecture confortable, une ligne de texte devrait être de la même longueur que une fois et demie à deux fois la longueur d'un alphabet en minuscules. Ce qui signifie entre quarante et soixante caractères ou huit à dix mots.
Si les lignes sont plus longues, un interlettrage plus grand aide à la lisibilité. Au début, beaucoup de pages web avaient leurs textes qui s'étendaient d'un bord à l'autre de la fenêtre, sans se soucier de la taille d'écran. Les écrans sont devenus plus larges, mais la pratique continue chez certains.
Par défaut, il y a un petit interlettrage dans les paramètres de texte des navigateurs. C'est approximativement 20 % de la taille de la police (hauteur d'une majuscule plus le jambage inférieur). Avec CSS vous pouvez avoir autant d'interlignage que vous le souhaitez. Si vous utilisez des tailles de polices relatives, vous pouvez le spécifier comme un pourcentage de la taille de la police. Exemple : font-size: 1em; line-height: 1.5em (ce qui équivaut à 150%). Si vous utilisez des tailles de polices fixes, vous pouvez indiquer quelque chose comme : font-size: 11px; line-height: 16px.
La définition pour cette page (NdT: la page originale de l'auteur) est font-size: small; line-height: 180% ce qui correspond à peu près à une fois et demie l'interlignage dans un traitement de texte ou une ancienne machine à écrire. Ainsi, dans cet exemple le haut de la page n'a pas de marges et le texte n'a pas de paramètres d'interlignage. Les spécifications générales pour l'élément body de la page fournissent la famille de police, la taille de la police et les couleurs pour les caractères et le fond de la page.
body {
color: #5d665b;
font-size: small;
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #e8eae8
}Le bloc de texte en bas de l'exemple est encapsulé dans une division de la page <div>...</div>. C'est comme une page dans une page. Elle possède une marge gauche de 250px, une marge droite de 200px, et l'interlignage est défini à 180%. Ces styles sont ajoutés aux spécifications générales de l'élément body par un procédé appelé « héritage ». Exactement comme un enfant qui peut hériter de certaines caractéristiques de ses parents, puis à son tour les transmettre à ses enfants, certains styles CSS « cascadent » quand ils sont imbriqués dans d'autres styles.
<div style="margin-left: 250px; margin-right: 200px;
line-height: 180%">...</div>
Les divisions de page (<div>) sont une part très importante de CSS et nous les étudierons plus en détail la prochaine fois.
Le contraste
Contrairement à une page imprimée que vous lisez par la réflexion de la lumière, la page sur un écran d'ordinateur est lumineuse. La différence de luminosité entre le texte noir et la page blanche est d'une amplitude beaucoup plus grande sur un écran que sur une page imprimée. Quand on lit de grandes zones de texte noir sur fond blanc, c'est un peu comme quand on se promène sous un grand soleil sans lunettes noires. On finit peut-être par se protéger les yeux en mettant sa main en visière, mais par défaut on a plutôt tendance à plisser des yeux et à se sentir mal à l'aise sans vraiment savoir pourquoi.
Réduire le contraste du texte des pages web permet une lecture plus confortable et moins stressante. Cela dit, si vous diminuez trop le contraste, vous commencez à rendre les choses difficiles pour les gens ayant une faible vision.
Dans un article comme celui-ci (NdT: la page originale de l'auteur) où il y a beaucoup de texte à lire et où le lecteur est amené à rester quelque temps devant son écran, il est important d'offrir un environnement aussi confortable que possible. J'ai donc utilisé une teinte de fond légère et des couleurs douces.
http://www.wpdfd.com/editorial/basics/cssbasics4.html