Les aspects typographiques des applications web ou applications « en ligne »

Cours les aspects typographiques des applications web ou applications « en ligne », tutoriel & guide de travaux pratiques en pdf.

LES ASPECTS TYPOGRAPHIQUES

1. Eviter d’écrire en italique. Ce style est difficilement lisible, voire illisible à l’écran ; éviter de l’utiliser ou alors uniquement pour des textes courts.
2. Ne pas employer le soulignement hormis pour les liens. Utiliser le soulignement pour des éléments textuels autre que des liens est déroutant pour l’utilisateur car il finit par ne plus savoir à quoi correspond le souligné : est-ce du texte normal ou est-ce un lien ?
3. Ecrire tous les éléments textuels en minuscules avec une majuscule à l’initiale. Un texte écrit intégralement en majuscules est plus difficile à lire qu’un texte écrit en majuscule (1ere lettre) + minuscules. Lorsque le libellé est constitué de plusieurs mots, ne mettre en majuscule que la première lettre du groupe de mots, même s’il s’agit d’un titre de rubrique ou d’un titre de page. Ainsi par exemple : « Annuler », « Nom », « Téléphone », « Coordonnées »,… « Nom de l’agent », « N° de téléphone », « Adresse postale », « Résultats de votre recherche »,…
4. Les formats de police doivent être spécifiés. Les formats de police devront être spécifiés a minima pour les éléments textuels suivants (nous indiquons entre parenthèses quelques formats à titre indicatif) :
• Titre de page (Arial, gras, 16 pts, couleur à déterminer).
• Chemin de navigation (Arial, 11 pts, couleur à déterminer).
• Libellé de rubrique (Arial, gras, 14 pts, couleur à déterminer).
• Intitulés de champs de formulaire (Arial, gras, 12 pts, noir).
• Contenu de champs de formulaire (Arial ou autre, normal, 12 pts, noir).
• Commentaires de champs de formulaire ou autres commentaires (Arial, normal, 11 pts, noir ou gris) ; il s’agit par exemple du format attendu pour un champ de saisie de type Date. Encore une fois, les polices et les tailles ne sont données qu’à titre indicatif.
5. La taille des polices devra être proportionnelle au niveau de hiérarchie de l’information. Exemple : la taille des caractères d’un titre de page devra être supérieure à celle d’un libellé de rubrique.
6. Eviter d’utiliser plus de quatre polices de caractères différentes dans une même page. Au delà de quatre, le « codage typographique » est difficile à mémoriser ; il est par conséquent moins efficace. Un trop grand nombre de polices nuit à la lisibilité et donc à la compréhension de la page.
7. En règle générale, utiliser plutôt des polices sérif pour les corps de texte et des polices sans sérifs pour les titres, sous-titres, etc. (par « corps de texte » nous entendons « masse » ou « bloc » de texte). Les polices sérif forment une ligne qui facilite la lecture ; elles sont par conséquent surtout intéressantes pour les corps de texte, pas pour les « petits bouts » de texte tels que libellés de champ, libellés de bouton etc. Les polices sans sérif permettent de contraster les titres par rapport au corps du texte. Pour les pages de type « texte », on utilisera ainsi :
• une police serif pour le texte, à condition toutefois que la police utilisée pour le texte soit > à 10 points ; si elle est < ou = à 10 points, utiliser une police sans serif (Helvética, Arial, etc.) pour des raisons de lisibilité.
• une police sans serif pour les titres… Les polices sans sérifs sont plus lisibles à l’écran que celles avec empattements (telles que Times, Bookman, etc.).
8. Plutôt que de justifier le texte, l’aligner à gauche. Le fait de justifier un texte entraîne des espaces inégaux entre les mots, créant ainsi des « couloirs verticaux » appelées « lézardes » à l’intérieur du texte. Ces « couloirs verticaux » (espaces blancs) font que le regard a plutôt tendance à descendre vers le bas de la page, ce qui parasite la lecture des lignes (puisque nous lisons – en Occident – horizontalement de gauche à droite). C’est pourquoi il vaut mieux aligner le texte à gauche afin de les éviter. Note : cette recommandation est surtout applicable aux pages contenant beaucoup de texte (pages d’aide, mode d’emploi, informations réglementaires, etc.).
9. L’espace entre les caractères doit être d’au moins un pixel. Si les caractères sont trop près les uns des autres (espace < à 1 pixel), ils sont difficiles à différencier, la lisibilité des mots est donc moins bonne. De la même manière, lorsque les caractères sont trop espacés (espace > à 1 pixel), il devient malaisé pour les yeux de regrouper les caractères, la lisibilité des mots est donc moins bonne dans ce cas aussi.