Adapter la mise en page pour une meilleure expérience de lecture sur ordinateur est essentiel.

Sur le web, nous rencontrons souvent des sites affichant des paragraphes dont les lignes s'étirent sur une grande partie de l'écran. Ce problème est moins présent sur tablette ou mobile en raison de la taille réduite de leurs écrans.

Cela peut concerner l'ensemble du site ou seulement certaines sections.

Cependant, ce mode de lecture demande à nos yeux de parcourir toute la largeur de l'écran, puis de revenir tout à gauche pour la ligne suivante, ce qui peut entraîner une perte de concentration. Cette réalité est basée sur la physiologie : une ligne courte est plus aisée à lire qu'une longue.

Ce principe n'est pas nouveau. Les journaux papier utilisent des colonnes étroites pour faciliter la lecture, augmenter la vitesse de lecture et réduire la fatigue visuelle due aux longues lignes.

Sur internet, ce principe s'applique de la même manière. Vous remarquerez que la plupart des blogs, riches en contenu, évitent d'avoir des lignes trop longues (quitte à avoir de très grandes marges).

Idéalement, il ne faudrait pas qu'une ligne dépasse les 75/80 caractères, espaces et ponctuation compris, pour garantir une lecture la plus fluide que possible sur un site web.

Pour respecter ce principe, deux solutions s'offrent donc à nous :

Si vous êtes tenté de rectifier le tir sur un site existant, l'unique inconvénient pourrait être qu'un retour à la ligne plus fréquent nécessitera peut-être quelques ajustements de mise en page. Cependant, la réduction de la longueur des lignes de texte est un changement mineur comparé aux avantages obtenus en termes de lisibilité et donc en attractivité.

Par défaut, un texte est "justifié à gauche". C'est-à-dire que chaque ligne est alignée seulement sur la gauche.

On dit qu'il est "justifié à droite" lorsque les lignes sont alignées à droite.

Et un texte est juste "justifié" lorsqu'il est aligné à la fois à gauche et à droite.

La justification du texte est souvent employée dans l'impression pour obtenir un aspect ordonné (ceci est courant dans les journaux). Cependant, elle est fortement déconseillée dans le contexte du web.

Et pourquoi donc, me direz-vous ?

Bonne question !

Et bien, parce que lorsqu'un texte est justifié, les mots doivent s'espacer pour permettre à la ligne d'être alignés des deux côtés. Ces espaces sont non seulement peu esthétiques, mais également gênant pour la lecture.

Sur un document imprimé, le contenu est fixe. Si besoin, on le retravaille un peu pour créer des espaces homogènes. C'est tout un travail de mise en page : ajuster les colonnes, éviter les mots orphelins, etc. Une fois fait, ça restera comme ça et tout le monde est content.

En revanche, sur le web, nos écrans varient en termes de résolution et de format (ordinateurs, tablettes, mobiles, sans oublier ceux qui réduisent leur fenêtre pour afficher plusieurs pages simultanément sur un même écran). En fonction de ces paramètres, la mise en page s'adapte (on parle de "responsive design" = un design qui s'ajuste automatiquement). Le changement d'espacements et les retours à la ligne deviennent donc incontrôlables et inévitables.

Retenez que ce qui peut sembler bien sur votre propre écran peut s'avérer moche et illisible dès que le format n'est plus le même.

En général, je déconseille de centrer un texte de plus de 3 ou 4 lignes. En français, la lecture se fait de gauche à droite, et le centrage perturbe ce repère, obligeant le lecteur à chercher la ligne suivante, ce qui peut vite agacer et décourager.

Beaucoup centrent leur texte par réflexe, pensant équilibrer la mise en page. Mais c'est une fausse bonne idée : non seulement cela nuit à la lisibilité, mais ça s'accompagne souvent de lignes trop longues, un combo peu efficace.

Si vous tenez au centrage, réduisez la longueur des lignes pour limiter l'effet de déséquilibre. Il peut être pertinent pour une phrase clé, un titre, une citation ou une baseline, mais doit rester un choix réfléchi.

Si vous voulez une règle simple à retenir : si une phrase dépasse 3 retours à la ligne, mieux vaut éviter le centrage.

