Design avec longs textes

Un guide, une étude de cas ou un long article perdent leurs lecteurs quand la mise en page fatigue l'œil : lignes trop longues, texte serré, pas de repères pour survoler. Cette page rassemble les réglages qui rendent un texte long lisible à l'écran, les éléments qui aident à s'y repérer, et un exemple marquant de mise en page éditoriale conçue pour le Web.

C'est un réglage souvent négligé. Au-delà d'une certaine longueur, l'œil a du mal à retrouver le début de la ligne suivante. Le typographe Robert Bringhurst, dans The Elements of Typographic Style, considère qu'une ligne de 45 à 75 caractères est satisfaisante pour un texte suivi. Les règles d'accessibilité WCAG (critère 1.4.8, niveau AAA) fixent une largeur maximale de 80 caractères.

En pratique : limitez la largeur de la colonne de texte, même sur un grand écran. Un texte qui s'étale sur toute la largeur d'un grand écran devient très pénible à lire.

Les navigateurs affichent par défaut le texte courant à 16 pixels : gardez au moins cette taille pour le corps d'un long article.

Le critère WCAG 1.4.8 recommande un interlignage d'au moins 1,5 fois la taille du texte, et un espace entre paragraphes au moins 1,5 fois plus grand que l'interlignage. Un texte trop serré forme un bloc gris décourageant ; un texte aéré invite à la lecture.

• Alignez à gauche, sans justifier : la justification crée des espaces irréguliers entre les mots (le même critère WCAG demande un texte non justifié). Réservez le centrage aux titres et aux phrases courtes (voir peut-on centrer du texte sur le Web ?).

• Soignez le contraste : du gris clair sur fond blanc est élégant sur une maquette et pénible à lire. Le critère WCAG 1.4.3 (niveau AA) demande un rapport de contraste d'au moins 4,5:1 pour le texte courant.

Sur le Web, beaucoup de lecteurs survolent une page avant de décider de la lire. Un long texte doit offrir des points d'entrée :

• Un chapeau de deux ou trois phrases qui dit ce que le lecteur va trouver ;

• Un sommaire cliquable en tête des pages longues ;

• Des intertitres fréquents et explicites, qui résument la section plutôt que de jouer sur les mots ;

• Des paragraphes courts, une idée par paragraphe ;

• Des listes pour les énumérations, les étapes et les critères ;

• Du gras avec parcimonie, sur les quelques mots qu'un lecteur pressé doit retenir ;

• Des encadrés pour les avertissements, les définitions ou les exemples ;

• Des citations en exergue (une phrase forte reprise en grand) pour relancer l'attention dans un récit ou une interview.

Ces repères servent aussi le référencement : une hiérarchie claire de titres aide les moteurs de recherche à comprendre la page. Pour la logique d'organisation d'une page, voir concevoir les pages de votre site Web.

Dans un texte long, les images ne sont pas décoratives : elles marquent des pauses et illustrent ce que le texte décrit. Quelques principes :

• placez une image, un schéma ou une capture tous les quelques écrans, là où elle apporte une information ;

• alternez les largeurs (pleine largeur pour une image forte, largeur du texte pour une capture) ;

• ajoutez une légende quand l'image ne s'explique pas seule ;

• vérifiez le rendu sur téléphone : une image pleine largeur sur ordinateur peut devenir minuscule ou être coupée sur mobile (voir responsive).

En octobre 2012, le site musical Pitchfork a publié un long portrait de la chanteuse Bat for Lashes dans une mise en page pensée pour l'écran plutôt que copiée du magazine papier. Les photos en noir et blanc de Shawn Brackbill évoluent au fil du défilement et des citations isolées résument les paragraphes qui suivent. Selon un article du site Hypebot paru au même moment, le format a été largement salué par les designers ; l'article citait aussi un observateur pour qui il fonctionnait mal sur mobile, une limite qu'un projet actuel ne pourrait plus se permettre.

La page d'origine n'est plus en ligne chez Pitchfork, mais une copie est conservée par l'Internet Archive : la Cover Story Bat for Lashes archivée. Retenez-en l'intention plutôt que les effets : chaque élément visuel sert la lecture.

• Largeur du texte : avec un thème bloc, la largeur du contenu se règle dans les Styles de l'éditeur de site (Apparence > Éditeur) ; avec un constructeur comme Divi, limitez la largeur maximale du module de texte.

• Typographie : réglez taille, interlignage et polices une fois pour tout le site plutôt que bloc par bloc (voir le Full Site Editing).

• Sommaire : de nombreux thèmes et extensions génèrent un sommaire à partir des intertitres ; c'est utile au-delà de quelques écrans de texte.

1. Les lignes font-elles moins de 80 caractères sur grand écran ?

2. Le texte courant est-il à 16 pixels ou plus, avec un interlignage d'au moins 1,5 ?

3. Le texte est-il aligné à gauche, sans justification ?

4. Le contraste est-il suffisant (4,5:1 au minimum) ?

5. Un intertitre apparaît-il au moins tous les deux ou trois écrans ?

6. La page reste-t-elle lisible sur téléphone ?