5 règles simples pour améliorer l'affichage de vos textes

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

5 règles simples pour améliorer l'affichage de vos textes

Après avoir passé en revue les thèmes WordPress dans le cadre du SDC, j’ai voulu lister les erreurs les plus communes sous la forme d’un billet sur les 11 erreurs à faire pour être recalés à un concours de webdesign… Mais, il se trouve que parfois le hasard fait bien les choses : juste avant de fermer mon agrégateur pour un repos bien mérité, je suis tombé sur un titre racoleur. Et là, impossible de résister à la lecture et à l’envie de traduire en direct live cette profession de foi, Alpha et Omega pour tout **webdesigner qui se respecte (et qui respecte ses lecteurs !). Ce billet aurait pu s’intituler : Lisibilité, ce qui va sans dire, va mieux en le disant. Mais c’était sans compter le côté obscur de la force qui m’a soufflé un titre bien plus efficace ;)

La plupart des sites web sont remplis de textes trop petits pour être lus correctement. Pourquoi ? Il n’y a aucune raison particulière, juste une stupide erreur collective qui a commencée lorsque la résolution des écrans était vraiment faibles. Donc :

Ne nous demandez pas de spécifier nous-même la taille de la police.
Nous ne voulons pas modifier les préférences de notre navigateur chaque fois que nous visitons un site web.
Ne nous dites pas que les pages encombrées sont plus agréables à lire.
Les sites web remplis jusqu’à la gueule ne sont pas beaux, ils puent. Remplir les pages à tout prix n’a jamais aidé l’ergonomie. C’est la paresse qui pousse ces concepteurs à nous bombarder d’informations inutiles. Nous voulons que vous réfléchissiez pour sélectionner ce qui peut nous intéresser. Nous ne voulons pas faire le boulot à votre place.
Ne nous dites pas que faire défiler une page *saimal*.
Parce qu’alors tous les sites web sont nuls. Ils n’y a rien à reprocher aux longues pages. Rien du tout. De même qu’il n’y a rien de mal à tourner les pages d’un livre.
Ne nous dites pas que le texte n’est pas important.
95% de ce qui importe dans le webdesign est typographie.
Ne nous demandez pas de porter des lunettes.
Plutôt que d’avoir les yeux sur l’écran, nous préférons continuer la lecture confortablement assis dans une position relax.

