Cet article est écrit noir sur blanc dans une police suffisamment grosse

Lecture web ou papier

Est-ce l'âge ? Sans doute un peu. Est-ce lié au temps passé devant un écran ? Sans doute beaucoup. Est-ce par respect des visiteurs ? Indéniablement.  Ou bien parce que je veux être lu ? C'est certain !

Toutes ces raisons font que cet article est écrit avec des caractères foncés (gris) sur fond clair (blanc), assez gros, et que les textes ne sont pas justifiés.

Il y a d'autres aspects qui facilitent la lecture d'un texte sur un écran, je les aborderais, mais concentrons-nous sur ceux-ci.

Illisibles ces pattes de mouche

Que les quarantenaires et plus ( parfois moins) me jettent la première pierre s'ils n'ont jamais pesté devant un texte écrit trop petit. Déjà que la lecture à l'écran est fatigante comparativement au papier.

Je ne sais pas si vous l'avez remarqué, mais la plupart des sites de news ont augmenté la taille de leurs polices de caractère sur leur site ces dernières années. On remarque aussi cette tendance sur de nombreux blogs. En fait, dès que les textes sont un peu longs (ce qui est le cas de la plupart des articles) on constate aujourd'hui une réelle prise en compte du confort du lecteur.

Taille de police de Rue89 en 2010 et en 2016

La taille de police de Rue89 en 2010

La taille de police de Rue89 en 2010

 

La taille de police de Rue89 en 2016

La taille de police de Rue89 en 2016

Taille de police de L'Express en 2010 et en 2016

Taille de police sur le site de l'Express en 2010

Taille de police sur le site de l'Express en 2010

Taille de police sur le site de l'Express en 2016

Taille de police sur le site de l'Express en 2016

Quelle règle pour la taille de la police

Il n'y a pas vraiment de règle précise, la bonne taille c'est quand le lecteur arrive à lire sans plisser les yeux. J'ai tendance à penser que ça commence à être lisible à partir de 12 px (strict minimum, pour moi c'est encore trop petit). En dessous mes vieux yeux ont vraiment du mal.

Bien sûr, d'autres aspects impactent la facilité de lecture d'une police, sa chasse, avec ou sans serif (avec ça fait peur [jeu de mots pourri - OK] )... Le lecteur jugera aussi de la lisibilité d'un texte en fonction de la taille des interlignes, de l'espacement des mots.

Mon conseil : Testez, demandez à quelques visiteurs de votre site s'ils peuvent lire une page complète sans fatigue visuelle. Demandez-leur s'ils connaissent des sites ou la lecture leur semble plus facile et comparez pour trouver pourquoi ?

Pour info, ce blog a maintenant pour police (au moment ou j'écris cet article et ça peut changer parce que l'on a du ménage à faire...)  « Open Sans » réputée pour être facile à lire à l'écran, et 16px pour afficher les textes suffisamment « gros ». Voir ici pour les différences entre points et pixels.

Je rappelle à ceux qui comme moi s’énervent parfois sur les textes écrits tout petits que vous pouvez augmenter la taille de police du site que vous visitez en appuyant sur les touches CTRL et + de votre clavier. Faites CTRL et touche 0 (zéro) pour revenir à la normale.

Le contraste oui, mais pas seulement (écrivons noir sur blanc)

J'exagère un peu, je tolère bien évidemment d'autres couleurs, mais globalement dès qu'un texte est un peu long, la lecture est facilitée par une écriture foncée sur fond clair. Pour les sceptiques, voici une étude qui démontre que la lisibilité est renforcée lorsqu'un fort contraste existe entre le texte et le fond.

Dans la pratique, sur écran, un fond gris clair serait même moins fatigant pour de longues lectures que le fond blanc. Mais globalement, les contrastes négatifs ( écriture foncée et fond clair) sont plus faciles à lire (autre étude).

Un exemple, jetons un coup d'oeil à ce site, ou même cette page Rolex (car je rêve d'une Submariner date 🙂 ) Les photos sont particulièrement mises en valeur sur le fond noir, mais la lecture du texte est rendue difficile. Sur le même site, mais côté femme, cette page est bien plus facile à lire avec son contraste négatif.

Notons que les textes courts ne sont pas gênants à lire en blanc sur fond noir ( titres, ou textes de quelques lignes), mais dès que c'est plus long, ça devient fastidieux.

