Design des textes : rendre vos contenus plus lisibles et agréables à lire

Un site peut disposer d’une excellente typographie, de belles couleurs et de détails soigneusement travaillés. Si ses paragraphes font 1 500 pixels de large, que les lignes sont tassées et que tout semble avoir la même importance, sa lecture restera pénible. 

Choisir une bonne typographie ne suffit pas. Il faut encore savoir comment l’utiliser.

Taille des textes, largeur des paragraphes, hauteur de ligne, hiérarchie et espacements : toutes ces décisions influencent profondément la manière dont nous lisons une page.

Bonne nouvelle : pas besoin d’être typographe pour améliorer tout cela. Quelques principes simples peuvent déjà faire une vraie différence.

Commencez par donner une structure à vos textes

Un texte sur une page web n’est pas simplement une succession de phrases. Il contient un titre principal, des sous-titres, des paragraphes et parfois des éléments plus discrets : surtitres, légendes ou annotations.

Tous ces éléments n’ont pas la même importance. Cette différence doit pouvoir être comprise avant même de commencer à lire.

Prenez cette page : vous identifiez immédiatement le titre de l’article, le début de chaque partie et l’endroit où reprend le texte courant. Vous n’avez pas besoin d’y réfléchir.

C’est précisément le but d’une bonne structure typographique.

Évitez de choisir chaque taille au hasard

Quand j’ai commencé à créer des sites, je choisissais les tailles de texte un peu au feeling :

• un H1 à 42 px ;
• un H2 à 30 px ;
• un H3 à… allez, 24 px.

Pourquoi ? Aucune idée. Ça avait l’air bien. 🤭

Le problème n’est pas que l’une de ces valeurs soit nécessairement mauvaise. C’est qu’elles n’entretiennent pas forcément de relation entre elles.

Aujourd’hui, je préfère définir un système typographique en amont : quelques tailles organisées selon une progression cohérente, puis réutilisées dans tout le site.

Le résultat est plus harmonieux, mais surtout beaucoup plus simple à construire et à maintenir. Au lieu de me demander à chaque nouvel élément : « Quelle taille vais-je utiliser ici ? », la décision est déjà prise.

Il existe différentes manières de construire ce type d’échelle. Mais pour commencer, retenez surtout le principe :

Définissez quelques tailles cohérentes et réutilisez-les.

Échelle typographique cohérente

Titre H1

Titre H2

Titre H3

Les tailles des trois titres et du paragraphe suivent une même échelle, définie en amont et réutilisée dans tout le site.

Grâce à la fonction CSS clamp(), elles évoluent progressivement en fonction de la largeur de l’écran.

L’échelle typographique utilisée sur ComnWeb 2.0 : quelques niveaux définis en amont et réutilisés dans tout le site.

La taille ne fait pas tout

Pour créer une hiérarchie, on pense naturellement à agrandir les éléments importants. C’est efficace, mais ce n’est pas notre seul outil.

La graisse d’une typographie, sa couleur, sa position et l’espace qui l’entoure participent également à cette hiérarchie.

Un titre peut ressortir parce qu’il est grand, mais aussi parce qu’il est plus gras, plus sombre ou simplement mieux isolé du reste du contenu.

J’ai consacré un article complet à ce sujet : Hiérarchie visuelle : guider le regard et clarifier vos pages.

Et cela nous amène à quelque chose d’encore plus fondamental.

Rendez vos textes confortables à lire

On peut construire une très belle hiérarchie et malgré tout rendre un texte désagréable à lire. La lecture sur écran demande aussi un minimum de confort.

Et le premier réglage à vérifier est probablement celui que l’on oublie le plus souvent : la largeur des paragraphes.

Ne laissez pas vos paragraphes traverser tout l'écran

Nous avons naturellement tendance à vouloir utiliser tout l’espace disponible. Après tout, si l’écran mesure 1 920 pixels de large, autant en profiter, non ?

Pas vraiment.

