Si le Web s'enrichit et devient de plus en plus multimédia avec l'usage de l'audio et de la vidéo en HTML (voire de la 3D grâce à WebGL), le texte conserve une importance particulière sur Internet et reste le principal moyen de communication. Cependant, le designer M. Foutoyet, spécialisé dans la typographie, explique que la lecture à l'écran est plus difficile que sur papier à cause d'un certain nombre de facteurs. L'objectif de la typographie est donc d'optimiser au maximum la lecture pour les internautes.
Quelles sont donc les différences principales entre une lecture à l'écran et sur papier ? Tout d'abord, il existe une multitude de moniteurs avec différentes définitions, taux de contrastes, de luminosité, de fréquences de rafraichissement ou de couleurs. Ces écrans disposent en outre de résolutions différentes avec des densités de pixels par pouce plus ou moins élevées.
Deux types de lecture à l'écran
M. Foutoyet précise en outre qu'il est important de dissocier deux types de lecture : continue et sélective. La première est associée aux articles de magazines et de blogs constitués d'un long texte divisé en paragraphes. Malgré sa dénomination, la lecture continue n'est toutefois pas linéaire et les yeux du lecteur repèrent certains points de fixation composés généralement de 2 ou 3 caractères avec une compréhension globale du texte digérée par sursauts. Pour optimiser cette lecture, le Web designer devra ainsi s'intéresser au choix des caractères, à la taille de la police (14px +), à l'interlignage (1.3 à 1.5em) ou à la longueur des lignes (50-75 caractères).L'internaute procède à une lecture sélective sur les pages de produits (ex:Amazon) sur lesquelles l'information est éparpillée et non pas constituée en paragraphes. C'est sur ce type de mise en page que les annonceurs font usage d'outil d'eye tracking pour repérer les points de fixation des yeux de l'internaute. La hiérarchisation du contenu (logo, barre de navigation...) devient donc primordiale avec - pour un site e-commerce - une mise en valeur de certains éléments comme le titre, la description ou le prix d'un article ainsi que son ajout au panier.
Eye tracking
Caractéristiques des polices
M. Foutoyet ajoute que le choix des polices reposera sur un certain nombre de critères. La hauteur d'oeil, c'est-à-dire la hauteur d'un caractère en minuscule, permettra de juger de la lisibilité globale d'une police tandis qu'une ouverture plus marquée empêchera la formation de boucles pour certains caractères (a, e) sur des écrans à faible résolution. Aussi les spécificités du tracé devront marquer une différence d'affichage pour certaines lettres (I, l et 1, par exemple).D'autres caractéristiques sont également à prendre en compte et notamment le hinting ou le tracé vectoriel qui devra assurer une symétrie entre les pixels d'un caractère pour optimiser l'affichage sur une petite résolution. M. Foutoyet précise par exemple que les polices Verdana ou Georgia ont par exemple bénéficié d'un énorme travail dans ce domaine. Parallèlement, certains typographes ont amélioré le kerning (ou crénage), c'est-à-dire en modifiant l'espace à gauche et à droite de certains caractères lorsqu'ils sont précédés ou suivis d'autres lettres spécifiques.
Crédits : bernardcordier.com
Websafe ou Webfont ?
Deux types de caractères sont présents sur la Toile : les Websafe et les Webfont. Les premières sont installées par défaut sur les machines des internautes et relativement connues. Il s'agit d'Arial, Verdana, Times New Roman, Courier, Georgia, Lucida, ou encore Tahoma. Les Websafe présentent l'avantage d'être gratuites et globalement bien optimisées pour un affichage à l'écran. En revanche, le choix reste restreint et leur usage peut poser des problèmes d'homogénéité puisque les systèmes Windows, OS X et Linux ne disposent pas des mêmes polices par défaut. Il sera donc nécessaire d'ajouter une classe par défaut dans la feuille de style.Apparue en 2010, les Webfont sont stockées sur un serveur distant et visibles par tout le monde. Parmi les plus connues, nous retrouvons Lobster, Bree, Coquette, PT Sans, Adelle, Museo Sans, ou Open Sans. TypeKit, Google Font ou WebType proposent les outils nécessaires pour faciliter l'intégration au sein d'une page Web. Outre un très large éventail de choix disponibles, les Webfont permettent d'utiliser la typographie comme véritable outil artistique en donnant davantage de pertinence aux caractères. Cependant, puisqu'elles sont chargées sur des serveurs distants, ces polices ont un certain poids et peuvent donc ralentir le chargement d'une page. En outre leur usage n'est pas toujours gratuit et ces dernières ne sont pas systématiquement optimisées, notamment au niveau du crénage.
Différents moteurs de rendu
Il ne suffit cependant pas de choisir une police précise pour obtenir un affichage universel. En effet, il existe différents types de rendu, lesquels offrent un lissage différent selon le système d'anti-aliasing utilisé par l'internaute.Le système d'exploitation OS X fait par exemple usage de CoreText, lequel offre globalement un rendu plus gras que sur Windows, tandis que l'OS de Microsoft dispose de différents moteurs selon sa version. La dernière en date, Windows 8, fait usage de DirectWrite contre ClearType sur Windows XP.
Outre le système d'exploitation, il est à noter que les navigateurs ne disposent pas non plus des mêmes moteurs de rendu. Plusieurs différences peuvent ainsi être observées entre WebKit/Blink utilisé par Safari, Chrome ou Opera et Gecko (Firefox) ou Trident (Internet Explorer). Ces différences se manifesteront par un lissage différent des polices et un crénage automatisé ou non.
A lire également :
BLEND Web Mix : quelques bons réflexes pour la publication d'une API
BLEND Web Mix : les défis des moteurs de recherche face au Web social
BLEND Web Mix : quand les designers se mélangent aux développeurs…
BLEND Web Mix : Machine Learning, aux frontières de l'IA
BLEND Web Mix : le fondateur d'OverBlog ouvre le bal
