Largeur du texte sur une landing page : quelle longueur de ligne pour la lisibilité ?

Un bloc de texte centré sur une maquette desktop 1440 px de large, sans max-width, s'étire parfois sur 150 caractères par ligne — l'œil doit parcourir presque toute la largeur de l'écran avant de revenir chercher le début de la ligne suivante, et perd le fil au passage. La règle typographique la plus citée pour éviter ce problème tient en une phrase : entre 50 et 75 caractères par ligne, pas plus. Elle vient du canon typographique de Robert Bringhurst et s'applique très bien à un livre. Reste une question qu'on se pose rarement en concevant une landing page : cette règle a-t-elle été vérifiée sur un écran, avec de vrais lecteurs qui scannent une page plutôt qu'ils ne lisent un roman ? La réponse, une fois qu'on regarde les études qui l'ont testée, est plus nuancée que la règle elle-même.

Ce que dit la recherche — et ce n'est pas ce qu'on croit

Deux expériences menées par Ling et van Schaik (2006, International Journal of Human-Computer Studies) ont fait lire des pages web à des participants avec quatre longueurs de ligne différentes (55, 70, 85 et 100 caractères). Résultat : aucune différence significative de vitesse de lecture ni d'efficacité de recherche d'information entre ces quatre largeurs — mais une préférence subjective nette des participants pour la ligne la plus courte, 55 caractères. Autrement dit, une ligne plus longue ne ralentit pas objectivement la lecture sur écran, elle est juste perçue comme moins confortable.

Une seconde étude, celle de Shaikh et Chaparro (2005, Human Factors and Ergonomics Society), va à l'encontre de l'intuition la plus répandue : en testant des lignes de 35, 55, 75 et 95 caractères sur des articles d'actualité en ligne, ce sont les lignes les plus longues (95 caractères) qui ont produit la vitesse de lecture la plus rapide. La satisfaction déclarée, elle, n'a pas suivi la vitesse : les participants ont exprimé une préférence marquée pour les deux longueurs extrêmes — très courte ou très longue — plutôt que pour le compromis médian que recommandent la plupart des guides de style.

Les deux études pointent dans la même direction générale : la fourchette « 50-75 caractères » issue de la typographie imprimée n'a pas d'effet démontré et constant sur la vitesse de lecture ou la compréhension sur un écran. Ce qu'elle capture, c'est un confort perçu — largement partagé, mais pas une loi physiologique de la lecture. Pour une landing page, cette nuance change la manière de poser le problème : l'enjeu n'est pas de trouver le nombre magique de caractères, c'est d'éviter les deux extrêmes qui cassent réellement la lecture — une ligne si longue que l'œil perd le retour à la ligne, ou une colonne si étroite que chaque phrase se fragmente en trois lignes hachées.

Pourquoi une landing page n'est ni un livre ni un article de presse

Ces deux études testent la lecture continue d'un texte suivi — un contexte proche d'un article de blog, mais assez différent d'une landing page. Une landing page ne se lit pas linéairement : la majorité des visiteurs la scannent avant de décider de lire, en repérant le titre, les sous-titres et les listes à puces avant de s'arrêter sur un paragraphe qui les concerne. La contrainte de largeur ne joue donc pas le même rôle selon le bloc concerné : un titre de hero en grande taille peut s'étaler sur toute la largeur du conteneur sans gêner personne — il se lit en un regard, pas ligne par ligne. Un paragraphe d'argumentaire de trois ou quatre phrases, en revanche, se lit vraiment comme du texte continu, et c'est là que la largeur du bloc compte.

Le problème concret : le desktop large, pas le mobile