Une ligne très longue oblige les yeux à parcourir une grande distance avant de retrouver le début de la suivante. Sur quelques mots, ce n’est pas gênant. Sur un article entier, l’exercice devient beaucoup moins agréable.

C’est précisément pour cette raison que le contenu que vous lisez actuellement n’occupe pas toute la largeur de votre écran. Sur ComnWeb, je limite volontairement la largeur des articles.

Au début, cela peut donner l’impression que l’on « perd » de la place. Mais cet espace n’est pas perdu : il rend simplement le contenu plus confortable à lire.

Le vide fait partie du design. J’explique plus largement ce principe dans Les espacements en webdesign : créer des pages plus claires et cohérentes.

Évitez les pavés

Une bonne largeur ne sauvera pas un paragraphe de vingt-cinq lignes. Sur le web, nous commençons souvent par parcourir une page avant de la lire attentivement : nous regardons les titres, sautons certains passages et cherchons parfois une information particulière.

Des paragraphes raisonnablement courts facilitent cette lecture. Cela ne veut pas dire :

Une phrase.

Puis une autre.

Puis encore une autre.

Sinon, on finit par écrire comme sur LinkedIn. 🤯

L’idée consiste simplement à découper votre raisonnement en petits ensembles cohérents :

Une idée principale. Un paragraphe. Puis la suivante.

Même si vous êtes amateur de Proust, vos lecteurs vous remercieront.

Laissez aussi respirer vos lignes

Il existe un autre espace auquel on pense assez peu : celui qui sépare les lignes. C’est la hauteur de ligne, ou line-height dans les réglages CSS.

Une valeur trop faible donne rapidement l’impression d’un texte tassé. À l’inverse, si elle est trop importante, les lignes commencent à sembler indépendantes les unes des autres et le paragraphe perd son unité.

Comme souvent en design, il n’existe pas de valeur magique qui fonctionne partout. La bonne hauteur dépend de la typographie, de sa taille et de la largeur du texte.

Mon conseil est donc simple : regardez et testez.

Augmentez légèrement la valeur, puis diminuez-la. Observez avec quelle version vos yeux passent le plus naturellement d’une ligne à la suivante.

Les règles fournissent un point de départ. Mais à un moment, il faut aussi apprendre à faire confiance à ses yeux.

Et le texte justifié ?

Non. 😅

Enfin… dans l’immense majorité des cas.

Sur le web, je recommande généralement d’aligner les paragraphes à gauche. Le texte justifié crée des espaces variables entre les mots afin d’aligner les deux côtés du paragraphe. Sur une page responsive, le résultat peut rapidement devenir étrange et faire apparaître de grands vides au milieu des lignes.

Un texte centré peut très bien fonctionner pour un titre, une accroche ou quelques lignes. Mais dès qu’un véritable paragraphe commence à se former, je reviens presque toujours à gauche.

C’est simple et, surtout, cela se lit bien.

Donnez du rythme à la lecture

Imaginons maintenant que nous ayons :

• une échelle typographique cohérente ;
• une largeur de lecture confortable ;
• des paragraphes raisonnablement courts ;
• une bonne hauteur de ligne.

Techniquement, le texte est parfaitement lisible. Mais il peut encore être… terriblement monotone.

Un article de 2 000 mots dont tous les éléments sont présentés exactement de la même manière reste un mur de texte, même s’il s’agit d’un très joli mur.

Le rôle du design est aussi de créer du rythme.

Utilisez les variations avec parcimonie

Titres, sous-titres, gras, italique, listes, citations, surtitres… Tous ces éléments permettent de rompre la monotonie.

Mais attention à ne pas transformer votre article en sapin de Noël : si tout est mis en valeur, plus rien ne l’est.

Personnellement, j’aime utiliser le gras pour faire ressortir une idée importante au milieu d’un paragraphe. Pas trois phrases entières : uniquement ce que j’aimerais que vous reteniez si vous parcouriez rapidement la page.