Cinq règles simples à appliquer pour améliorer l’harmonie visuelle de vos pages web

  1. Corps standards pour les longs textes.

    Le corps du texte que vous êtes en train de lire n’est pas gros. Il s’agit de la taille par défaut définie par votre navigateur. C’est ce que nous voulons pour vous.

    Nous ne voulons pas cliquer sur des boutons pour avoir un texte plus ou moins grand. Nous ne voulons pas changer nos préférences. Nous voulons juste poursuivre notre lecture. Nous voulons que vous vous adaptiez à nos réglages, pas que vous soyez à côté de la plaque.

    C’est vrai qu’il n’est pas facile de créer un bon design avec les tailles par défaut ; mais cette difficulté vous guidera pour proposer un site plus clair et plus simple. Faire compliqué n’est pas si difficile, faire simple demande un peu plus de rigueur. Si la taille par défaut surprend au début, très vite vous ne voudrez plus voir de tailles inférieures à 100% ou 1em pour le texte principal : les concepteurs des navigateurs n’ont pas choisis cette taille par hasard !

  2. Des blancs tournants.

    Laissez respirer votre texte. Utiliser l’espace pour structurer un design n’est pas une option, c’est une question de goût. Aérer le texte réduit le niveau de stress comme il permet de se concentrer sur le fond. Inutile de forcer la dose. Cet espace blanc qui agrémente votre design n’est pas un effet de bord, c’est une conséquence logique d’un design fonctionnel. Qui a dit que les sites web devaient être chargés à bloc ?

    La largeur d’une colonne n’est pas seulement une question de design ou de format. La largeur d’une colonne devrait être proportionnelle à la taille de la police. Une largeur trop importante fatigue les yeux, tandis que les colonnes trop étroites perturbent le lecteur en obligeant le regard à des allers-retours trop rapides. » (Josef Brockmann, Grids Systems)

    Assurez-vous que la longueur des lignes n’est pas trop importante et que vous avez suffisamment de place de chaque côté pour la gymnastique des yeux pendant la lecture. Rappelez-vous que nous ne voulons pas ajuster la taille des caractères ou la résolution de l’écran : nous désirons seulement prendre connaissance du contenu. A cet égard, les colonnes extensibles sont une bonne chose ; les lignes qui n’en finissent plus, c’est le mal.

    La règle est simple : pas plus de 10 à 15 mots par ligne. S’il s’agit d’un design liquide – et si le corps est à 100% – une taille de colonne à 50% devrait le faire pour la plupart des résolutions utilisées.

  3. L’interlignage : ami ou ennemi ?

    Voici ce que les spécialistes de la lecture nous disent :

    Un interlignage trop faible ralenti la lecture parce que le haut et le bas de la ligne est balayé en même temps par le regard qui ne peut focaliser sur deux éléments en même temps. C’est une perte d’énergie inutile. C’est d’ailleurs la même chose pour les textes dont l’interlignage est trop important.

    L’interlignage par défaut des navigateurs est trop faible. En augmentant la hauteur de ligne de 140%, les textes deviennent tout de suite plus lisibles.

  4. Contraste des couleurs.

    Ce qui va sans dire, va mieux en le disant, mais si vous pensiez avoir tout bon avec ce qui suit :

    • texte gris clair sur un fond encore plus clair,
    • texte argenté sur un fond blanc comme neige,
    • texte gris sur fond jaune,
    • texte jaune sur fond rouge,
    • texte vert sur fond rouge,
    • etc.

    …alors vous n’êtes pas un *webdesigner*, vous en avez juste l’air. Si vous persistez dans cette voie, vous devez savoir que jamais personne ne sera capable de lire ce que vous avez à dire. Arrêtez le massacre et regardez plutôt ce que vous faites : à l’écran, un contraste trop important (texte noir sur fond blanc) n’est pas l’idéal, car le texte commence à scintiller. L’idéal est à chercher du côté des valeurs suivantes : texte #333 sur fond #fff.

  5. Pas d’images à la place du texte.

    Nous voulons effectuer des recherches sur la page que nous lisons, copier du texte, jouer avec le curseur et sélectionner du texte. Remplacer du texte par des images peut sembler attrayant, mais le web n’est pas fait pour ça. Il s’agit avant tout de communication, d’information ; et l’information a besoin d’être lisible, utilisable, améliorée, citée et envoyée. Point barre.

    Si vous n’êtes pas capable de faire en sorte que votre site web soit cool sans transformer les textes en images, j’ai bien peur que vous soyez parti pour recommencer depuis le début.

Dites-le haut et fort.

Si vous voulez des sites web plus lisibles, faites comme moi, faites un lien vers cette page pour que tout le monde sache de quoi il retourne. Si vous faites cet effort, je serais heureux de vous mettre en haut de la liste, sinon, vous vous retrouverez tout en bas avec un rel="nofollow" ^__^

Comment participer ?

Envoyez un email à oliver[at]informationarchitects.jp avec le lien menant à votre billet, plus quelques lignes à propos de votre site.

Si votre page est OK, vous apparaitrez sur cette page, que le design de votre page me plaise ou non. Sauf bien sûr, s’il s’agit de porno, de spam ou de politique.

PS : Si vous avez de la place dans un billet n’hésitez pas à faire passer le message (OK, les chaines sur internet, saimal). Si un élément de cette « craduction » vous semble perfectible, n’hésitez pas à me faire parvenir vos impressions afin que j’améliore ce texte qui pourra ainsi gagner ses galons de « traduction » ^__^

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