Ci-dessous, c'est loin d'être une étude, mais voici le résultat d'un petit sondage que j'ai fait sur Twitter.

Texte justifié ou en drapeau  ?

Éternel débat que l'on a régulièrement avec bon nombre de clients, doit-on justifier les textes ? Je pars ici du présupposé que le texte est aligné à gauche.

Un texte justifié est un texte dont la fin de chaque ligne est alignée à droite verticalement.

Exemple de texte en drapeau et de texte justifié sur sa droite.

Cliquez pour agrandir

Cliquez sur l'image pour agrandir dans une nouvelle fenêtre

( source de l'exemple, le site affordance.typepad.com )

Si je n'y vois pas trop de problèmes pour des textes courts (4 ou 5 lignes) et sur au moins 400 pixels de largeur, le texte justifié est désagréable à lire dès que les paragraphes sont longs. Dans l'exemple ci-dessus, l'aspect désagréable est renforcé par l'utilisation de l'italique et le manque de sauts de lignes.

Il paraît que des études (que je ne retrouve pas je l'avoue) montrent qu'un texte justifié est plus fatigant à lire, car l’œil perd le repère visuel des fins de lignes ce qui nécessite une bien plus grande concentration lors de la lecture.
Attention (aussi) à ne pas avoir une largeur de texte trop petite, car dans ce cas, le texte justifié se retrouve plein de trous !

Certains me répondront qu'un texte justifié est plus joli, plus agréable graphiquement. C'est tout à fait vrai. C'est bien rangé, pas un cheveu ne dépasse, c'est ordonné, les blocs de textes ont visuellement la même taille. Mais quelle est la question ?

Le texte doit-il être agréable à regarder ou agréable à lire ?

En conclusion

J'écris pour les vieux 🙂
...Et  pour les plus jeunes qui n'ont pas des yeux d'aigle

Donc j'écris assez gros, sur une page à contraste négatif (je vous jure que le rouge sur fond bleu marine c’est mortel), je ne justifie pas mes textes et bien évidement j'ajoute quelques artifices quand c'est possible : des listes à puces, des sous-titres, des sauts de lignes, de la mise en gras ponctuelle, je n'écris pas tout en majuscules, je fais attention aux interlignes, je n'abuse pas de l'italique, mes liens sont bien visibles...

Le premier obstacle à la lecture d'un texte est sa lisibilité. Une lecture facilitée peut même décider un visiteur hésitant à lire un contenu.

Bref, je bichonne mes lecteurs, et vous ?

Articles connexes :

(je recevrai un mail quand un article est publié (no spam)

23 thoughts on “Cet article est écrit noir sur blanc dans une police suffisamment grosse

  1. Francois

    J’aime les textes alignés à gauche. Les textes justifiés gauche/droite doivent être ajustés correctement pour qu’ils soient bien lisibles, en impression nous pouvons bien contrôler tous les paramètres. Pour le numérique, nous sommes à la merci de l’usager et de la taille des écrans.

    Je suis malheureusement tombé sur une étude qui dit que les textes justifiés gauche/droite facilitent la compréhension du lecteur. Mais voilà, est-ce qu’une étude faite pour l’imprimé est aussi valide pour l’électronique?

    In the past, it has been a standard to left-justify text with a ragged right column. However, recent research has demonstrated that a fully-justified right margin improves the comprehensibility of documents.

    Ryder, John: The Case for Legibility The Bodley Head 1979

  2. Audiofeeline

    Il faut aussi prendre en compte les résolutions des ecrans qui a vraiment augmenté ces dernières années. Là où le 12/13px était la norme il y a quelques années, le 15/16px est très répandu désormais.

    Sinon pour ceux qui ont des problèmes de vue, les navigateurs propose un zoom en utilisant CTRL + la molette de la souris.

  3. Jean-Baptiste

    Je trouve les textes justifiées particulièrement non adaptés au responsive. La lecture d'un article justifié sur smartphone réserve parfois des espaces entre les mots (cas des mots très longs sur une même ligne).

  4. François

    Merci. Gros gros merci. Il n'y a pas que les vieux qui peuvent avoir du mal à lire les petits caractères. Certains sites sont complètement impossibles à lire sans ctrl +

  5. Jimmy

    Excellent article Sylvain ! Ça me rappelle deux choses qui vont ensemble :
    >> ton article https://blog.axe-net.fr/webdesign-annonceur-agence-utilisateur/
    et
    >> il y a quelque temps, nous avions avec le graphiste un gros débat car lui voulait du justifié de partout et je trouvais ça horrible quand sur une page il y avait 3 mots avec des écarts énormes c'était vraiment laid. Du coup on a mis en aligné à gauche sur téléphone mobile et justifié sur pc... De plus je me suis fait traité de miope car je voulais de gros caractères... J'avais aussi remarqué que les gros sites écrivais avec des grosses lettres 🙂
    Je vais lui faire lire cet article hahaha 🙂

  6. Sylvain Auteur de l’article

    @ Audiofeeline.
    Tu as raison, sur desktop, les écrans d'aujourd'hui changent la donne par rapport à ce qui se faisait auparavant. D'ailleurs, nombreux sont ceux qui disent même qu'aujourd'hui la qualité des écrans devraient nous amener à revenir aux polices avec empattements (serif), comme sur du papier.

    @ Jean-Baptiste.
    Bonne remarque, sur smartphone c'est rapidement désagréable.

    @ François
    Ravi de faciliter ta lecture sans que tu n'aies à faire de manip.

    @ Jimmy
    Sur des blocs à la largeur réduite, le justifié total (droite et gauche) est en effet très désagréable à lire à cause des gros trous irréguliers que cela créé. Mais ce n'est pas étonnant qu'un graphiste fasse ce choix, c'est plus "joli" c'est vrai... mais moins lisible.
    Un article complémentaire à ce sujet (avec exemple) :

  7. Sylvie

    Merci pour l'article, c'est intéressant de voir ce changement au niveau des polices dans le web surant ces 5 dernières années. Après à ma connaissance, lorsqu'il s'agit de sites commerciaux importants c'est en général avec des tests que l'on détérmine la "bonne police".

  8. Nicolas Richer

    Pour ce qui est du choix de taille de police, il existe un outil très pratique en ligne : Le "Golden Ratio Typography Calculator" (http://www.pearsonified.com/typography/).

    Il permet de calculer la taille de police (et la hauteur de ligne recommandée) en fonction de la largeur du texte (658px chez toi Sylvain) et du nombre de caractères par ligne souhaité. Toutes les études que l'on trouve en ligne s'accordent à dire que 75 caractères par ligne est le maximum souhaitable (http://baymard.com/blog/line-length-readability).

    Donc si j'entre 658 pixels de largeur d'un côté et 75 CPL (characters per line) de l'autre, il me propose de régler ma font-size à 20px.

    Tu as donc de la marge !

  9. Camille

    Bonjour !

    Merci pour cet article Sylvain, parce que la question du texte justifié, je l'ai à peine vue récemment sur une liste de commentaires (je ne sais plus où d'ailleurs)... Et j'ignorais complètement que cela n'aidait pas la lecture.

    Je me pencherai sur la question pour mon site, en demandant aux gens. Mais ce n'est pas le propos. Comment expliquer ce problème d'ailleurs ? Après tout, si l'on met des sauts de lignes, des paragraphes, etc. Cela devrait fonctionner, non ? En revanche, pour le responsive, c'est bête, mais je n'y avais pas du tout pensé, et effectivement, ça part un peu en sucette selon :/

    J'te laisse sur une réflexion : je suis jeune, et mes yeux ne me trahissent pas trop encore (pas trop, on a dit...), tu peux changer tes commentaires ? C'est gris sur fond blanc, et c'est tout petit.

    Remarque, tu as peut-être volontairement fait ça pour voir les réactions et terminer l'argumentation par de la pratique...

    Merci encore, et très bon lundi 🙂

    Cam'

  10. Sylvain Auteur de l’article

    @ Sylvie
    Les tests, il n'y a que ça de vrai !

    @ Nicolas
    Merci pour ces outils !

    @ Camille
    Pas compris la fin de ton commentaire.

  11. Camille

    @Sylvain Je disais que le formulaire de tes commentaires est pérrav' niveau lisibilité. C'est gris clair sur fond blanc, c'est écrit en tout petit. Je demandais donc si c'était volontaire de ta part. Car ce problème sert directement le propos de ton article 🙂

  12. Sylvain Auteur de l’article

    @ Camille
    Mais tu as complètement raison !
    On vient de couper trois doigts au dev, ça lui apprendra. Il corrige avec les 7 qui lui reste.

  13. Mitsu

    Bonjour,

    Très intéressant cet article, j'avais noté aussi une tendance à aggrandir les texte, par contre qu'en est il de l'effet ça pique les yeux. Noir sur blanc c'est toujours mieux ?

    Par exemple comme beaucoup d'autre développement je met toujours un thème sombre sur mon éditeur de code, quand je remet une thème avec le code sur fond blanc, ça m'agresse les yeux maintenant. Du coup est-ce que sur une longue lecture le blanc sur noir ne serait pas mieux pour la fatigue des yeux ?

  14. Sylvain Auteur de l’article

    @ Mitsu
    On parle plus de facilité de lecture, de lisibilité, que de repos des yeux proprement dit.
    Regarde l'exemple dans le lien que je donne dans l'article et lit tout le texte, ensuite compare avec l'autre lien en noir sur blanc.

  15. Guillaume

    En effet, l'écriture en blanc sur fond noir, ça brule les yeux, surtout quand on plonge dans la nuit pendant des heures avec le simple renfort de la lueur de la lampe de bureau.
    Personnellement, je trouve intéressant de laisser le choix au lecteur entre plusieurs plusieurs "profils" calorimétriques comme c'est le cas dans le panneau d'administration de certains forums.

  16. Mathieu

    Bonjour Sylvain,

    tout à fait d'accord avec vous sur la taille des caractères et sur le format de texte dit "justifié" : comme le souligne François dans son premier commentaire, en imprimerie c'est facile de faire quelque chose de justifié mais qui permette de ne pas perdre le fil (j'ai grandi en partie dans une imprimerie !) mais sur Internet la taille des écrans prime.

    C'est ce qui nous avait servi de fil conducteur lorsque nous avions monté le site de l'agence : écrit au moins en 12 voire 14 (et je me rends compte aujourd'hui que c'est presque trop petit) et en drapeau (je viens d'apprendre le terme avec votre article).
    Eh bien, vous avez gagné un nouveau suiveur !

    Bonne journée,

    MT

  17. Sylvain Auteur de l’article

    @ Guillaume
    En effet, laissez le choix au lecteur c'est le sumum.

    @ Mathieu
    Quand je pense qu'il y a 10 ans, je faisais des trucs en 10px...
    Sinon, ne me suis pas partout, parfois je ne sais pas où je vais 🙂

  18. Olivier CLEMENCE

    Hello Sylvain,
    oui c'est vrai la tendance est la même sur les blogs américains qui ont des tailles de polices bien plus grandes que les nôtre. J'ai moi aussi fait la même démarche sur mon blog et je dois encore le faire sur ma boutique en ligne.

    Je n'avais pas de difficulté particulière à lire mon blog mais en le comparant à d'autres (américains donc) et certains site que j'apprécie (apple, evernote, ...) je me suis rendu compte que la taille de police que j'utilisais était vraiment beaucoup plus petite.

    J'ai donc tous simplement fait l'essai (y a plus compliqué comme réglages sur un blog faut avouer :D) et je me suis rendu compte immédiatement que mes textes était bien plus agréable et la lecture plus fluide...

    J'ai aussi eu quelques retours positifs suite à ce changement !

    @+,
    Olivier CLEMENCE

  19. Régis

    Salut Sylvain,

    je savais que je n'avais pas les bonnes pratiques, mais j'ai toujours la politique de l'autruche égocentrique en la matière. A savoir : "Moi je préfère comme ça, alors c'est comme ça".
    Je publie tout petit bien souvent, et je justifie tout (même le texte ! lol).

    Je rajoute en bas de ma todolist cet aspect à rectifier...

    @Camille PS : rhoo Camille, le majeur, non mais doucement, faut se calmer un peu.

  20. Sylvain Auteur de l’article

    @ Régis
    Tu verras que tu t'y intéressera de plus près en vieillissant.
    C'est comme les gros boutons plus pratiques à cliquer quand la main tremble 🙂
    Pour Alzheimer en revanche, je n'ai pas de solution...

Partagez sur :

Les commentaires sont fermés.