Sur mobile, le problème se résout presque tout seul : la largeur de l'écran limite naturellement le texte à 35-45 caractères par ligne, une zone jugée confortable par la quasi-totalité des études sur le sujet. Le vrai point de friction apparaît sur desktop, en particulier sur les grands écrans (1440 px et plus) quand un bloc de texte centré n'a pas de max-width et s'étire pour occuper toute la largeur disponible. Un paragraphe qui dépasse 90-100 caractères par ligne sur un écran large n'est pas condamné par la recherche à ralentir la lecture — Shaikh et Chaparro montrent même l'inverse pour du texte continu — mais il crée un inconfort visuel documenté par les deux études : l'œil doit parcourir une plus grande distance horizontale pour revenir au début de la ligne suivante, ce qui augmente le risque de sauter une ligne ou de perdre sa place, surtout en lecture rapide et en diagonale — exactement le mode de lecture d'un visiteur de landing page pressé.

Ce qu'on met en pratique, section par section

• Titre du hero — laisser respirer sur toute la largeur du conteneur (souvent 700-900 px) ; à cette taille de police, une ligne de 40-50 caractères occupe déjà tout l'espace visuel sans poser de problème de lecture.
• Sous-titre et paragraphe d'intro — contraindre à environ 60-70 caractères par ligne (souvent une classe max-w-xl à max-w-2xl en Tailwind, ou max-w-prose qui vise 65 ch) : c'est la zone où le confort perçu, documenté par Ling et van Schaik, joue le plus.
• Blocs d'arguments et de bénéfices — même logique que le paragraphe d'intro ; éviter qu'un bloc de trois phrases s'étale sur toute la largeur d'une colonne de 800 px si le texte n'est pas structuré en liste.
• Listes à puces — moins sensibles à la largeur : chaque item est court et se scanne indépendamment plutôt qu'en continu, la contrainte peut être plus souple.
• FAQ — les réponses gagnent à rester dans la même fourchette que le paragraphe d'intro ; voir notre article sur la FAQ d'une landing page pour la structure de section complète.

L'implémenter en CSS sans complexité

Sur un projet Next.js/Tailwind, pas besoin de calculer un nombre de caractères précis : l'utilitaire max-w-prose de Tailwind cible directement 65 ch (une unité CSS qui correspond à la largeur du caractère « 0 » de la police active, donc une approximation fiable du nombre de caractères par ligne quelle que soit la taille de police). Pour un texte qu'on veut légèrement plus généreux, en cohérence avec la préférence pour les lignes plus courtes observée par Ling et van Schaik plutôt qu'avec la vitesse brute mesurée par Shaikh et Chaparro, une valeur entre max-w-md et max-w-xl convient à la plupart des blocs de texte narratif d'une landing page. Le réflexe simple à vérifier avant mise en ligne : ouvrir la page sur un écran large, sélectionner une ligne de paragraphe au hasard, et se demander si l'œil doit vraiment parcourir toute la largeur de l'écran pour l'atteindre.

Erreurs fréquentes

• Un bloc de texte sans max-width qui hérite de la largeur du conteneur principal (souvent 1200 px ou plus) — le cas le plus courant sur les sections « à propos » ou « notre méthode » copiées d'une autre section sans contrainte de largeur dédiée.
• Colonne trop étroite sur mobile en essayant de forcer une mise en page desktop — moins fréquent, mais tout aussi gênant : une phrase fragmentée en trois lignes de quatre mots casse la lecture autant qu'une ligne trop longue.
• Confondre la largeur du titre et celle du corps de texte — appliquer le même max-width étroit au titre du hero qu'au paragraphe qui suit force souvent un retour à la ligne disgracieux au milieu d'un groupe de mots qui devrait rester ensemble.
• Chercher un nombre de caractères exact plutôt qu'une fourchette confortable — la recherche elle-même ne converge pas sur un chiffre unique ; viser une zone raisonnable compte plus que le respect au caractère près d'une règle citée sans sa source.

La largeur du texte n'est pas le levier de conversion le plus spectaculaire d'une landing page, mais c'est l'un des plus simples à corriger une fois repéré — un ajustement de max-width sur un composant, sans toucher au reste de la page. Les 10 templates LanderKit (89 € l'unité, 229 € le pack complet) livrent déjà leurs blocs de texte avec une largeur contrainte par défaut, du coaching à la vente d'ebook : un point de départ propre, à ajuster selon la longueur réelle de votre propre texte plutôt qu'à réinventer page par page.