L’Atelier - médias libres

Accueil > blog > [Boîte à outils] Quelques ressources pour améliorer la lisibilité de nos (...)

[Boîte à outils] Quelques ressources pour améliorer la lisibilité de nos médias

lundi 17 décembre 2012, par Atelier médias libres

Sur le web, à la différence d’une affiche par exemple, l’impératif est moins de l’ordre du graphisme que de la lisibilité : le contenu c’est surtout du texte. La lisibilité sur écran est aussi moins facile que sur un livre. Les caractéristiques techniques évoluent également et compliquent la donne. Mais, pour tous les supports, quelques connaissances permettent rapidement de proposer des textes qui seront plus faciles d’accès pour les lecteurs et lectrices, pour qu’illes puissent se concentrer sur le contenu :
- le choix de typos adaptées,
- le respect de quelques rêgles de mise en page [1].

Quelques exemples

Indymedia

Cet article standard d’Indymedia (par ailleurs très intéressant) est difficile à lire :
- la police utilisée est une typo « bâton », c’est beaucoup moins lisible pour les textes longs qu’une typo « à empâtements ».
- les lignes de texte sont trop longues, il faut essayer de ne pas dépasser les 70 signes (grand max). Sur un écran de taille moyenne, on atteint ici les 110 signes par ligne ! Sur un écran 1024 x 800 (une taille très faible, inférieure à celle des ordinateurs portables récents), on est encore à 80 signes. Le choix de l’élasticité des pages web, choix à l’origine de la plupart sites Indymedia, est problématique à l’heure où les écrans peuvent être très larges [2].

Rebellyon

Sur Rebellyon, la « justification » (la longueur des lignes) est aussi problématique pour la lisibilité même si elle est plus courte et fixe (elle ne varie pas en fonction de la largeur de l’écran) : 90 signes par ligne. Et les polices de caractères utilisées, de l’Arial (ou de l’Helvetica, selon les ordis) pour les titres et le Georgia pour les textes sont trop courantes. Les évolutions du web permettent aujourd’hui de proposer des typos avec plus de caractère, comme sur cette page d’Article 11.

Article 11

La justification des lignes de cet article est assez courte, et la police de titraille originale tout en étant très lisible. Histoire de critiquer (gratuitement), on pourra regretter le manque de couleurs (à moins qu’on tienne à reproduire l’ambiance des tracts photocopiés) et la typo de texte courant trop petite et peu originale (du Times vieux comme le monde, usé par une utilisation sur tous nos comptes-rendus révolutionnaires d’AG, listes de courses…).

Livres

- le Guide pratique de choix typographique . S’il n’y avait qu’un seul ouvrage à connaître sur la typographie, ce serait celui de David Rault. Il présente une trentaine de typos essentielles, leur histoire et leur identité, avec des exemples et des noms de polices de caractère similaires. Une boussole bienvenue dans un univers qui compte des milliers de possibilités, qui rappelle que le choix typographique n’est pas une affaire d’inspiration mais qu’il est ancré dans une histoire visuelle [3].

Clarendon 1
Clarendon 2

Concernant la mise en page de livre, on pourra lire :
- Livre et typographie de Jan Tschichold. Les fondamentaux de l’édition de livre par un ancien du Bauhaus revenu aux vieilles traditions, du choix typographique à celui du papier.

Vidéos

- Une introduction très générale d’une heure par David Rault, l’auteur cité plus haut.


La typographie comme outil de design (David Rault) par parisweb

- La macrotypographie de la page web, comprendre en 50 minutes la typographie sur le net.


La macrotypographie de la page Web (Anne-Sophie... par parisweb

Liens

- Un tutoriel interactif sur les bases de la typographie sur le web.

- FontSquirrel.com propose des polices de caractère de qualité, la plupart sont utilisables sur vos sites web (webfonts) mais aussi sur papier.
- Pour tester en quelques clics différents assortissements de webfonts, les télécharger depuis FontSquirrel ainsi que le code pour leur affichage sur votre site. Un site qui permet de gagner beaucoup de temps.
- Google Webfonts propose 613 familles de polices à intégrer sur vos sites juste à travers un lien (à voir au niveau sécurité si ça ne pose pas de soucis, a priori Google enregistre que votre IP consulte un site qui utilise ses webfonts).
- Sur les sites comme DaFont, on trouvera des milliers de police à utiliser avec parcimonie ; pour la titraille d’affiches ça passe, pour le reste, pas trop.

- Quelques textes intéressants (en anglais) :

- Des sites assez pointus sur la typographie sur le web : Typographisme.net.
- Pompage.net, sur le webdesign (attention à la noyade, on peut trouver sur ce type de site des milliers d’infos parfois contradictoires, même s’il y a aussi beaucoup de choses intéressantes).

- Les typographes Muriel Paris et Jean-François Porchez proposent tous les deux des ressources sur le sujet, liens, bibliographies et vidéos.

Mise à jour 13 février
- http://www.thinkingwithtype.com/ le livre de référence d’Ellen Lupton, disponible en français. Le site propose une grande partie des ressources du livre en anglais.


[1L’auteur de ces lignes se casse souvent la tête sur la typographie sur différents sites ou journaux ou livres et se rend bien compte que ce n’est pas toujours évident. Cet article a pour but qu’on avance un peu sur le sujet en mutuallisant les ressources.

[2Il existe des solutions pour ça avec les media-queries qui adaptent la mise en page en fonction de la taille de l’écran.

[3Les sites sous-surveillance.net utilisent abondamment l’une des polices qui fait l’objet d’un chapitre dans ce livre, le Gill Sans, conçu pour la fameuse carte du métro londonien par Éric Gill, un typographe dont les sympathies anarchistes sont connues.

Messages

  • la police utilisée est une typo « bâton », c’est beaucoup moins lisible pour les textes longs qu’une typo « à empâtements ».

    Je n’ai pas lu les vidéos ni le livre que vous conseillez, mais si je me fie aux sites web que je consulte, une police « sans serif » (donc sans empâtement si j’ai tout saisi) est généralement recommandée pour le contenu.
    De mon expérience personnelle, je trouve aussi plus agréable à lire sur un site web des polices comme « Verdana » ou « Comic sans ms », qui sont des polices « sans serif » (de même, en essayant sur mon site web des polices « serif », je ne les trouve pas agréables pour les textes longs)

    Est-ce que vous pouvez préciser votre conseil ?

    Merci !

    • Les empattements sont adaptés aux textes un peu long des langues dont les mots sont en moyenne assez long, comme le français.

      Comme la lecture est « photographique » (on lit par gros groupes de lettres), et que les empattements augmentent le nombre de détails permettant d’identifier chaque caractère, les empattements sont plus adaptés à ce que l’on appelle le « texte courant » (tout ce qui n’est pas titre, intertitre, légende, etc.).

  • Pour compléter ces ressources, voici une présentation qui en fait la synthèse en 7 points simples, pour améliorer la lisibilité typographique, que j’ai donné en conférence aux dernières RMLL : annonce, support et vidéo.

Un message, un commentaire ?

modération a priori

Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

Qui êtes-vous ?
Se connecter
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.