Design des textes : renforcez la lisibilité et l’impact de vos contenus

Dans un précédent article sur la typographie, nous avons vu les bonnes pratiques pour choisir et combiner vos fonts pour un rendu professionnel et efficace.

Mais la typographie ne se résume pas aux fonts que vous choisissez. Elle concerne tout ce qui touche à l’apparence de vos textes – comme la taille, la largeur, l’espacement, la couleur… Certains voudrez vous faire croire qu’il faut 10 ans d’expérience pour stylisés vos textes d’une manière professionnel. Mais c’est un mythe ! Vous pouvez améliorer drastiquement l’apparence et la lisibilité de votre site web avec quelques petites techniques simples 🙂

Voici ce que nous allons voir :

• Commencez par définir une échelle typographique
• Maîtrisez les principes de la lisibilité
• Apprenez à casser la monotonie
• 3 astuces bonus pour sublimer vos textes

C’est parti !

Commencez par définir une échelle typographique

Mais vous êtes-vous déjà demandé quelles tailles devraient faire votre H1 ou vos H2 pour être en parfaite harmonie avec votre corps de texte ? Peut-être choisissez-vous cela au hasard ? Il n’y a pas de mal à cela, nous l’avons tous fait 🙂

Parfois, le design de nos pages semble « ne pas le faire », mais on a du mal à savoir pourquoi. C’est souvent dû à une mauvaise proportion des textes.

Heureusement, il existe un moyen simple pour déterminer la taille de vos textes en étant sûr que le rendu soit top : déterminer une échelle typographique !

Comme son nom l’indique, une échelle typographique fonctionne avec un facteur d’échelle (disons 1.250). Vous définissez ensuite la taille de votre corps de texte (18 pixels par exemple) que vous multipliez (ou divisez) par le facteur d’échelle pour avoir des tailles supérieures (pour vos titres et sous-titres) ou inférieures (pour vos textes fonctionnels par exemple).

Je vous rassure tout de suite, vous n’avez pas besoin de sortir vos calculettes car il existe un super outil qui fait tout le travail pour vous : Type Scale.

En cliquant sur la flèche à droite vous aurez un aperçu plus détaillé de l’échelle typographique.

Bien entendu vous n’êtes pas obligé de conserver le ratio 1.250 (Major Third), vous pouvez en tester d’autres et voir lequel vous convient le mieux.

Grâce à cet outil, vous renforcez considérablement la cohérence générale de votre design. Vos textes sont plus harmonieux car leurs tailles varient selon une échelle fixe que vous avez défini en amont.

Maîtrisez les principes de la lisibilité

Sujet ô combien important et trop souvent négligé, la lisibilité est primordiale en web design.

Commençons par la base.

Optez pour une largeur de contenu optimale pour votre corps de texte

Nous avons naturellement tendance à vouloir remplir l’espace. Le problème, c’est que les pages web sont souvent trop larges et ça peut devenir compliqué pour vos visiteurs de lire vos textes. La dernière chose que vous voulez c’est qu’ils sautent des lignes ou relisent la même phrase.

Il est communément admis que pour une expérience de lecture optimale, vos lignes devraient comporter entre 45 et 75 caractères, espaces compris.

Ça peut être déstabilisant au départ. J’avoue qu’au début, lorsque j’ai réduit la largeur des paragraphes dans mes articles je n’étais pas convaincu. Mais au final, en plus d’améliorer la lisibilité de vos textes, votre design semblera plus professionnel.

Et puisqu’on parle de paragraphes…

Évitez les pavés

La vision d’un long bloc de texte informe peut décourager même les plus motivés.

Définition du design par l’Alliance Française des Designers.

Même si vous êtes fan de Proust, en web design vous devez aérer vos textes et utiliser des paragraphes courts.

Lorsque l’être humain surfe sur le web, il bascule en mode « scanner » et a besoin de digérer l’information rapidement.

Et pour rendre vos textes encore plus lisibles…

Utilisez un line-height optimal

Le line-height, que l’on pourrait traduire par « hauteur de ligne » (mais c’est quand même plus stylé en anglais) représente l’espacement entre vos lignes de texte.

Il permet au lecteur de passer à la ligne plus facilement (et donc de ne pas relire la même phrase ou d’en sauter une).

Mais comme rien n’est jamais simple en web design, le line-height doit être proportionnel à la taille de vos textes. En effet, plus la taille est petite, plus le line-height doit être généreux.

Pour vous aider, j’ai déniché un petit outil qui vous simplifiera la tâche. Vous n’avez qu’à rentrer la largeur de votre contenu et la taille de vos paragraphes.

Cela dit, je vous recommande de faire confiance à vos yeux. Testez plusieurs valeurs et une fois que ça vous convient, faites-vous confiance 😉

Tu n’utiliseras point de texte justifié

Vos textes devraient être alignés à gauche dans la grande majorité des cas.

Le texte justifié est souvent utilisé en infographie, mais pour le web ce n’est vraiment pas recommandé. Cela créé des espacements bizarres entre les mots qui nuisent à la lisibilité.

L’alignement centré fonctionne bien pour des titres ou des paragraphes très courts. Mais lorsque vos textes font plus de deux ou trois lignes, l’alignement à gauche fonctionnera mieux dans 90% des cas :

N’oubliez pas qu’en français nous lisons de gauche à droite, vos textes seront donc toujours plus faciles à lire alignés à gauche.

Utilisez vos textes pour établir une hiérarchie visuelle