27 commentaires pour “5 règles simples pour améliorer l'affichage de vos textes”

  1. Samuel MARTIN dit :

    "Remplacer les images par du texte peut sembler attrayant, mais le web n’est pas fait pour ça" c’est pas le contraire ? -> Remplacer le texte par les images …

  2. loïc m. dit :

    Dans ta craduction tu parles de taille de texte qui doit être minimum de 1em par défaut… Il semble que tes commentaires ne respectent pas cette règle : je viens de me fracturer l’oeil droit en lisant le commentaire du dessus ;)

    Sinon personnellement, j’ai toujours misé mes mises en pages sur la typographie uniquement (ou presque), car j’ai tendance à perdre bcp trop de temps sous toshop et autre. J’ai pas la fibre artistique, alors mon design web perso est basé sur la typo, les couleurs et les espaces entres les parties :)

    Bien des web designers feraient bien de passer lire ces quelques lignes de ton biller t

  3. br1o dit :

    Samuel MARTIN > Bien vu, c’est corrigé, merci !

    loïc m > C’est vrai, la taille des commentaires parait vraiment faible comparée au texte avec la taille par défaut. Je me pencherais dessus. Tout à fait OK avec ton principe de mettre le paquet sur le texte qui est souvent l’élément dominant de la plupart des sites (et je ne parle pas des blogs !) mais aussi le plus négligé… du genre : – t’as vu comment j’ai traité ce visuel qui déchire ? – Ouais, mais tu le mets où le texte ? – Ah, ouais, tiens, c’est vrai… Bon, je mets tout en 10px et baste !

  4. /me sifflote…

    Etrange comme ça me rappelle certains de mes articles sur les fondamentaux de la mise en page qui manquent à beaucoup de "Webdesigner". ;)

  5. br1o dit :

    Aymeric > des liens, des liens ! (en plus il n’y a pas de nofollow…). Nul doute que ces règles de bons sens se retrouvent dans toutes les bonnes boutiques ;)

  6. Cyril dit :

    Ca fait du bien de pouvoir lire un billet calé au fond de mon siège sans forcer sur les yeux ! (surtout en fin de semaine). J’adhère totalement. Cyril

  7. Pfff Br1o ispice di fignasse. :)

    Pour rappel : http://www.ajcrea.com/index... http://www.ajcrea.com/index... http://www.ajblog.fr/index.php/q...

    Si un jour je retrouve du temps, je continue la série.

  8. Merci pour les liens, Aymeric, tiens, en parlant de "fignasse", je te souhaite de bonnes vacances :D a++

  9. Benoît dit :

    "La règle est simple : pas plus de 10 à 15 mots par ligne." Je suis d’accord avec le principe de ne pas faire une colonne de texte trop importante, mais pas avec la fourchette proposée. Il est difficile de garder son attention sur une colonne de texte qui n’occupe qu’un tiers (avec l’exemple de votre blog, sur un écran 1024px, et encore, aujourd’hui 1024px et un minimum) de la largeur.

  10. laeti dit :

    Brio, je ne sais pas si je te l’ai signalé mais j’ai finalement choisi ce nom de domaine et la solution où je ne passe pas mon temps à m’arracher mes divins cheveux auburn ! Bon, merci en tout cas pour tes encouragements. Et tu es le bienvenu, même sur un blog pour les nanas !

  11. laeti > le nom de domaine que tu as choisi sonne vraiment bien :) Tu as fais un choix judicieux avec GandiBlog qui t’évitera bien des soucis capillaires ;) Bienvenue dans mon aggrégateur et ma blogroll ! a++ Benoît > Sur ce billet, si j’ai pu artificiellement augmenter la taille de la police pour qu’elle se rapproche de la taille par défaut du navigateur, je n’ai pas augmenté la taille de la colonne ! De sort que le nombre de mots à la ligne est, je te l’accorde, bien trop faible. La largeur de la colonne pourrait sans problème passer de 500px à 800px ! Soit une taille tout à fait convenable en 1280×1024 Bien sûr, toutes les valeurs sont données à titre indicatif, sachant que les 15 mots/lignes peuvent passer facilement à 20 ;)

  12. Rémi dit :

    Toujours un plaisir de lire tes articles ;) Effectivement, la lisibilité devrait être la priorité des webdesigners. Totalement d’accord avec l’importance de la taille de police d’origine ainsi que l’interlignage.

    Par contre, dommage que certains liens dans l’article ne fonctionnaient pas (vers le site japonais)

  13. Rémi > En effet, il semble qu’à part la page d’accueil le site rencontre des problèmes :( J’espère que c’est passager car c’est vraiment une ressource intéressante en terme d’ergonomie, d’interface, etc. F5 ! F5 ! F5 ! ;)

  14. laeti dit :

    En plus tu réponds aux coms régulièrement ! Je suis en extase devant ton blog et les multiples possibilités au niveau design, contenu, etc. Je rêve d’un jour où j’aurais quelques compétences en la matière. Ouais, bon, tout ça reste un rêve… Chacun son job, finalement. Tout de même, j’aimerais bien avoir moi aussi de beaux verts comme ça, au lieu de mon truc blanc bleu pâlot…

  15. Goulven dit :

    C’est marrant, j’ai une traduction de "Improving accessibility through typography" (accessites.org/site/2007/… qui est en cours de relecture… On y retrouve plein de points que tu évoques ici, mais aussi des conseils sur le choix des polices. Faut que je secoue la liste pour qu’on le sorte tant que le fer est chaud, mais avec l’été les consensus sont un peu ralentis…

  16. Goulven dit :

    On dirait que les expressions régulières ont dévoré mon lien. Il s’agit donc, sans les parenthèses, de accessites.org/site/2007/…

  17. bruno bichet dit :

    Goulven {

    Je ne connaissais pas le site en question, c’est réparé. Les questions liées à la lisibilité sont dans l’air du temps : et ce n’est pas plus mal ;) En fait, petit à petit les gens se rendent compte qu’être lu par Google, c’est bien, mais pas suffisant ^_^ }

  18. lomig dit :

    salut, j’étais passé à côté de cet article : bravo et merci. Le rappel de ces règles de bon sens est indispensable…je vais me repencher sur mon design pour vérifier que je respecte ces règles. à bientôt !

  19. Hervé dit :

    Je dois être débile… que signifie cette phrase ? « faire défiler une page saimal »

  20. Merci pour tous ces commentaires. L’interligne est le genre de truc auquel je n’avais jamais fais gaff.

  21. Bruno Bichet dit :

    @Hervé: le défilement en question concerne le scroll vertical : pendant longtemps une certaine catégorie de « webdesigner qui en ont juste l’air » se sont attachés à faire des mise en page web qui tenait sur un seul écran (sans scroll vertical, donc).

    Le « Saimal » fait référence à un site qui a eu son 1/4 d’heure de gloire à une époque : http://les.filles.saimal.fr/. les garçons aussi d’ailleurs http://les.garcons.saimal.fr/ :)

    @Billyboylindien: Content que tu y trouves ton bonheur ;)

  22. bom dit :

    Très bien les règles simples.

    Comment + : le « pas de défilement vertical » : malheureusement, cette demande ne vient pas forcément du webdesigner qui se la pète, mais surtout (de par mon expérience de webdesigner qui ne se la pète pas trop) des clients. Des clients, pour la majorité institutionnels, qui en sont restés à la borne internet d’exposition ou au cd-rom, vous voyez ? Des clients qui sont des bêtes de concours mais qui n’ont pas encore compris que la majorité des souris vendues sur le marché comportait deux boutons et une mollette au milieu. En avril 2008, j’ai encore dû argumenter pour « imposer » la page longue à un client qui voulait une site « innovant » sur une seule hauteur d’écran. Mon pauvre ami, mais qu’est-ce qu’on peut faire de toi…

    Pour le contraste des couleurs, ça va s’améliorer. Ya les contraintes d’accessibilité qui vont nous y aider (et parce que les clients, ils veulent de l’oooooooor !).

  23. […] l’accessibilité du web passe aussi par un traitement typographique globale au niveau de la page et l’interlignage n’est malheureusement pas le seul paramètre oublié. Pour se rafraichir la mémoire, révisons 5 règles pour faire de belles mise en pages. […]

  24. […] Lire 5 règles simples pour améliorer l’affichage de vos textes. […]

  25. […] bonne occasion pour mettre en pratique le manifeste pour un interlignage minimum syndical et les cinq règles pour améliorer l’affichage de vos textes. L’objectif est de déterminer une taille de police de caractère et une largeur de colonnes […]

  26. […] La typographie : c’est vraiment très important. […]

  27. […] à sa taille, ne laissez pas choisir le lecteur, je ne peux d’ailleurs que vous conseillez cet article [CSS4Design:en fr]. Moi je met généralement une police de 15 pour les paragraphes, et laisse […]

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site