Même principe avec la couleur. Elle peut attirer très efficacement l’attention, précisément parce qu’elle est utilisée avec parcimonie : Choisir les couleurs d’un site web : une méthode simple pour construire une palette cohérente.

Les espacements participent eux aussi au rythme

C’est un détail qui change énormément de choses. Regardez la relation entre ce titre et le paragraphe que vous êtes en train de lire : ils sont proches parce qu’ils appartiennent au même ensemble.

En revanche, l’espace placé avant le prochain titre sera plus important, car il doit signaler le début d’une nouvelle idée.

Autrement dit :

Plus deux éléments sont liés, plus ils devraient être proches visuellement.

C’est un principe que j’utilise constamment lorsque je construis une page. Et puisque j’ai consacré un article entier à la question, je vous épargne le doublon ici.

Pour approfondir : Les espacements en webdesign : créer des pages plus claires et cohérentes.

Même typographie, même contenu. Laquelle de ces deux versions avez-vous spontanément envie de lire ?

Les petits détails comptent aussi

On pourrait s’arrêter là. Mais il reste quelques éléments textuels que j’aime particulièrement soigner.

Pas parce qu’ils vont révolutionner un site à eux seuls, mais parce qu’un travail professionnel résulte souvent d’une accumulation de petits détails bien traités.

Faites en sorte que vos liens ressemblent à des liens

Cela semble évident. Et pourtant.

Un lien doit pouvoir être identifié immédiatement comme un élément cliquable. La couleur peut aider, tout comme le soulignement.

J’évite surtout les liens presque impossibles à distinguer du reste du texte. Le visiteur ne devrait pas avoir à promener sa souris sur chaque mot de la page pour découvrir ce qui est cliquable.

Les liens permettent également de prolonger naturellement la lecture. Si j’évoque ici la hiérarchie visuelle, il est logique de vous permettre d’approfondir le sujet dans Hiérarchie visuelle : guider le regard et clarifier vos pages.

Un lien mérite sa place lorsqu’il aide réellement le lecteur à poursuivre son parcours.

Aérez vos listes

Les listes sont très pratiques pour rendre une information facile à parcourir, à condition qu’elles ne ressemblent pas à ceci :

• premier élément collé au suivant ;
• deuxième élément collé au précédent ;
• troisième élément qui commence à regretter d’être venu.

Un peu d’espace entre chaque élément suffit généralement à améliorer considérablement leur lecture.

Encore une fois : petit détail, grande différence à l’échelle d’un site entier.

C’est l’ensemble qui fait la différence

Choisir une belle typographie est important, mais ce n’est que le début.

Il faut ensuite lui donner une structure, trouver les bonnes proportions, maîtriser la largeur des paragraphes, laisser respirer les lignes et créer suffisamment de rythme pour accompagner la lecture.

Pris séparément, tous ces réglages peuvent sembler anecdotiques : quelques pixels ici, un peu d’espace là, un titre légèrement plus grand. Mais mis bout à bout, ils changent complètement la perception d’une page.

Un bon système typographique ne repose donc pas sur un réglage spectaculaire. Il naît d’une succession de petites décisions qui fonctionnent ensemble.

Lorsque chaque niveau possède un rôle, que les paragraphes restent confortables et que la lecture paraît naturelle, la typographie finit presque par se faire oublier.

Elle ne cherche plus à attirer l’attention sur elle. Elle aide simplement le contenu à faire son travail.

Pour aller plus loin

Deux prolongements naturels vous permettront d’approfondir les principes abordés ici :

→ Les espacements en webdesign : créer des pages plus claires et cohérentes
Pour comprendre comment le vide et les distances structurent une page.

→ Hiérarchie visuelle : guider le regard et clarifier vos pages
Pour comprendre comment organiser les éléments selon leur importance.

Et maintenant ?

Cet article fait partie des principes que j'utilise quotidiennement pour concevoir mes sites.

Vous voulez continuer à apprendre.

Découvrez mon guide gratuit pour préparer, concevoir et faire durer un site professionnel.