Ergonomie Web : Typographie et Lisibilité

L’utilité première d’un site internet est de savoir répondre de manière pertinente aux besoins des utilisateurs grâce à un contenu riche et lisible.
L’internaute lit plus lentement sur le web que sur un support imprimé.
L’information doit être hiérarchisée et respecter l’utilisabilité afin de favoriser l’expérience utilisateur et ainsi permettre de capter son attention.

PumpUp vous propose quelques astuces typographiques pour améliorer la lisibilité de vos contenus afin d’offrir un confort de lecture qui incitera l’internaute à rester et à naviguer sur votre site.

1 –  Éléments déterminants le rendu d’une police

Les polices peuvent s’afficher différemment d’un écran et d’un appareil à un autre, plusieurs éléments affectent cet affichage :

  • – Densité de pixels (quantité maximale de pixels affichés par pouce.)
    – Résolution de l’écran.
    – Distance de lecture (distance entre l’utilisateur et l’écran.)
    – Composition d’une police (hauteur d’X, jambage, hampe.)
    – Taille de police (distance entre le haut de la hampe, jusqu’au bas du jambage.)

pumpup2- Nombre et harmonie

Il faut veiller à ne pas utiliser un nombre trop important de polices au risque de perdre en lisibilité. Il est pertinent d’opter pour deux à trois polices maximum permettant par exemple de distinguer les titres des paragraphes, les textes principaux des textes secondaires…

La police du texte doit contribuer au visuel et ainsi être fondu dans le design de votre site, il est donc primordial de choisir des polices en accord avec votre image de marque.

2

Bel50 – Restaurant

3-  Police standard / non standard

Il y a deux types de police sur le web :

les polices standards correspondant aux polices de caractères génériques déjà installées par défaut sur les ordinateurs des internautes. Celles-ci sont donc assurées d’être affichées par tous les navigateurs.

les polices non standards correspondant à des polices intégrées sur votre serveur et appelées au chargement de la page. Il est donc possible d’utiliser d’innombrables polices mais il faut rester vigilant car cela ralentit le temps de chargement de votre site internet.

La meilleur façon de conjuguer design et lisibilité est donc de mettre en forme vos textes en proposant une collection de polices proches au niveau du style et de la taille de manière à éviter de mauvaises surprises en terme d’affichage.

Artizan - Agence Web

Artizan – Agence Web

 

4 – Compatibilité des navigateurs

Tous les navigateurs n’utilisent pas les mêmes formats de polices. Il faut impérativement charger plusieurs fichiers de polices pour assurer un bon affichage sur l’ensemble des navigateurs.
L’utilisation de polices non standards, nécessite le chargement des fichiers correspondant au rendu souhaité (gras,italique…) mais également les fichiers demandés par les différents navigateurs (.ttf,.eot,.svg…) .
Il faut donc rester vigilant quand à la personnalisation de vos polices : il serait dommage de perdre vos internautes à cause d’un chargement de page trop long !

5- Taille et mise en forme

La taille du texte est un facteur très important de la lisibilité d’un texte. Il est conseillé de spécifier la taille en unité relatives (%, em) plutôt qu’en pixels ou points.
Cela permet à l’internaute d’agrandir ou de rétrécir la taille du texte car ces unités sont dépendantes de la taille d’affichage spécifiée par le navigateur. (En résumé le corps de texte dépendra de la largeur de la fenêtre du navigateur.)

Le texte étant conçu pour être lu, il est important d’optimiser le contenu en s’attardant sur les éléments suivant :

– Mettre en avant les titres
– Limiter la longueur de ligne des textes
– Ajouter des espaces vides afin d’aérer la mise en page (interligne, espaces entre les caractères…)
– Utiliser les styles graphiques de façon pertinente (gras, italique, soulignement…)

Fibb - Designers

Fibb – Designers

6- Couleur et contraste

La mise en valeur d’un texte passe également par le choix des couleurs utilisées et principalement le contraste entre le texte et le fond de la page.
Les couleurs douces (pastels, nuances de gris clair…) sont à privilégier pour le fond, associées à une couleur de texte sombre, elles permettent de rendre le texte agréable à lire.

Cependant il est possible de mettre en avant le texte de manière inversé (police claire sur fond sombre) l’important étant que celui-ci reste lisible et incite l’internaute à poursuivre sa navigation sur votre site internet.

Isadora - Webdesign

Isadora – Webdesign

En résumé ces quelques astuces vous permettrons d’améliorer sensiblement la lisibilité de votre contenu et ainsi de fidéliser les internautes sur votre site internet. Pour plus d’informations n’hésitez pas à contacter l’un de nos ergonomes PumpUp !

Sources :
1- Paperblog http://www.paperblog.fr/6158071/choisir-la-taille-de-police/
2- Jimdo http://fr.jimdo.com/2013/11/13/5-conseils-pratiques-pour-la-typographie-de-votre-site-web/
3- http://cssmoz.com/