Au théâtre, les silences ont autant d'importance que les dialogues.

Même les comédiens qui parlent vite marquent des pauses stratégiques pour permettre à leur public de respirer et d'en saisir le contenu.

Les marges jouent un rôle similaire dans une mise en page : c’est en grande partie ce qui donne le rythme.

Elles contribuent à la personnalité de la page. Elles créent de l'espace, rendant le contenu plus aéré, digeste et agréable à lire et à visualiser.

Il n'existe pas de règles universelles pour que ça fonctionnent à tous les coups.

Bizarrement, parfois ça nécessite avant tout un travail sur soi pour accepter ce qui est assimilé à du “vide” ou du "blanc". Cela peut paraitre anecdotique, mais ce n'est pas si simple que ça !

Malgré tout, vous pouvez vous appuyer sur quelques points plus concrets :

Ensuite, une fois la taille des marges déterminée, il faut surtout faire attention à les maintenir cohérentes sur l'ensemble du site pour assurer une harmonie visuelle.

Rappelez-vous que les marges contribue au rythme et la personnalité que vous voulez donner à votre site web. Pour vous aider, vous pouvez vous inspirer d'autres sites dont vous aimez l’atmosphère. Sans même vous en rendent compte, les marges contribuent forcément à son style.

Ci-dessous, un exemple de l'impact des marges sur une même mise en page.

Les typographies catégorisées manuscrites, script, cursives, display ou fantasy offrent rarement une bonne lecture sur des textes longs. Ce sont des écritures de style "écriture à la main" ou avec des formes spéciales. On peut les utiliser sur les titres ou les textes très (très) courts, mais pas comme textes courants.

Heureusement, il existe beaucoup de typographies qui permettent d'avoir de la personnalité ET une lisibilité suffisante. Leurs formes sont beaucoup plus classiques et en général, vous les trouvez dans les catégories Serif et Sans serif dans les banques typographiques. Ils en existent pleins de variations différentes, ce qui permet largement de se faire plaisir, tout en choisissant des typos adaptées à leurs usages. Certaines sont plus simples et agréables à lire que d'autres, mais les utiliser pour votre contenu est déjà un bon point.

En savoir plus sur les familles typographiques.

MAIS ! mais mais mais mais mais....

...quelle que soit la typo que vous choisissez, attention à sa finesse.

La finesse d'une typographie apporte souvent une sensation d'élégance qui peut être appréciée. Surtout si on veut donner une impression de luxe ou un aspect délicat à son design. Mais elle risque de ne pas ressortir suffisamment pour que ce soit agréable à lire.

Certaines typographies proposent différentes variations de police : black, bold, regular, light, thin etc.

Si vous avez la chance d'avoir ces choix, privilégiez la police regular, au moins pour le texte courant. Évitez d'utiliser la variante light ou thin. La plupart du temps, ces polices rendent la typographie trop légère pour permettre un bon contraste de lecture.

Si vraiment vous y tenez, réservez la grande finesse pour les titres et les citations, qui sont souvent mis plus gros et qui sont moins longs.

Déjà, offrez de l'air à votre mise en page en divisant votre texte en paragraphes distincts. Un bloc de texte volumineux aura toujours un effet plus décourageant que s'il est découpé en plusieurs petites parties.

Veillez à ce que la hauteur entre les lignes soit suffisante. Ce n'est pas vraiment des marges, mais ça fait partie de l'aération de la page. Pour que la lecture soit confortable, la hauteur des lignes doit être proportionnelle et équilibrée par rapport à votre taille de police. En général, on préconise une hauteur entre 1.2 et 1.5 fois la taille de la police. C'est valable pour le contenu et pour les titres.

Évitez d'écrire de longs contenus avec une police trop petite. C'est évidemment plus dur à lire, mais, en plus, comme par défaut la hauteur entre les lignes est proportionnelle à la taille du texte, ça donnera une impression encore plus compacte et tassée.

