Cette page a été traduite avec l'aide d'une IA. L'original en anglais fait foi.
La longueur de ligne — la mesure, ou justification, dans les termes traditionnels — est la largeur d'une colonne de texte comptée en caractères. L'édition de 2005 recommandait 55 à 65 caractères par ligne, soit environ dix à douze mots, et avertissait que la lecture à l'écran était plus fatigante que sur papier, si bien que des lignes plus courtes et des paragraphes plus petits étaient plus sûrs. De tout ce que contenait la recherche originale, c'est cette recommandation qui a le mieux résisté. Le consensus typographique sur la mesure confortable est stable depuis plus d'un siècle de pratique de l'imprimé et a été réaffirmé à maintes reprises pour les écrans. Ce qui a changé, ce n'est pas le nombre, mais la machinerie qui l'entoure : le web dispose désormais d'unités qui expriment la mesure directement, de normes qui la bornent, et de fenêtres d'affichage que l'original n'aurait pas pu imaginer.
Ce qui a changé depuis 2005
En 2005, contraindre la longueur de ligne signifiait des largeurs fixes en pixels devinées à partir d'un caractère moyen. Le CSS moderne exprime la mesure dans les termes du texte lui-même : l'unité ch équivaut à la chasse du glyphe zéro dans la police courante, ce qui en fait un substitut convenable de la largeur moyenne des caractères. Une seule déclaration — max-width: 65ch — encode la recommandation centrale de ce chapitre, et elle s'adapte automatiquement quand la police, le corps ou la préférence de l'utilisateur changent. C'est la ligne de CSS liée à l'accessibilité la plus utile qu'un designer puisse écrire. Notez que ch est une approximation : une colonne de 65ch produit généralement un peu plus de 65 caractères réels en texte proportionnel, le zéro étant plus large que la moyenne. Traitez-la comme une cible, non comme une garantie, et vérifiez de vrais paragraphes.
Les normes encadrent désormais la plage. Le critère de succès 1.4.8 Présentation visuelle des WCAG (niveau AAA) spécifie qu'un mécanisme doit être disponible pour que les blocs de texte ne dépassent pas 80 caractères de large (40 pour les écritures CJC). Quatre-vingts est un plafond, pas une cible — le critère définit le point où l'atteinte à la lisibilité devient un enjeu d'accessibilité, tandis que la zone de 55–65 reste celle où le confort culmine. Une colonne qui plafonne autour de 65–70ch satisfait à la fois la recommandation et le vieux consensus du métier.
L'autre contrainte nouvelle joue dans le sens opposé. Le critère de succès 1.4.10 Redistribution (niveau AA, WCAG 2.1 et 2.2) exige que le contenu se redistribue dans une fenêtre de 320 pixels CSS de large — l'équivalent d'une page de bureau zoomée à 400 % — sans défilement bidimensionnel. En 2005, le risque était des lignes trop longues ; en 2026, un risque égal réside dans les mises en page qui refusent de raccourcir. Les colonnes à largeur fixe, les dispositions côte à côte qui ne s'empilent jamais et les éléments à largeur minimale rigide imposent tous un défilement horizontal à 320 px, ce qui constitue à la fois un échec de conformité et une véritable barrière : lire un texte qui exige de défiler latéralement à chaque ligne compte parmi les expériences les plus punitives que rapportent les utilisateurs malvoyants. À 320 px avec un texte courant de 16 px, les lignes tournent autour de 30 à 40 caractères. C'est en dessous de la zone de confort, et ce n'est pas grave — les lignes courtes ralentissent légèrement la lecture mais ne la brisent pas, tandis que le défilement horizontal la brise complètement. Concevez la mesure comme un maximum, jamais comme un minimum.
Pourquoi la plage fonctionne
La stabilité de la recommandation 55–65 reflète la mécanique de la lecture. Les lignes longues allongent le balayage de retour — le bond de l'œil vers le début de la ligne suivante — et multiplient les erreurs de doublement, où le lecteur atterrit sur la mauvaise ligne ; elles exigent un surcroît d'interlignage pour compenser. Les lignes très courtes font entrer trop peu de mots dans l'aperçu de chaque fixation, imposent des changements de ligne incessants et hachent les phrases contre leur structure grammaticale. La recherche sur la lisibilité complique le tableau d'une manière intéressante : certaines études sur écran ont constaté que des lignes plus longues pouvaient produire des vitesses de lecture supérieures, sans doute en réduisant le nombre de coûteux balayages de retour — et pourtant les lecteurs préfèrent systématiquement les lignes modérées et les jugent plus confortables, et c'est le confort qui décide si l'on continue à lire. Pour la lecture soutenue, la préférence et la moindre fatigue plaident pour la mesure modérée, et c'est ce que ce chapitre continue de recommander.
L'interdépendance avec l'interlignage, traitée au chapitre précédent, mérite d'être répétée sous forme de règle unique : si la mesure doit s'allonger, ajoutez de l'interlignage. Une ligne de 75 caractères à un interlignage de 1,6 reste lisible ; la même ligne à 1,3 invite au doublement.
La mesure adaptative en pratique
Le motif moderne combine trois ingrédients. Une colonne de contenu avec un max-width d'environ 60–70ch établit la mesure idéale sur les grands écrans. Un remplissage horizontal fluide laisse la colonne respirer jusqu'aux fenêtres étroites sans jamais provoquer de défilement horizontal. Et si la typographie fluide est de la partie — des corps de texte qui suivent la fenêtre via clamp() — rappelez-vous que la mesure se compte en caractères, non en pixels : parce que ch suit le corps de la police, un max-width en ch grandit avec le texte et maintient le nombre de caractères à peu près constant, ce qui est précisément le comportement recherché.
Un revirement par rapport au texte original : l'édition de 2005 conseillait d'éviter la césure dans le texte courant. Avec une composition au fer à gauche et des mesures généreuses, la césure est effectivement inutile. Mais aux mesures étroites qu'exige la redistribution, les mots longs d'un texte sans césure créent des drapeaux béants ou débordent purement et simplement. Activer hyphens: auto (avec l'attribut lang correct, la césure étant pilotée par dictionnaire) est désormais une bonne pratique pour le texte courant qui doit survivre aux colonnes étroites. Associez-le à text-wrap: pretty là où c'est pris en charge, pour de meilleures décisions de coupure.
Enfin, le conseil de l'original sur la longueur des paragraphes tient toujours et a gagné en autorité : des paragraphes plus courts facilitent le repérage sur lequel comptent les lecteurs d'écran, les lecteurs pressés et les personnes ayant des difficultés d'attention ou de mémoire. WCAG 1.4.12 attend en outre que le contenu tolère un espacement de paragraphes augmenté par l'utilisateur ; évitez donc les mises en page qui supposent que les paragraphes s'empilent à une hauteur exacte.
En CSS
article {
max-width: 65ch; /* 45–75 characters; ~65 is the sweet spot */
margin-inline: auto;
padding-inline: 1rem; /* fluid gutter at every width */
}
/* Test at a 320px viewport: no horizontal scrolling (WCAG 1.4.10) */Recommandations
- Visez 55 à 65 caractères par ligne pour le texte courant ; traitez 80 comme la limite extérieure selon WCAG 1.4.8.
- Implémentez la mesure avec max-width en unités ch (environ 60–70ch) sur la colonne de contenu.
- Assurez-vous que le contenu se redistribue dans une fenêtre de 320 px sans défilement horizontal (WCAG 1.4.10) ; ne fixez jamais de mesure minimale.
- Augmentez l'interlignage quand la mesure s'allonge ; les deux réglages forment une seule décision.
- Activez hyphens: auto avec un attribut lang correct pour que les colonnes étroites coupent proprement, et ajoutez text-wrap: pretty là où c'est pris en charge.
- Avec la typographie fluide, gardez la mesure en unités relatives aux caractères afin que la longueur de ligne reste stable quand le corps du texte varie.
- Gardez des paragraphes courts ; vérifiez que les mises en page tolèrent un espacement de paragraphes accru au titre de WCAG 1.4.12.