Mais ce n’est pas le seul moyen, si un texte est important (un titre par exemple) vous pouvez le mettre en gras et utiliser une couleur très sombre (#161616 par exemple). À l’inverse, votre corps de texte pourra être d’une couleur plus clair (#505050 par exemple). Cela aidera vos lecteurs à scanner votre contenu.

La couleur peut également être intéressante, mais je vous recommande de d’abord établir une hiérarchie visuelle en utilisant du noir et du gris. Vous pourrez ensuite ajouter de la couleur sur les éléments vraiment importants (les liens par exemple, nous verrons cela dans la dernière partie).

Pour en savoir plus sur ce sujet passionnant, rendez-vous sur mon article consacré à la hiérarchie visuelle. Je prends l’exemple d’un site web réel et l’optimise point par point.

Enfin, pour renforcer encore cette hiérarchie visuelle, vous devez vous assurer d’utiliser correctement les espaces entre vos textes. La prochaine partie tombe à pic…

Faites attention aux espaces titre – paragraphe

Pour donner du rythme à votre contenu et renforcer la hiérarchie visuelle de votre page, faites attention aux marges entre vos titres et vos paragraphes.

C’est une erreur que je vois sur de très nombreux sites web. Quand on ne connait pas cette subtilité, on n’y fait pas attention, c’est normal. Mais maintenant que vous savez, vous ne regarderez plus les contenus de la même manière 😉

Plutôt qu’un long discours, je pense qu’une image vous expliquera très bien ce concept :

Source du texte : l’Alliance Française des Designers.

L’espacement entre un titre et son paragraphe doit être plus petit que l’espacement entre un paragraphe et le titre suivant. Croyez moi, en faisant cela, votre site web aura l’air bien plus professionnel.

Cassez la monotonie

Si vos textes sont lisibles, bravo, vos contenus sortent déjà du lot ! Mais pour asseoir encore davantage une hiérarchie visuelle forte et donner envie à vos visiteurs de vous lire, je vous recommande de casser la monotonie.

Comment ?

En donnant vie à vos textes ! N’ayez pas peur d’utiliser du gras, de l’italique, de la couleur, des sur-titres, des listes à puces, des icônes etc.

Stylisé un gros bloc de paragraphe n’est vraiment pas évident. Essayez plutôt de le diviser en sous-ensemble en réfléchissant à ce que vous pouvez en faire esthétiquement :

• Si il y a un paragraphe d’accroche dans votre texte, peut-être pouvez-vous le faire ressortir en jouant sur la taille et la hauteur de ligne ?
• Pourquoi ne pas ajouter un sur-titre à votre titre ? Vous pourriez le mettre en majuscule en ajoutant un petit espacement des lettres (ça se fait beaucoup aujourd’hui).
• Si un de vos paragraphes peut être découpé en 2 ou 3 sous éléments, que diriez-vous de le décomposer en blocs avec des icônes ?

Voici un petit exemple :

3 astuces bonus pour sublimer vos textes

Il existe beaucoup de techniques de web design pour stylisés les textes.

Voici une petite sélection.

Soignez le design de vos liens

Les liens (internes et externes) sont importants pour le SEO et le maillage interne de votre site web.

Nous pouvons diviser les liens en 2 catégories :

• les liens stratégiques
• les liens informatifs

Les liens stratégiques sont en général des liens internes permettant à vos visiteurs de rester sur votre site et de découvrir d’autres contenus. Pour ces liens, vous pouvez utiliser de la couleur pour les faire ressortir.

Les liens informatifs peuvent être des liens internes non stratégiques (un lien vers vos mentions légales par exemple) ou des liens externes (lien pointant vers un autre site). Pour ces liens, vous pouvez utiliser la même couleur que le corps, mais faire en sorte que la couleur change au survol de la souris. Ça permettra à vos visiteurs de bien comprendre qu’il s’agit d’un lien mais sans qu’il ne soit trop mis en valeur.

Enfin, je vous recommande de toujours souligner vos liens. C’est un vieux standard du web connus de tous. Autrement dit, les gens comprennent sans effort que c’est un lien lorsque le texte est souligné.

J’en profite pour « souligner » un point important : dans vos textes, seuls vos liens devraient être soulignés. Même si on peut voir sur certaines pages de vente des textes soulignés, en terme de web design ce n’est pas une bonne pratique, ça apporte de la confusion à vos visiteurs.

Créez des listes à puces professionnelles

Le problème avec les listes à puces, c’est que l’espacement entre les points correspond souvent au line-height du texte. Du coup, leur lecture n’est pas évidente.

Idéalement, vos listes devraient être séparées par un petit espace : personnellement j’ajoute une marge de 12 pixels en bas de chaque élément :

Ça peut sembler être un détail, mais souvenez-vous : un design de qualité repose sur une multitude de petits détails.

Faites ressortir vos citations ou témoignages

Dans l’article sur la typographie, je vous encourageais à n’utiliser qu’une seule typographie pour l’ensemble de vos contenus. Et bien figurez-vous que je vais me contredire ! Qui ne fait jamais ça ? 😉

Plus sérieusement, les témoignages ou citations sont l’exception qui confirme la règle : vous devriez utiliser une typographie différente pour les faire ressortir. Une font serif est idéale car plus formelle et sérieuse. L’utilisation de l’italique est aussi une bonne idée car cela apporte un côté plus conversationnel et authentique.

Bref, encore des petits détails qui peuvent changer beaucoup de choses 🙂

Et vous, avez-vous des techniques secrètes pour sublimer vos textes ?

Newsletter mensuelle sur le Web Design

PAR THIBAUT BROUARD

Pour apprendre à concevoir des pages web simples, élégantes et efficaces. En vous inscrivant, vous recevrez en cadeau de bienvenue mon guide du site Internet performant (PDF de 42 pages).

Le respect de votre vie privée est une priorité : votre email est en sécurité et ne sera jamais cédé à des tiers. Vous pourrez vous désincrire à tout moment en un clic. Consultez ma politique de confidentialité.