Pour indication, pour apporter un confort de lecture suffisant, je mets rarement une taille inférieure à 16px sur ordinateurs et environ 14px sur mobile. Cependant, cela peut varier en fonction de votre police. Toutes les typographies ne ressortent pas pareilles en 16px. Certaines paraîtront beaucoup plus petites que d'autres. C'est comme pour les chaussures, la taille ne sont pas toujours équivalentes d'une marque à l'autre. Donc, il faut tester, être attentif à ce détail et avoir un esprit critique.

La question du contraste peut être complexe, je vous l'accorde. Elle dépend de nombreux facteurs subjectifs et indépendants de notre volonté, allant de la qualité d'affichage de l'écran à des handicaps visuels.

Cependant, lorsque je vois, par exemple, des sites entièrement écrits en gris clair sur fond blanc, je me dis qu’il y a quand même un cruel manque d’empathie pour les visiteurs.

Alors oui, c'est peut-être beau. Mais sur du texte qui est censé apporter une information, qu'est-ce qui est le plus important ?

Heureusement, il existe des solutions simples et objectives pour évaluer le contraste entre un texte et son fond : vous pouvez utiliser des outils en ligne pour entrer la couleur du texte et celle du fond, puis vérifier si la note est suffisante pour une bonne lecture.

La note recommandée pour un bon contraste entre texte et fond est d'au moins 4,5:1.

Pour un texte suffisamment grand (type titre ou citation, d'au moins 24px) ou du texte en gras, vous pouvez vous permettre d'une note minimale de 3:1.

Tous les outils de contrastes nécessaires sont en bas du chapitre.

Attention également si vous superposez du texte à une image. Il ne faut pas que le texte se confonde avec l’image.

Pour ça, en webdesign, on utilise ce que l’on appelle un”overlay”. C’est une couche colorée qui se superpose à l’image. On joue ensuite avec l’opacité de cette couche pour laisser transparaitre l’image derrière tout en assurant une bonne visibilité au texte grâce à un contraste suffisant.

Dans l'exemple ci-dessous, sur l'image sans overlay, on ne peut pas lire correctement le texte qui est dessus. Que ce soit en noir ou en blanc. L'overlay permet de régler ce problème. Ici, la couleur verte en opacité 75% permet un meilleur contraste.

Le choix de l'opacité peut varier en fonction de l'image derrière, la couleur de l'overlay, la police, la couleur et la taille du texte.

Dernier conseil, mais le plus dur à mettre en pratique, car beaucoup plus stratégique.

Il implique la structure même de votre site. Il fera sans aucun doute d’objet d’un article plus complet à ce sujet, mais il se devait d’être évoqué dans celui-là : ne négligez pas la hiérarchie et la pertinence de vos titres.

Dans le web, il y a plusieurs tailles de titres :

En faisant attention à l'ordre de vos titres, à leur intérêt et votre choix des mots, vous aidez vos visiteurs à parcourir rapidement votre contenu. En un coup d'œil, ils savent de quoi vous parlez et où trouver les infos qui les intéressent.

Sachez aussi que les malvoyants (ou d'autres personnes en situation de handicaps) naviguent au clavier et/ou à l'audio. La hiérarchisation des titres est indispensable pour eux pour s'y retrouver.

En utilisant les bons mots, vous pouvez piquer l'intérêt et encourager votre public à en lire plus.

Mais pour ça, il y a quelques principes à respecter :

Vous avez peut-être entendu dire que les moteurs de recherche aiment les mots-clés dans les titres. Et c’est vrai, un mot-clé dans un titre peut aider pour le référencement.

Mais c'est comme le chocolat, il ne faut pas en abuser.

Mettre tout au même niveau (par exemple, mettre tous vos titres en h2 quelle que soit son importance) ne fonctionne pas. Au contraire, cela peut nuire au référencement, car les moteurs de recherche n'aiment pas les sites mal structurés. Ils peuvent même vous déclasser s’ils se rendent compte de la supercherie.

C'est la double peine, parce que vous perdez aussi la clarté et l’impact que peut avoir des niveaux de titres bien choisis.

Donc ne soyez pas grippe-sous ! Travaillez plutôt l’organisation de votre contenu et le choix des mots pour séduire votre public, plutôt que de vouloir en mettre le paquet pour impressionner un logiciel.