Longueur de ligne : la règle des 45–75 caractères
Faites une petite expérience avant de lire la moindre règle. Agrandissez votre navigateur sur un grand écran et ouvrez une page qui laisse le texte occuper toute la largeur de la fenêtre — un vieux site de documentation ou un README brut fait généralement l’affaire. Lisez quatre ou cinq lignes et observez ce qui se passe à la fin de chacune : votre œil effectue un long trajet en diagonale jusqu’au bord gauche, et à l’arrivée il hésite — relisant parfois la ligne qu’il vient de terminer, atterrissant parfois deux lignes plus bas. La police n’est pas en cause. Les lignes sont tout simplement trop longues pour que le trajet de retour atterrisse de façon fiable.
La règle : le texte courant se lit le mieux entre 45 et 75 caractères par ligne, espaces compris, et environ 66 caractères constituent le point idéal classique. Ces chiffres viennent de la tradition typographique de l’imprimé — The Elements of Typographic Style de Robert Bringhurst est la référence habituelle pour l’idéal de 66 caractères — et ils font de la longueur de ligne l’une des décisions les plus mesurables et les moins dépendantes du goût en typographie. Cet article fait partie de notre guide de typographie ; il explique pourquoi la règle existe, comment atteindre l’intervalle en CSS, et quels textes en sont dispensés.
Pourquoi la longueur de ligne influence-t-elle la lisibilité ?
La lecture ne glisse pas le long d’une ligne — l’œil saute d’un point de fixation à l’autre, de plusieurs caractères à chaque bond. Le saut qui compte ici est le plus grand : le balayage de retour, le trajet en diagonale de la fin d’une ligne au début de la suivante. Ce trajet a une petite cible — un interligne plus bas, toute la largeur de la colonne en arrière — et son taux d’erreur croît avec la distance parcourue. Sur les lignes longues, le balayage atterrit trop court et l’œil relit la ligne qu’il vient de quitter (le doublement de l’expérience ci-dessus), ou atterrit trop loin et saute une ligne. C’est un résultat constant de la recherche sur la lecture, non une préférence de designer : plus la ligne est longue, plus le trajet de retour manque souvent sa cible.
Les lignes courtes échouent dans l’autre sens. Une ligne de 30 à 35 caractères ne contient que quatre ou cinq mots, si bien que des expressions qui vont ensemble sont coupées d’une ligne à l’autre, et l’œil passe une grande partie de son temps à faire demi-tour au lieu d’avancer. La compréhension survit, mais le rythme devient saccadé et la lecture devient laborieuse.
L’intervalle de 45 à 75 est simplement la plage où les deux modes d’échec restent rares : des lignes assez longues pour porter une expression complète, assez courtes pour que le balayage de retour reste précis.
Comment contrôler le nombre de caractères par ligne ?
La longueur de ligne est un quotient : caractères par ligne = largeur de
colonne ÷ largeur moyenne des caractères. Vous contrôlez rarement le second
terme — il dépend de la police et de la taille du texte — donc le levier utile
est le premier : la largeur de la colonne de texte, ce qui en CSS revient à
max-width sur le conteneur du texte.
L’unité la plus directe pour cela est ch. Un ch équivaut à la largeur du
chiffre 0 dans la police et la taille courantes, ce qui, dans la plupart des
polices de texte proportionnelles, est proche de la largeur moyenne des
caractères. La règle s’implémente donc en une seule ligne :
article p {
max-width: 65ch;
}Ce n’est pas exact — le 0 est généralement un peu plus large que le caractère
moyen réel, si bien que 65ch contient souvent plutôt 70 caractères — mais
cela place la colonne à l’intérieur de l’intervalle, et cela se remet à
l’échelle automatiquement lorsque la taille de la police change, ce qu’une
valeur en pixels ne fait pas.
Le levier structurel est le système de colonnes lui-même. Les colonnes de texte d’une grille de mise en page sont, entre autres, un budget de longueur de ligne : choisissez des étendues de colonnes de sorte que le texte courant tombe dans l’intervalle à votre point de rupture le plus large, et chaque point de rupture plus étroit hérite d’un nombre sûr.
Pourquoi le responsive complique-t-il la longueur de ligne ?
Parce que les écrans ont grandi plus vite que la lecture. À 16px, un caractère moyen occupe environ 8px de large, si bien qu’un paragraphe s’étalant sur une fenêtre de 1440px atteint environ 180 caractères par ligne — plus du double du haut de l’intervalle. C’est cela, plus qu’aucune préférence esthétique, qui justifie l’existence même des conteneurs à max-width et des grilles de colonnes : une image d’en-tête pleine largeur peut couvrir la fenêtre, mais les paragraphes ont besoin d’une barrière. Sur les grands écrans, la largeur sans contrainte est l’échec par défaut, pas un cas limite.
Juger le nombre par rapport à une vraie colonne vaut mieux que l’estimer à partir de la fenêtre. La vue typographie de Scale Composer comporte une surimpression de colonne en lecture seule qui reproduit le point de rupture le plus large des réglages de grille : ouvrez le spécimen de texte courant avec la surimpression activée et lisez votre propre taille de texte par rapport aux largeurs de colonne réelles — l’instant où une ligne déborde de l’intervalle confortable est visible directement dans le texte en continu.
La règle s’applique-t-elle à tous les types de texte ?
Non — elle protège la lecture continue, et une bonne partie du texte d’interface n’en relève pas :
| Texte | Intervalle | Pourquoi |
|---|---|---|
| Texte courant, une seule colonne | 45–75 caractères | le balayage de retour doit atterrir de façon fiable, ligne après ligne |
| Texte courant, plusieurs colonnes | 45–60 caractères | avec une colonne voisine qui rivalise pour la zone d’atterrissage, des lignes plus courtes gardent l’œil dans sa propre colonne |
| Légendes, libellés d’interface, boutons | dispensé | généralement une seule ligne — pas de balayage de retour, rien à protéger |
| Titres | dispensé | quelques mots sont perçus comme une forme, non parcourus linéairement |
Les exceptions comptent autant que la règle : imposer un minimum de 45 caractères à un libellé de bouton de trois mots résout un problème que le libellé n’a pas.
À quoi ressemble le même paragraphe à 40, 66 et 120 caractères ?
Prenez un paragraphe de 70 mots — environ 420 caractères espaces compris — composé à 16px, où le caractère moyen fait environ 8px de large :
- À ~40 caractères (une colonne de 320px) le paragraphe s’étend sur environ onze lignes. Presque aucune phrase ne survit intacte à une ligne ; les expressions se coupent en pleine idée, le bord droit irrégulier est profond, et l’œil fait demi-tour tous les quatre ou cinq mots. Le texte se lit par fragments.
- À ~66 caractères (une colonne de 530px) il s’étend sur environ sept lignes. La plupart des lignes portent une expression complète, le balayage de retour de ~500px atterrit de façon fiable, et le paragraphe se lit par expressions plutôt que par fragments. C’est le réglage que la règle protège.
- À ~120 caractères (une colonne de 960px) il s’étend sur environ quatre lignes — et chaque balayage de retour parcourt désormais près de mille pixels. C’est là qu’apparaissent les lignes doublées et sautées de l’expérience du début, et là où les lecteurs se mettent discrètement à survoler au lieu de lire.
Même paragraphe, même police, même taille. La colonne à elle seule décide laquelle des trois expériences le lecteur obtient.
Vérifiez vos propres colonnes
L’intervalle ne devient une conviction que face à votre propre mise en page. Partez de l’extrême cassé : chargez un spécimen dont les lignes dépassent largement l’intervalle, sentez le balayage de retour se dégrader dans un texte que vous pouvez éditer, puis rétrécissez le conteneur jusqu’à ce que le nombre franchisse 75 vers le bas et se stabilise près de 66 — ouvrez le spécimen trop large et ramenez-le dans l’intervalle.