La largeur de lecture est une décision de design

1 min de lecture

Une colonne de texte large paraît sereine en maquette. Puis quelqu’un y lit un article entier, se perd à chaque retour à la ligne et abandonne à mi-chemin.

Comptez les signes, pas les pixels

La bonne unité, c’est le nombre de signes par ligne. Les typographes citent en général une fourchette d’environ 45 à 90, et beaucoup s’arrêtent autour de 65 pour une lecture suivie.

Trois paragraphes composés à 40, 65 et 95 signes par ligne ; celui à 65 signes est mis en avant.
Le même paragraphe à 40, 65 et 95 signes par ligne. Source : Matthew Butterick, Practical Typography

Sur ce blog, le texte courant tient dans une colonne étroite limitée à 65 signes. Les titres peuvent s’étendre autant qu’ils veulent ; les paragraphes, non.

.prose {
  max-width: 65ch;
  font-size: 1rem;
  line-height: 1.6;
  hyphens: auto; /* exige le bon attribut lang */
}

L’interlignage suit la justification

Plus la ligne est longue, plus il faut d’espace entre les lignes pour que l’œil retrouve le début de la suivante. Avec une colonne de 65 signes, un interlignage autour de 1,5 fonctionne ; les titres peuvent être bien plus serrés.

  • Fixez la largeur en ch, pour qu’elle suive la police.
  • Gardez images et code dans la colonne de texte.
  • Vérifiez aussi la version française : elle est plus longue, et la césure dépend de lang.

Le lecteur ne devrait jamais remarquer la largeur de colonne. Seulement qu’il est arrivé au bout de l’article.

Vous construisez quelque chose et cherchez un designer qui sait aussi le livrer ? Écrivez-moi →