Enlarge your police
Rien à voir avec les spams de Viagra. Non. Sous ce titre un peu malicieux, je tenais à vous parler d’une chose que je ne supporte plus : les tailles de texte minuscules dans les pages html. Cette impression d’avoir sous les yeux le dictionnaire Édition Larousse en lisant un article de blog.
Pourtant je ne pense pas qu’il soit plus difficile de lire sur un écran que de lire un livre. Il suffit de copier la façon dont les livres mettent en page le texte.
Pour être un peu plus précis, le problème se situe souvent sur le nombre de caractères que contient une ligne de texte. La taille de la police sera donc à priori proportionnelle à la largeur de son conteneur.
Être lu comme on lit un livre
Partons d’un constat simple : je suppose que pour vous aussi il est plus facile de lire un bouquin que de lire pendant pas mal de temps sur votre écran d’ordinateur. Le premier argument pour ça est de dire que c’est l’écran qui fatigue les yeux. Pour moi la vraie raison est la taille minuscule des typos sur le net.
Depuis plusieurs jours j’ai une obsession. Je compare les articles de blog à des livres de ma bibliothèque. Et souvent je vois la même chose : on est largement en dessous des 16px par défaut des navigateurs. À croire que les designers cherchent à mettre le plus d’informations possible dans le moins d’espace possible. Ça peut marcher pour quelques applications web mais pas pour une longue lecture.
Le nombre optimal de caractères par lignes
Tout est une histoire de rythme. Si une ligne est trop longue, le lecteur aura du mal à bien voir où une ligne commence et termine. Ça sera plus difficile de trouver la prochaine ligne sur de long bloc de texte. Pas top pour se concentrer dessus.
Inversement, des lignes trop courtes cassent le rythme de lecture. Elle se retrouve artificiellement accélérée et le lecteur sautera parfois des mots (pouvant être important à la compréhension).
Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.— The Elements of Typographic Style Applied to the Web *
La bonne pratique est donc d’avoir environ 66 caractères par lignes, en comptant les espaces aussi. Le css avec les media-queries deviennent indispensables sur une page fluide, la largeur des colonnes de texte pouvant changer selon la résolution.
Je dois d’ailleurs améliorer pas mal ça sur mon blog.
Autres considérations
Ne pas hésiter à utiliser des interlignes amples dans vos textes. En utilisant la propriété css line-height avec un coefficient sans unité. Par exemple 1.5 est une bonne base, à ajuster suivant la police.
Les nouveaux paragraphes doivent être bien marqués. On peut utiliser des lettrines, de l’indentation, un pied-de-mouche (❡) ou simplement un saut de ligne.
Éviter la justification sur des colonnes de textes minces. Mais généralement la justification sur le web ne fonctionne pas. À cause du support des césures encore aléatoire, du manque de crénage (kerning) automatique et des ligatures (on y vient avec Firefox †).
Enfin les polices serifs facilitent la lecture. Boudées pendant un temps à cause des résolutions assez basses de nos écrans, elles sont parfaitement utilisables de nos jours.
Conclusion
Voilà pourquoi j’ai augmenté la taille du texte ici. Si votre navigateur à une taille de police de 16px par défaut, alors ce texte devrait faire 20px. Et si vous avez lu mon article jusque ici, j’aurai gagné une partie de mon pari.
Et promis j’arrête de vous faire chier avec la typographie avant un bout de temps.
❧
