Remerciements
Merci à David Rault, directeur de la collection « Atelier Perrousseaux », de m’avoir offert l’opportunité de sortir de ma zone de confort qu’est le design d’interfaces en me proposant ce projet d’écriture. La réalisation de cet ouvrage a été un défi qu’il m’aurait été impossible de relever sans la confiance de mon éditeur, la patience et les encouragements de ma petite femme Célia Carpaye (« La plus, la mieux… ») et le soutien de mes proches.
Merci également à Tim Brown pour son aide sur certains points techniques. Je tiens enfin à remercier tous ceux qui, sans le savoir, me permettent d’entretenir cette passion dévorante pour la typographie : Jean-François Porchez (Typofonderie), Elliot Jay Stocks (8 Faces), John Boardley (I love typography, Codex), Erik Spiekermann (FontFont), Jason Santa Maria (Typekit, Typedia)… et bien sûr toutes les personnes talentueuses qui participent à l’évolution de notre métier du design web et en qui je puise une partie de mon inspiration : Mark Boulton, Mandy Brown, Dan Cerderholm, Andy Clarke, Simon Collison, Tina Roth Eisenberg, Richard Rutter, Matthew Smith, Jon Tangerine, Khoi Vin, Trent Walton, Jeffrey Zeldman…
Collection dirigée par David Rault
Illustrations : Aurélien Foutoyet
Révision et conception graphique : Adverbum
ISBN : 978-2-911220-66-1
ISBN de la version imprimée : 978-2-911220-43-2
© Atelier Perrousseaux éditeur 2012
www.perrousseaux.com
www.adverbum.fr
Aux termes du Code de la propriété intellectuelle, toute reproduction ou représentation, intégrale ou partielle de la présente publication, faite par quelque procédé que ce soit (reprographie, microfilmage, scannérisation, numérisation…) sans le consentement de l’auteur ou de ses ayants droit ou ayants cause est illicite et constitue une contrefaçon sanctionnée par les articles L 335-2 et suivants du Code de la propriété intellectuelle. Toutefois, l’autorisation d’effectuer des reproductions par reprographie (photocopie, télécopie, copie papier réalisée par imprimante) peut être obtenue auprès du Centre français d’exploitation du droit de copie (CFC) - 20, rue des Grands-Augustins - 75006 Paris.
Dépôt légal juin 2012
Alors qu’elle fut longtemps restreinte et mise de côté, la typographie sur le web est aujourd’hui devenue un vaste champ de compétences. Les web designers ont aujourd’hui à leur disposition de puissants outils de mise en page et peuvent choisir parmi des milliers de caractères pour répondre aux problématiques de leurs clients.
Cette récente évolution de la typographie numérique s’est naturellement accompagnée d’un fort engouement des professionnels du web, longtemps limités sur ce sujet pourtant si important. De la propriété CSS @font-face permettant l’affichage de n’importe quel caractère – ou presque – sur une page web, aux possibilités offertes par le module Fonts des CSS3 en passant par les nouveaux formats de caractères, la diversité des moyens typographiques à notre disposition peut sembler déroutante à première vue.
Nous aurions pu consacrer un livre complet à chacun de ces nouveaux outils ; l’approche de cet ouvrage se veut plus globale et traitera de la problématique sous-jacente à la typographie : la lisibilité. En effet, l’ouverture des frontières typographiques sur le web ne doit pas nous dispenser de réfléchir au bon usage de ces nouveaux outils à notre disposition.
Comment le support écran influence-t-il notre lecture ? Pourquoi et comment les systèmes d’exploitations et les navigateurs modifient-ils le rendu des caractères ? Quelles sont les caractéristiques d’une police optimisée pour la lecture sur écran ? Comment tester la lisibilité d’un contenu web ? Etc.
Cet ouvrage s’adresse en particulier aux professionnels du web : designers, intégrateurs, ergonomes, etc., mais également à tous les curieux souhaitant aborder la typographie web par le prisme de la lisibilité.
Chapitre 1
À PROPOS DE LISIBILITÉ
En 2006, Oliver Reichenstein1 écrivait un excellent article au titre provocateur : « Web Design is 95% typography »2. Écrit il y a plus de cinq ans, ce billet soulignait l’importance de la typographie sur le web (système initialement créé pour la diffusion de contenu textuel interconnecté par un système de liens hypertextes). Bien qu’ayant très largement évolué pour devenir « multimédia », le web est bien plus un média de texte qu’un média d’image. Qu’il s’agisse de performance, de référencement, ou encore d’accessibilité, le texte y est clairement le moyen de communication le plus approprié. Ce n’est d’ailleurs certainement pas un hasard si les publicités Google s’appuient sur des mots (Google Ad Words) et non sur des visuels. Bien qu’un web designer n’ait pas vocation à être un typographe – ce sont deux métiers très distincts – le travail typographique est une partie importante des métiers du web. Depuis l’arrivée des CSS3, les moyens de contrôle du contenu textuel sur le web se sont considérablement affinés. Qu’il s’agisse du choix des caractères ou de la mise en page du texte, les possibilités sur le web sont maintenant proches de celles du « print ».
Le métier de web designer consiste à concevoir et réaliser des systèmes répondant aux problématiques de communication des clients. Sur le web comme ailleurs, pour que les messages passent, ils doivent pouvoir être décodés par les visiteurs. La lisibilité typographique n’est donc pas une option mais bien une nécessité qui doit requérir toute notre attention.
Un site web, aussi travaillé soit-il, n’aura aucun intérêt si son contenu n’est pas lisible par les internautes. La lisibilité est une notion qui peut sembler évidente à première vue mais qui nécessite peut-être que l’on s’y attarde quelque temps. Voyons ce que nous dit le dictionnaire : la lisibilité, c’est ce qui peut être lu sans peine et sans ennui, d’une part, mais c’est aussi ce qui est facilement intelligible.
Ce mot cache donc deux dimensions distinctes :
– une notion matérielle, physiologique (ex. : notre capacité à pouvoir distinguer les lettres entre elles) ;
– une notion intellectuelle, psychologique, affective (ex. : notre capacité à comprendre le sens d’un texte).
Il n’échappera d’ailleurs pas aux anglophones que la notion de lisibilité est représentée par deux termes distincts dans la langue anglaise : legibility caractérise ce qui est déchiffrable par notre œil (ex. : réussir à identifier correctement une lettre) et readability, qui fait référence à ce qui est compréhensible (ex. : trouver facilement l’information que l’on cherche dans une page web).
La lisibilité est un concept inhérent à toute forme de communication écrite. L’écriture sert à communiquer, à faire passer un message, et la lisibilité du contenu est une condition nécessaire à la bonne communication.
Le web est un domaine nouveau et nous avons peu de recul pour analyser nos pratiques. Cela étant, la typographie existe depuis plusieurs centaines d’années (ses débuts datent du XVe siècle avec l’invention de l’imprimerie et des caractères mobiles de Gutenberg) et a énormément évolué au cours des époques.
C’est à partir de 1800 que les premières études sur la lisibilité ont vu le jour. Nous ne détaillerons pas ici tous les travaux sur le sujet mais nous nous arrêterons sur les résultats pouvant nous aider à améliorer notre compréhension des mécanismes de lecture. Bien que les contraintes liées au support écran soient très spécifiques, certains grands principes de lisibilité hérités des débuts de la typographie sur support papier peuvent tout à fait s’appliquer à nos pratiques professionnelles actuelles.
Cette première expérience consista à faire lire à des expérimentateurs un même texte (même mise en page et même justification) composé en Garamond d’un côté et en Didot de l’autre afin de comparer la lisibilité des deux caractères.
À la première lecture, les expérimentateurs ne virent pas de différence.
Anisson les fit alors reculer de plus en plus loin, jusqu’à ce qu’ils ne puissent plus lire le texte.
Résultat : le texte composé en Garamond restait lisible à plus grande distance que celui composé en Didot.
Il est intéressant de noter que le résultat de cette étude n’est certainement pas étranger aux habitudes de lecture des expérimentateurs, plus habitués au Garamond qu’au Didot à cette époque (nous reviendrons plus tard sur cette notion d’habitude de lecture). À cause de la remarquable finesse de ses traits, le Didot apparaissait donc comme étant moins lisible que le Garamond.
Cette année-là, un certain Leclerc, qui n’était pas typographe mais notaire, publia une brochure dans laquelle il affirmait ceci :
– le lecteur devine plus qu’il ne lit ;
– la moitié d’un mot suffit pour en comprendre le sens ;
– même effacé, un mot peut être deviné en fonction de ceux qui le suivent et le précèdent ;
– la partie supérieure des mots est suffisante pour pouvoir comprendre le sens d’un texte.
Fort de ces conclusions, il affirma que la partie inférieure des mots était donc inutile et que sa suppression permettrait de diminuer de moitié les frais d’impression.
En 1886, James Catell émit l’hypothèse selon laquelle l’unité de lecture serait le mot et non la lettre. Au cours de ses expériences, il remarqua que la silhouette des mots semblait jouer un rôle dans la reconnaissance de ces derniers par les lecteurs. Il nomma cet effet le Word Shape Model.
Émile Javal, couverture de la Physiologie de la lecture et de l’écriture, Bibliothèque scientifique internationale, 1905.
Cette expérience, menée par le docteur Louis-Émile Javal, ophtalmologue, fut la première ayant réellement permis de décortiquer le processus de lecture. Il démontra que celui-ci était caractérisé par des à-coups et qu’il n’était pas linéaire comme on pouvait le supposer. Son expérience lui permit de conclure que chaque ligne de texte est parcourue en plusieurs saccades suivies de périodes de fixation durant lesquelles notre œil ne déchiffre que quelques lettres seulement. La lecture est donc un processus alternant périodes de mouvement et fixations.
Le docteur Javal démontrera également que :
– Un lecteur lent fixera un secteur de 5 lettres (un mot) en moyenne.
– Un lecteur moyen fixera un secteur de 10 lettres (deux mots) en moyenne.
– Un lecteur rapide fixera un secteur de plus de 10 lettres (3 mots) en moyenne.
C’est un microphone placé sur la paupière des sujets qui permit de sonoriser les mouvements de l’œil lors de la lecture : fixation de la pupille, glissement, saut de ligne, etc., furent ainsi détectés.
Les différentes expériences de l’ophtalmologue permirent enfin de démontrer les points suivants :
– la lisibilité dépend de la taille des lettres (bien que des textes trop gros soient désagréables à lire) ;
– le lecteur reconnaît un mot grâce à sa silhouette ;
– les mots sont reconnaissables grâce à la partie supérieure des lettres (contrairement à la partie inférieure).
François Richaudeau démontra au travers de plusieurs expériences que :
– l’unité de lecture serait bien le mot et non la lettre ;
– le lecteur ne déchiffre les lettres qu’au travers des mots qu’elles composent.
« Sleon une édtue de l’Uvinertisé de Cmabrigde, l’odrre des ltteers dnas un mtos n’a pas d’ipmrotncae, la suele coshe ipmrotnate est que la pmeirère et la drenèire soit à la bnnoe pclae. Le rsete peut êrte dnas un dsérorde ttoal et vuos puoevz tujoruos lrie snas porlblème. En efeft le creaveu hmauin ne lit pas chuaqe ltetre elle- mmêe, mias le mot cmome un tuot. »
Le lecteur aura très probablement compris le sens du texte ci-dessus bien que les mots qui composent ce paragraphe soient incomplets. Rien d’étonnant puisque cette simple expérience met en évidence le fait que la lecture est une question d’habitude et que le processus de lecture fait appel à notre mémoire (la silhouette des mots que nous avons l’habitude de lire y est conservée) et au contexte de lecture.
Bien que très largement admise pendant longtemps, la thèse de la reconnaissance de la silhouette des mots (Word Shape Model) a été remise en cause suite à des études contradictoires mettant en évidence le rôle non négligeable des habitudes du lecteur et du contexte (McClelland & Johnson - 1977, Adams - 1979) dans le processus de lecture.
Les quelques expériences citées ci-dessus ne représentent qu’une petite partie des nombreuses recherches ayant été menées au sujet de la lisibilité typographique mais leurs résultats sont très importants pour bien cerner les mécanismes à l’œuvre dans le processus de lecture.
Récapitulons les points importants que nous pouvons retenir :
– nous ne lisons pas de façon continue mais par à-coups ;
– les zones de fixation ne représentent que quelques caractères seulement ;
– la partie supérieure des mots joue un rôle important dans le processus de lecture ;
– les habitudes et le contexte de lecture jouent un rôle important.
Nous allons maintenant entrer plus en détail dans le processus de lecture et voir en quoi le contexte et les habitudes de lecture y jouent un rôle de premier ordre.
Bien que la lecture soit automatique pour bon nombre d’entre nous, il s’agit d’un processus complexe que nous avons appris depuis notre plus jeune âge et qui évolue en fonction de notre expérience.
Comme nous l’avons vu précédemment, contrairement à ce que l’on pourrait penser, le processus de lecture n’est pas continu.
Nos yeux vont parcourir chaque ligne de texte en faisant des petits bonds successifs appelés saccades et en se fixant durant quelques dixièmes de seconde sur de petites zones de quelques caractères seulement (appelées empan), durant lesquels notre cerveau va collecter l’information. Chaque saccade dure environ 25 ms et permet de parcourir de 7 à 9 lettres en moyenne. Bien que cela soit complètement transparent pour nous, environ 10 à 15% des saccades sont « régressives », c’est-à-dire que leur mouvement est inversé.
Illustration mettant en évidence les zones de collecte d’information.
Des études (McConkie et Rayner - 1975) ont mis en évidence la taille de la zone de collecte d’information qui correspond à environ 7 lettres à droite et à gauche du point de fixation.
La zone de netteté (appelée fovea) n’est constituée que de 3 à 4 lettres au niveau du point de fixation et diminue avec l’augmentation de la distance par rapport à ce dernier. L’extrémité de la zone de collecte d’information permet de guider notre lecture et d’anticiper la localisation de la prochaine zone de fixation sur la ligne. Les études montrent que les fixations arrivent toujours au début ou au milieu d’un mot (mais jamais entre deux mots) et ne tombent pas sur les mots courts (le, la, les, et, mais, ta, ces, etc.), ceux-ci étant détectés dans la zone de collecte périphérique et décodés grâce au contexte de lecture.
Illustration mettant en évidence les mouvements oculaires lors du processus de lecture.
Puisque le processus de lecture n’est pas continu, une grande partie du contenu que nous lisons n’est pas réellement « lue » mais plutôt « devinée », reconstituée par notre cerveau grâce au contexte de lecture et à notre mémoire.
Notre cerveau fonctionne parfois comme un muscle qui va se transformer en fonction de son entraînement. Pour la lecture, c’est exactement la même chose : plus nous lisons, plus notre cerveau mémorise les mots, et plus il sera facile pour lui de les reconnaître la fois suivante. L’exercice de la lecture nous permet de consolider les connexions neuronales de notre cerveau et d’être ainsi plus efficace pour identifier les mots. C’est ce phénomène, entre autres, qui permet d’expliquer qu’un lecteur expérimenté pourra lire plus rapidement qu’un lecteur novice : c’est une question d’entraînement.
Maintenant que nous en savons un peu plus sur les mouvements oculaires constitutifs du processus de lecture, nous allons chercher à comprendre quel est le rôle de la forme des lettres et des mots dans ce processus.
Il n’aura échappé à personne que, mis à part quelques cas particuliers, la forme des lettres de notre alphabet est plus ou moins toujours la même. Nous avons d’ailleurs appris à lire à partir des formes basiques de ces lettres, aussi appelées squelettes.
Chaque lettre majuscule, minuscule, chiffre et autre caractère spécial, possède un squelette de base, une forme spécifique que nous avons mémorisée au fil du temps.
Pour déchiffrer un caractère, notre cerveau va identifier son squelette et le comparer aux formes qu’il possède en mémoire. S’il existe une similarité, la lettre est reconnue.
Superposition de différentes polices de caractères : Arial, Times New Roman, Comic Sans MS, Courrier New, Impact, et illustration de leur squelette (Helvetica Neue Ultra Light)
Contrairement à ce que l’on pourrait penser, les lettres contenues dans un mot ne sont pas lues de façon linéaire dans le sens de lecture mais plutôt de façon simultanée. Ce sont les caractéristiques de la forme du squelette qui permet au cerveau d’identifier chacune des lettres composant les mots. Plus la forme d’un caractère sera éloignée de celle de son squelette initial, plus son identification sera compliquée et plus la lecture sera difficile.
Le choix d’un caractère typographique étant avant tout dicté par sa fonction, il convient ici de distinguer les caractères utilisés pour les titres (aussi appelés caractères de titrage3) et ceux utilisés pour la composition du texte courant (caractères de labeur4).
Bien qu’ils ne favorisent pas le confort de lecture, les caractères aux tracés parfois très éloignés des formes « classiques » peuvent être utiles pour véhiculer un message en plus de celui dispensé par le contenu lui-même, par exemple : texte publicitaire court, gros titre, identité de marque et logos, etc.
Pour ce type d’utilisation, les choix typographiques ne seront pas guidés par le besoin d’un confort de lecture mais par d’autres critères : création de points de repère visuels aidant le lecteur à « scanner » un contenu, besoins d’ordre esthétique, création de logotypes, etc.
On retrouve ce type de caractères sur les sites des fonderies ou sur les sites proposant des webfonts5 (gratuites ou payantes) dans des catégories telles que « Poster », « Fantaisie » ou « Display ».
À l’inverse, lorsqu’il s’agit de caractères devant servir à composer des textes longs, c’est bien le confort de lecture qui doit être privilégié. Il sera alors plus judicieux d’opter pour des caractères dont le dessin des tracés ne s’éloigne pas trop des squelettes « classiques ». Déjà parfaitement mémorisées par le lecteur, les formes seront immédiatement identifiées par celui-ci, de façon tout à fait transparente, et la lecture en sera ainsi facilitée.
Sur le web, des polices de caractères comme Georgia ou Verdana sont utilisées depuis de nombreuses années et sont considérées comme particulièrement lisibles pour la mise en page de textes courants. Toutefois, depuis la démocratisation de la propriété @font-face, de nouveaux caractères commencent à s’imposer pour la composition des textes longs. C’est par exemple le cas pour FF Meta Web Pro6, FF-Meta Serif Web Pro7 ou encore FF-Dagny Web Pro8, qui restent lisibles sur les principaux systèmes d’exploitation (et navigateurs web) pour la composition de texte de paragraphes.
La forme des caractères du logo du site SummerCamp 20109 réalisé par le designer Mike Kus permet de véhiculer un message au-delà du texte lui même. Les modifications réalisées sur les formes déjà très « organiques » du logo collent parfaitement à la stratégie de communication du site : nature, légèreté, convivialité, etc.
Dans son projet Daily Drop Cap10, Jessica Hische (illustratrice et créatrice de caractères typographiques) a choisi de créer et partager une lettre chaque jour. Ces véritables œuvres typographiques sont partagées gratuitement afin d’être utilisées en guise de lettrines sur des pages web. Ce projet est un bon exemple de customisation du squelette des caractères à des fins esthétiques.
Georgia 16 px/24 px11 utilisée pour les articles sur le site Information Architects12.
FF Dagny Web Pro 14 px/21 px utilisée pour les articles sur le site The Design Cubicle13 du designer Brian Hoff.
Bien que nous ayons longtemps cru à la supériorité du modèle de reconnaissance de la silhouette des mots (Word Shape Model aussi appelé Bouma), les résultats des études menées jusqu’à aujourd’hui tendent pourtant à prouver que l’ordre des lettres, le contexte et les habitudes de lecture tiennent un rôle bien plus important que ce que l’on pouvait penser.
Dans l’article « The Science of Word Recognition », Kevin Larson (docteur en psychologie cognitive ayant travaillé pour Microsoft) nous explique que les mots sont reconnus grâce à la position des lettres et au contexte de lecture. C’est ce qu’il appelle l’identification parallèle des lettres (« parallel letter recognition »).
Ces résultats sont surprenants puisqu’ils contredisent la théorie selon laquelle l’unité de lecture serait le mot et non la lettre. Le modèle d’identification parallèle des lettres ne tient pas compte du rôle de la silhouette des mots dans le processus de lecture. Il n’est pourtant pas rare de lire dans des articles ou des ouvrages traitant de la lisibilité que les irrégularités créées par le contraste entre les ascendantes et les descendantes vont favoriser la lisibilité du mot.
Pour illustrer cet exemple, essayons de mettre en évidence la silhouette du mot suivant :
Si l’on trace un rectangle épousant la silhouette du mot, on constate que le contour est relativement uniforme. On pourrait à peu de choses près le comparer à un rectangle.
Prenons maintenant la silhouette du même mot composé en lettres minuscules avec la première lettre majuscule :
Cette fois-ci, la différence de hauteur créée par la première lettre majuscule et les ascendantes et descendantes composant les lettres j et l apportent une irrégularité dans le contour.
Les défenseurs du modèle de reconnaissance de la silhouette des mots (Word Shape Modelreconnaissance parallèle des lettres