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.
Messages
8 mars 2013, 12:38, par Labevue
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 !
11 mars 2013, 09:03, par Atelier médias libres
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.).
20 août 2013, 12:09, par tetue
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.