A l'ère du « flat design » les interfaces utilisateur des sites Internet ont été radicalement simplifiées avec une mise en évidence des contenus textuels. A l'occasion du BLEND Web Mix, le Web designer Aurélien Foutoyet revient sur les bonnes pratiques en terme de typographie.
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.
Responsable du développement éditorial sur la partie Logiciel et Services Web sur Clubic.
Précédemment journaliste, je traitais l'actualité web et mobile au sens large. Je m'intéressais aux entrailles...
Responsable du développement éditorial sur la partie Logiciel et Services Web sur Clubic.
Précédemment journaliste, je traitais l'actualité web et mobile au sens large. Je m'intéressais aux entrailles des navigateurs web, aux nouveaux smartphones mais aussi aux systèmes d'exploitation, aux questions de sécurité ou à l'actualité e-business en général.
Sinon je dois avouer que j'ai un faible pour tout ce qui touche au web design et c'est généralement le code source d'une page web que je lis en premier.
Rejoignez la communauté des passionnés de nouvelles technologies. Venez partager votre
passion et débattre de l’actualité avec nos membres qui s’entraident et partagent leur
expertise quotidiennement.
