Cet article n’est pas un article. C’est le cas long du banc d’essai du gabarit, écrit le 7 août 2026 pour arbitrer la largeur de la colonne de lecture. Il reste en brouillon et n’a pas vocation à être publié. Il fait volontairement plus de deux mille mots, parce qu’une décision de largeur prise sur un texte de cinq cents mots ne veut rien dire : c’est précisément quand l’article devient long que la question du confort de lecture et celle de la longueur de défilement entrent en conflit.
Ce qui suit décrit les quatre décisions qui composent un gabarit d’article lisible : la mesure de lecture, la hiérarchie des titres, le traitement des médias, et la navigation dans un texte long. Chacune est illustrée par les blocs correspondants, de sorte que le document serve en même temps de texte de démonstration et de liste de contrôle.
La mesure de lecture, ou pourquoi une colonne large fatigue
La mesure de lecture est le nombre de caractères qu’une ligne de texte contient. C’est la grandeur la plus déterminante d’une page de texte courant, et de loin la moins intuitive : on croit spontanément qu’une ligne longue fait gagner du temps, puisqu’elle contient plus de mots. C’est l’inverse qui se produit.
À chaque retour à la ligne, l’œil effectue un mouvement de balayage vers la gauche pour retrouver le début de la ligne suivante. Ce mouvement est d’autant moins fiable que la ligne est longue : au-delà d’une certaine largeur, le regard ne retombe plus systématiquement sur la bonne ligne, et le lecteur relit ou saute une ligne sans s’en apercevoir. La fatigue vient de là, pas de la taille des caractères.
La fourchette retenue pour ce site est de soixante-cinq à soixante-quinze caractères par ligne. Elle n’a rien d’original : c’est la valeur que donnent la plupart des manuels de composition, et celle que retiennent les quotidiens qui composent sur plusieurs colonnes. Une colonne de journal fait rarement plus de quarante caractères, un livre de poche autour de soixante, un manuel technique jusqu’à quatre-vingts.
Pourquoi la borne s’écrit en em et jamais en pixels
Une borne de largeur écrite en pixels ment dès que la taille du texte change. Cinq cent quatre-vingt-dix pixels donnent soixante-douze caractères sur un corps de dix-huit pixels, mais quatre-vingt-douze sur un corps de quatorze. Une mention légale, une légende ou une note de bas de page, tous composés plus petit, sortent alors très au-delà de la fourchette sans que rien ne le signale.
Écrite en em, c’est-à-dire en multiples de la taille du texte qu’elle borne, la même règle devient invariante. La largeur moyenne d’un caractère vaut environ quarante-cinq centièmes de em dans la police de ce site : trente-trois em donnent donc environ soixante-douze caractères, quelle que soit la taille du corps et quelle que soit la largeur de l’écran.
- Une borne en pixels est juste pour une seule taille de texte.
- Une borne en
emest juste pour toutes, y compris quand le visiteur agrandit la police par défaut de son navigateur, ce qui est un critère d’accessibilité et pas une préférence. - Une borne posée sur le conteneur ne suffit pas dès que certains blocs doivent en sortir : elle descend alors sur chaque bloc, ce qui permet de faire une exception pour les images et les tableaux.
- Et la mesure elle-même doit être faite avec le bon instrument : diviser la largeur par la moitié du corps sous-évalue le résultat de près de dix pour cent, ce qui suffit à valider une page qui dépasse la fourchette.
L’image ci-dessus sort volontairement de la colonne de texte. C’est le second levier de mise en page d’un article long, et le sujet de la section suivante.
La hiérarchie des titres
Un article de deux mille mots ne se lit presque jamais en entier du premier coup. Il se parcourt d’abord en diagonale, et ce sont les titres qui décident si ce parcours aboutit ou non. Trois réglages font toute la différence, et ils sont tous les trois invisibles tant qu’on ne les compare pas côte à côte.
Le titre appartient au texte qui le suit
Un titre doit porter beaucoup d’air au-dessus de lui et peu en dessous. S’il est posé à égale distance du paragraphe qui le précède et de celui qui le suit, il flotte, et le lecteur qui parcourt la page ne sait pas si le paragraphe visible sous ses yeux appartient à la section en cours ou à la précédente. C’est le réglage que les thèmes ratent le plus souvent, parce qu’il ne se voit pas sur une capture d’écran isolée.
Deux niveaux d’un même palier ne sont pas deux sections
Quand un titre de niveau trois suit immédiatement un titre de niveau deux, sans paragraphe entre les deux, l’espace généreux prévu au-dessus du premier n’a plus lieu d’être : les deux titres forment un seul bloc d’annonce. Une règle dédiée réduit alors la marge, sinon le lecteur voit un trou au milieu de ce qui devrait se lire d’un souffle.
Le quatrième niveau change de police
Au-delà du troisième niveau, un serif de titre devient un bruit plus qu’un repère : à dix-neuf pixels, les empattements de Fraunces ne se distinguent plus assez du texte courant pour signaler un changement de niveau. Le quatrième niveau passe donc à la police de labeur, en graisse semi-grasse. C’est un cas où la cohérence apparente nuit à la lisibilité réelle.
Une hiérarchie de titres ne se juge pas titre par titre. Elle se juge en réduisant la page à dix pour cent et en regardant si la structure reste lisible quand le texte devient illisible.
Règle de recette du gabarit
Les médias sortent de la colonne, le texte n’y touche pas
Voici la décision qui structure ce gabarit. La colonne de texte reste bornée à sa mesure de lecture, mais les blocs qui ne sont pas du texte courant en sortent et prennent toute la largeur de la grille : images, tableaux, blocs de code, séparateurs.
Le raisonnement tient en une phrase : la contrainte de mesure de lecture porte sur du texte qui se lit ligne après ligne. Elle n’a aucun sens pour une photographie, dont on saisit la totalité d’un seul regard, ni pour un tableau, qu’on lit en colonnes. Les brider à la largeur du texte revient à appliquer à tous les blocs une règle qui n’en concerne qu’un seul.
Ce que le débordement coûte, et ce qu’il rapporte
Il faut être honnête sur ce point : une image large ne raccourcit pas la page, elle la rallonge. À format égal, une photographie qui passe de six cents à mille deux cent quarante pixels de large devient deux fois plus haute. Le gain n’est donc pas dans la longueur de défilement.
Il est ailleurs. Une image large donne un point d’arrêt franc entre deux sections, elle installe un rythme que le texte seul ne produit pas, et elle occupe l’espace latéral qui resterait sinon vide sur un grand écran. Une page où le texte fait six cents pixels au milieu de mille deux cent quarante n’est pas une page sobre : c’est une page qui n’a rien à mettre sur les côtés.
À retenir pour la rédaction
Toute image posée dans un article prend par défaut la pleine largeur de la grille. Pour qu’elle reste dans la colonne de texte, choisir « aligner au centre » dans la barre d’outils du bloc image de Gutenberg.
Dans les deux cas, l’image a besoin d’un texte alternatif renseigné dans la médiathèque, et d’au moins seize cents pixels sur son grand côté.
Naviguer dans un texte long
Un article de deux mille cinq cents mots représente environ deux cents lignes de texte, soit six à sept écrans de défilement sur un ordinateur portable. Personne ne parcourt six écrans à l’aveugle pour vérifier si un article contient la réponse à sa question.
Trois dispositifs répondent à ce problème, et ils ne se valent pas :
- Élargir la colonne de texte. C’est le levier le plus évident et le moins efficace : passer de soixante-douze à quatre-vingt-six caractères par ligne raccourcit la page d’environ dix pour cent, en échange d’un confort de lecture dégradé sur tout l’article.
- Faire sortir les médias de la colonne. Ne raccourcit rien, mais rend la page parcourable : les images deviennent des repères visuels qui découpent le texte en sections identifiables de loin.
- Poser un sommaire ancré. Ne raccourcit rien non plus, mais supprime le défilement inutile : le lecteur va directement à la section qui l’intéresse. Sur un article long, c’est de très loin le dispositif qui fait gagner le plus de temps réel.
Le troisième n’a de sens qu’à partir d’un certain nombre de titres et d’une certaine largeur d’écran. Un sommaire de deux entrées dans une colonne latérale de deux cent cinquante pixels n’aide personne : il annonce une structure que l’article n’a pas. La règle retenue est donc conditionnelle, et son absence n’est jamais un défaut.
| Dispositif | Effet sur la longueur | Effet sur le temps de lecture |
|---|---|---|
| Colonne élargie | Raccourcit un peu | Dégrade le confort ligne à ligne |
| Médias hors colonne | Rallonge | Rend la page parcourable |
| Sommaire ancré | Sans effet | Supprime le défilement inutile |
| Rien du tout | Sans effet | Laisse le lecteur chercher |
L’échelle typographique doit suivre l’écran
Dernier point, et c’est celui qui a motivé la reprise du gabarit. Une échelle typographique figée en pixels donne le même rendu à mille vingt-cinq pixels de large qu’à deux mille cinq cent soixante. Ce n’est pas une neutralité, c’est un choix par défaut, et il est mauvais aux deux extrémités.
Sur un ordinateur portable de treize pouces, un titre calibré pour un grand écran occupe une part démesurée de la fenêtre et écrase tout ce qui l’entoure. Sur un écran de trente-deux pouces, le même titre paraît timide et la page semble avoir été conçue pour quelqu’un d’autre. Le rapport entre les deux situations est de l’ordre du double.
Une droite plutôt qu’un palier
La parade consiste à faire de chaque niveau une droite entre deux bornes, calibrée sur deux largeurs de référence puis plafonnée aux deux extrémités. Le rendu validé sur l’écran de travail ne bouge pas ; c’est en dessous que l’échelle se calme et au-dessus qu’elle respire.
Un détail compte : la partie fixe de cette droite doit s’exprimer en rem et non en pixels. Une taille exprimée uniquement en proportion de la largeur de fenêtre ne réagit plus au réglage de taille de police par défaut du navigateur, ce qui met la page en défaut sur un critère d’accessibilité que personne ne remarque avant l’audit.
Et le corps du texte avec
La conséquence la moins évidente est que la colonne suit automatiquement, à condition que sa borne soit écrite en em. Quand le corps passe de dix-sept à dix-neuf pixels entre un petit et un grand écran, une colonne de trente-trois em passe de cinq cent soixante à six cent trente pixels, et le nombre de caractères par ligne ne bouge pas d’un seul. La mise en page respire, la lecture reste identique.
Ce que la mesure ne voit pas
Tout ce qui précède se vérifie au chiffre : on lit la largeur calculée d’un bloc, la taille rendue d’un titre, le nombre de caractères par ligne. Cette façon de faire est la bonne, et elle a trouvé des défauts qu’aucun regard n’avait vus. Elle a aussi une limite qu’il faut nommer, parce qu’elle est traître.
Une mesure ne trouve que ce qu’on lui a appris à chercher. Elle vérifie qu’un bloc a la bonne largeur, jamais qu’il est à la bonne place. Elle vérifie qu’un texte a le bon contraste, jamais qu’il dit la bonne chose. Un rapport de recette qui sort sans aucune alerte prouve exactement une chose : aucun des contrôles écrits ne s’est déclenché.
Deux familles de défauts, et elles sont disjointes
Les défauts de mesure sont ceux qu’un chiffre attrape : une colonne trop large, un titre à la mauvaise taille, un écart vertical hors norme, un lien dont le contraste ne passe pas. Ils sont indétectables à l’œil et évidents au calcul.
Les défauts de composition sont l’exact inverse : un bloc calé à gauche sous un titre centré, deux blocs voisins de largeurs différentes, un vide qui n’est pas là où il devrait être. Toutes les valeurs sont correctes, prises une par une, et l’ensemble est bancal. Aucune des deux familles ne remplace l’autre, et chercher l’une dispense rarement de chercher l’autre.
Il faut ajouter à cela un piège propre à la vérification par capture d’écran : sur une page qui anime l’apparition de ses éléments, une image prise trop tôt peut omettre un bloc pourtant affiché. On conclut alors à un contenu manquant qui ne manque pas. La parade est de neutraliser les animations avant de capturer, et de ne jamais tirer de conclusion d’une image seule quand un chiffre peut trancher.
Pour finir
Ce que ce gabarit tient : une colonne de lecture bornée en em et donc invariante, une échelle qui suit la largeur de l’écran, des médias qui sortent de la colonne pour rythmer la page, et un sommaire qui n’apparaît que lorsqu’il a quelque chose à annoncer.
Ce qu’il ne tient pas, et ne peut pas tenir : la qualité de ce qui sera écrit dedans. Un article se lit d’abord parce qu’il a quelque chose à dire, et aucune règle de composition ne rattrape un texte qui n’en a pas. La typographie ne fait que retirer les obstacles ; elle ne fournit jamais la raison de continuer. Le dernier paragraphe d’un article n’a d’ailleurs aucune marge basse : l’air qui le sépare de la section suivante vient du remplissage de cette section, jamais de la marge du bloc, faute de quoi les deux s’additionnent et on ne sait plus d’où vient l’espace.
