En tant qu’experts du portail, du mobile ou des sites web, nous sommes parfois amenés à travailler sur l’aspect graphique d’un site. La plupart du temps, notre travail se limite à intégrer ce qui a été dessiné par un designer (ce qui est, dans mon cas, plutôt une bonne nouvelle pour les yeux des clients). Mais parfois, le site a été conçu il y a longtemps, et nous devons ajouter de nouvelles pages ou fonctionnalités sans nous appuyer sur un designer, en respectant toutefois l’esprit de la charte graphique initiale. Nous devons donc acquérir sur le tas quelques connaissances de design. Il existe cependant un domaine très fortement méconnu des développeurs, qui concerne la typographie. Trop souvent, nous assimilons la typographie en webdesign au choix d’une belle police. Mais le plus important n’est pourtant pas là : il s’agit d’inciter à la lecture du texte par un ensemble de choix qui en rendront l’aspect général plus harmonieux et la lecture plus fluide. Voici donc quelques astuces et règles qui peuvent vous permettre de mettre en valeur des textes longs.
Longueur et hauteur de ligne
Patience et longueur de ligne font plus que force ni que rage.
Lors de la lecture, quand nous arrivons au bout d’une ligne, notre œil passe automatiquement au début de la ligne suivante pour poursuivre la lecture. Cette transition d’une ligne à l’autre induit un temps de latence, qui peut devenir néfaste s’il est trop long – c’est-à-dire si la ligne suivante n’est pas trouvée immédiatement, ou pire, si c’est la mauvaise ligne qui est lue. Le premier paramètre pour faciliter le passage d’une ligne à l’autre est la longueur de la ligne. Une ligne devrait comprendre de 40 à 80 caractères, pas plus, la longueur idéale s’il n’y a qu’une seule colonne étant estimée à 65 caractères. Pour calculer la largeur de la colonne afin de l’appliquer dans une feuille de style, on peut multiplier par 30 la taille de la police. On aura alors des lignes d’environ 65 caractères. Cette valeur pourra être ajustée pour correspondre au public visé : les enfants ont un champ visuel moins large que les adultes.
Une autre manière de faciliter la transition entre les lignes est d’ajuster l’espacement des lignes. Si les lignes sont trop proches les unes des autres, l’oeil se perdra plus facilement dans leur enchaînement, et si elles sont trop éloignées, il aura plus de chemin à faire, ce qui cassera le rythme de lecture. La pratique la plus courante est de fixer la hauteur de ligne à 120% de la taille de la police. On peut faire varier cette valeur pour donner une impression plus compacte ou plus aérée au texte, il conviendra alors d’ajuster la longueur de la ligne pour ne pas perdre en lisibilité. Il est techniquement possible d’avoir une hauteur de ligne plus petite que celle de la police, auquel cas il peut y avoir confusion entre les barres descendantes d’une ligne et celles ascendantes de la suivante (par exemple le p d’une ligne peut chevaucher un b juste en-dessous). C’est bien entendu une pratique à éviter, sauf peut-être pour un paragraphe gênant des conditions générales de vente.
Il n’existe qu’un moyen d’avoir une certitude quant à la fluidité de lecture : faire varier les deux paramètres que nous venons de voir et les tester. En css, on utilisera la propriété line-height pour faire varier la hauteur de ligne et width (ou max-width) pour la longueur. Il est nécessaire pour tester ces choix de typographie d’utiliser un autre texte que Lorem Ipsum, qui est idéal pour vérifier la vue d’ensemble, mais qui ne permettra pas de détecter qu’on a sauté une ligne (par exemple). Il convient de choisir un texte dans sa langue natale, simple (on ne doit pas avoir à interrompre sa lecture pour comprendre le sens du texte), et de le lire. Cela permettra de détecter les ralentissements dans la lecture dûs à la forme.
La taille des caractères
Aux caractères bien nés, la valeur n’attend pas le nombre de pixels.
Dans notre jeunesse étudiante, nous avons appris tous les bienfaits de la taille 12. Nos mémoires de stage ou compte-rendus de travaux dirigés devaient être rédigés en taille 12, même si parfois on trichait en passant au 11,5. Cette taille est certainement indiquée pour une impression papier, mais ce n’est pas une bonne idée de la reporter sur un site web (en considérant que 1 pt est l’équivalent de 1 px). En effet, la distance de lecture est différente, et pour une taille identique, un caractère paraît plus petit s’il est plus éloigné. Il devient de plus en plus fréquent (mais ce n’est pas le cas pour ce blog) d’utiliser comme taille 16px (ou 1em – cette unité étant préférable pour faciliter l’accessibilité). Il ne faut pas oublier, au moment où l’on fixe la taille de base de la police, quel est le public ciblé. Des personnes âgées auront plus de difficulté à lire de petits caractères.
Il existe plusieurs écoles concernant la bonne harmonie de l’échelle des tailles. Traditionnellement, on utilise toujours préférentiellement les tailles de caractères disponibles à l’époque de l’imprimerie de Gutenberg : 16, 18, 21, 24, 26 pour un texte en 16px et quatre niveaux de titre. Mais d’autres préfèrent se baser sur la suite de Fibonacci ou sur le nombre d’or. L’important, quel que soit le choix, est d’avoir une échelle typographique, qui améliore la lisibilité en établissant une hiérarchie claire. Ceci permet de bien comprendre l’enchaînement des titres, et donc la structure du texte.
Le choix de la police
Sérif, or not sérif, that is the question.
Le choix entre sérif et sans-sérif repose sur la tonalité que l’on souhaite donner à la page, mais il n’y a aucune règle gravée dans le marbre. Traditionnellement, sur papier, le sans-sérif est préféré pour les titres et les polices avec sérif pour le corps de texte, mais sur l’écran il existe des préconisations inverses. L’important, lors du choix de la police, est de vérifier qu’elle est aisément lisible dans le contexte dans lequel on souhaite l’utiliser – une police qui est très jolie pour former des titres peut être mal adaptée à une lecture au long cours, et inversement. On peut utiliser deux polices différentes, mais il est recommandé de ne pas dépasser ce chiffre.
On peut avec css3 (@font-face) embarquer une police, ce qui permet bien plus de variété dans les polices utilisées. Google fonts propose des centaines de polices open-source. Cependant, embarquer une police augmente la lourdeur de la page, ce qu’il faut prendre en compte si notre page est destinée à être vue depuis un mobile. Il faut vérifier que tous les caractères dont on a besoin seront présents dans cette police, c’est normalement le cas, mais il serait dommage qu’après avoir validé une police en utilisant un Lorem ipsum ou un texte en anglais, on réalise que les accents n’existent pas, ou bien que les caractères accentués sont difficilement lisibles. Tout comme pour la longueur et la hauteur de ligne, il vaut mieux tester sa police avec un texte réel pour en valider la lisibilité. Celle-ci peut être améliorée en faisant varier l’espacement entre les lettres avec l’attribut cssletter-spacing – quitte à réajuster ensuite l’espacement entre les lignes, qui devra être plus important si le texte est espacé.
Un autre point important avec le choix de la police est de vérifier son rendu sur un maximum de navigateurs et de systèmes d’exploitation. En effet, selon les navigateurs, les formats supportés ne sont pas les mêmes, il est donc préférable d’en déclarer plusieurs, sous la forme suivante :
@font-face{ font-family : "maFonte"; /* pour IE */ src : url('maFonte.eot'); /* pour les autres */ src : url('maFonte.woff') format('woff'), url('maFonte.svg#abcd') format('svg'), url('maFonte.ttf') format('truetype'); }
Attention également au rendu avec Chrome sous Windows : le lissage de la police peut ne pas se faire correctement. Un des correctifs consiste à forcer l’utilisation du format SVG.
/* Pour Chrome */ @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'maFonte'; src: url('maFonte.svg#abcd') format('svg'); } }
Le contraste
C’est un #666 !… C’est un #444 !… C’est un #222 !… Que dis-je, c’est un #222 ?… C’est un #000 !
Il est évident qu’un contraste très faible rendra la lecture difficile. Un minimum de contraste est également une préconisation pour l’accessibilité des sites, non seulement au niveau de la différence de couleur, mais aussi de l’intensité. Par exemple, du vert sur fond rouge ne sera lisible pour un daltonien que si le fond est beaucoup plus clair que l’écriture (de toutes façons, un vert fort sur un rouge fort risque de piquer les yeux de quiconque ayant une vision normale des couleurs).
Les contrastes trop forts sont également à éviter, car ils sont réputés augmenter la fatigue visuelle. Sur fond blanc, un gris pourra être préféré au noir. Une écriture claire sur un fond foncé est envisageable, mais de façon limitée (cela va générer de la fatigue visuelle au long cours). Il est alors recommandé d’utiliser une fonte grasse pour faciliter la lecture.
Quelques notions supplémentaires
Rien ne sert de souligner, il faut graisser à point.
La plupart du temps, nous n’avons pas la main sur le contenu du texte, c’est le client qui choisit ce qu’il mettra en gras ou souligné. Il est tout de même assez intéressant pour sa culture générale (et éventuellement ses propres publications) de connaitre ces quelques règles.
Quand choisir le gras, l’italique ou le souligné ?
Dans les éditeurs de texte classiques, ces types de caractères sont accessibles très facilement, mais nous ne savons pas toujours choisir. Voici quelques différences à connaître :
- L’italique se perçoit lors de la lecture ; cependant, quand on regarde le texte de loin, les termes en italique ne ressortent pas particulièrement. L’italique est donc intéressant pour marquer une différence lors de la lecture. On peut l’utiliser pour une citation, des mots étrangers, ou pour mettre l’emphase sur un mot ou une phrase. Il est préférable d’éviter l’utilisation de l’italique pour de longs paragraphes, car sa lecture est plus difficile que celle des caractères droits. De plus, abuser de l’italique lui fait perdre son intérêt : si on met trop de choses en valeur, plus rien n’est réellement mis en valeur.
- Le gras est visible quand on regarde le texte de loin. Il attire l’œil, c’est donc un type de caractère particulièrement indiqué pour les titres. Le gras permet de structurer le texte, de mettre en valeur les entrées dans une liste par exemple. Il n’est pas indiqué de l’utiliser pour mettre l’emphase sur certains termes dans un texte à lire en continu : l’œil attiré par le gras va avoir tendance à “sauter” le texte qui ne l’est pas.
- Le souligné, tout comme le gras, attire l’œil, mais il gène bien plus la lecture ! Il est encore souvent utilisé comme indicateur d’un lien hypertexte, ce qui est une raison supplémentaire pour éviter son utilisation dans un autre contexte.
Les majuscules dans les textes
Les majuscules sont au début des mots quand ils suivent un point ou quand il s’agit d’un nom propre. Quand on écrit un mot entièrement en MAJUSCULES, il va inévitablement attirer l’œil, or, ce n’est pas forcément ce que l’on recherche quand on écrit un sigle (comme css ou html) ou un nombre romain (xixe siècle). Une manière simple d’éviter cela est d’utiliser les petites capitales. En css, vous les obtenez en utilisant :
font-variant: small-caps;
L’utilisation des chiffres arabes pose le même problème que celui des sigles, ils sont de par leur hauteur extrêmement visibles dans un texte. C’est pourquoi d’ailleurs la plupart des gens ont de l’aisance à retenir les chiffres contenus dans les textes, du moins quand ils ne sont pas écrits en toutes lettres. Certaines polices proposent pour y remédier des chiffres elzéviriens, appelés également “bas de casse”. En voici un exemple :
Ne négligez pas le contenu !
Avoir fait en sorte d’avoir un texte aisément lisible est bien, mais n’oubliez pas que cela ne sert à rien si l’orthographe et la ponctuation sont défaillantes. Les fautes peuvent générer un contresens ponctuel ou interdire la lecture automatique (par reconnaissance des mots), ce qui gêne considérablement le lecteur. Enfin, le style a son importance. À moins de faire de la littérature, le principe kiss (Keep It Simple, Stupid) peut s’appliquer aussi bien aux écrits en langue commune qu’à l’informatique. Les phrases sujet-verbe-complément sont parfaitement suffisantes !
Aller plus loin…
Nous partîmes ignorants ; mais par un prompt renfort
Nous nous vîmes tout sachant en arrivant au port.
Voici quelques sites que l’on peut consulter :
- http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/ : une introduction à la typographie ;
- http://typographisme.net/ : un site en français sur la typographie ;
- http://webtypography.net/toc/ : la bible de la typographie pour le web, avec les exemples de css ;
- http://www.kaikkonendesign.fi/typography/ : un guide sur la typographie pour un blog ;
- http://www.merttol.com/articles/web/checklist-for-better-web-typography.html : une checklist à suivre avant de mettre en ligne ;
- http://ia.net/blog/responsive-typography-the-basics/ : de bonnes explications sur l’importance de prendre en compte la distance entre l’œil et l’interface ;
- http://typecast.com/blog/contrast-through-scale : tout sur l’ordonnancement des titres et la manière d’obtenir un ensemble harmonieux ;
- http://www.alsacreations.com/article/lire/631-quelles-polices-pour-un-site-web.html : quelques suggestions si on ne veut pas utiliser de police embarquée (en français) ;
- http://www.p-interactif.com/spip.php?article2 : pour savoir comment choisir sa police (en français) ;
- http://accessites.org/site/2006/10/designing-for-dyslexics-part-1-of-3/ : une série de 3 articles concernant le design pour les dyslexiques, la plupart de ces conseils facilitant aussi la vie du lecteur ordinaire ;
- http://www.w3.org/TR/WCAG20/ : le guide des recommandations W3C pour l’accessibilité, un certain nombre correspondent aux bonnes pratiques de typographie ;
- http://www.google.com/fonts : des centaines de polices !
Il existe de nombreuses autres règles concernant par exemple la manière de couper les mots pour passer à la ligne, quel type de guillemets utiliser, la bonne taille du tiret selon le contexte, comment écrire les abbréviations ou dans quels cas utiliser ou non les majuscules. Ces bonnes pratiques concernent cependant l’écriture correcte du français, et non l’aspect de la typographie que je voulais vous présenter, qui est l’art de mettre en forme un texte dans une page web de façon à ce que le visiteur de la page soit incité à la lecture. Après ces quelques lignes d’introduction à la typographie, vous pouvez voir qu’il n’est pas grave de ne connaître comme police de caractère que Times New Roman et Arial. La typographie, c’est avant tout rendre un texte lisible, bien avant de choisir une police belle et originale.
En espérant que mon humour pitoyable ne trouble point trop le repos éternel de Jean de la Fontaine, Pierre Corneille, William Shakespeare et Edmond Rostand.
