Typographie Web et Lisibilité: Guide Pratique de Design

Une police de texte courant a besoin d'une chasse moyenne et de formes de lettres nettes, pour que les longs paragraphes ne fatiguent pas l'œil; une police de titre peut porter davantage le caractère de la marque, car un texte court comporte moins de risque de lisibilité. Les deux n'ont pas à venir de la même famille; deux polices bien assorties fonctionnent souvent mieux que d'en forcer une seule à remplir les deux rôles.

Si une police fine et décorative est utilisée pour le texte courant sur le site d'un cabinet d'avocats, de longs passages comme des clauses contractuelles deviennent difficiles à lire; la police décorative peut rester sur les titres pendant que le texte courant passe à quelque chose de plus sobre.

Une échelle claire à trois ou quatre niveaux (titre, sous-titre, texte courant, petite note) fonctionne mieux que cinq ou six tailles à peine différentes; elle apporte à la fois de la cohérence et une règle claire pour le développeur. Chaque palier de l'échelle doit être nettement plus grand ou plus petit que le précédent; des tailles trop proches, comme 16px et 17px, ne se remarquent pas visuellement, elles ajoutent juste de la confusion.

Trop de caractères sur une ligne, et l'œil peine à retrouver le début de la suivante; trop peu, et l'œil saute sans cesse de ligne, le rythme de lecture se brise. Une plage qui fonctionne bien se situe entre soixante et quatre-vingts caractères par ligne, ce qui signifie que le texte devrait tenir dans une colonne limitée sur un grand écran, pas s'étirer sur toute la largeur.

Si la page de documentation technique d'un fabricant de revêtements de sol laisse le texte s'étirer sur tout l'écran, les lignes peuvent dépasser deux cents caractères sur un grand moniteur; la solution consiste à fixer le contenu à une largeur de colonne définie et laisser le reste de l'espace vide ou occupé par une image.

Avant de choisir une police, tous les caractères accentués utilisés dans les titres et le texte courant doivent être testés avec du vrai contenu, pas seulement un texte de remplissage anglais. Dans certaines polices, l'accent au-dessus d'un é ou d'un è ressort trop petit, dans d'autres la cédille sous un ç semble tronquée; ces détails ne se remarquent qu'une fois le texte agrandi à l'écran.

• Titres et texte courant prévisualisés avec du vrai contenu en français
• Caractères accentués (é, è, à, ç, ï, œ) vérifiés à plusieurs tailles
• Graisse grasse (bold) vérifiée sur ces mêmes caractères
• Lisibilité en petite taille mobile testée séparément

Certains visiteurs augmentent la taille du texte via les réglages du navigateur; un site construit avec des valeurs en pixels fixes bloque cette préférence. Définir les tailles en unités flexibles, comme rem, permet au réglage propre d'un visiteur de continuer à fonctionner sur le site; c'est une étape petite mais pratique pour l'accessibilité et pour les visiteurs à vision réduite.

Dans une configuration traditionnelle, chaque graisse de police (fine, normale, grasse) est un fichier séparé; une police variable (variable font) porte toutes les graisses dans un seul fichier, et le navigateur génère la graisse dont il a besoin à partir de ce seul fichier. Cela veut dire un seul téléchargement au lieu de cinq ou six.

Pour une marque utilisant trois ou quatre graisses différentes, une configuration en police variable réduit à la fois la taille totale des fichiers et donne au designer la liberté d'utiliser une graisse intermédiaire, entre normal et gras par exemple; la plupart des navigateurs actuels le prennent en charge, mais un repli reste utile si la compatibilité avec d'anciens navigateurs compte encore.

Si les chiffres d'un tableau de prix ou d'une fiche technique ne s'alignent pas colonne par colonne, l'œil a du mal à les comparer. Cela vient généralement du fait qu'une police utilise par défaut des chiffres proportionnels, où chaque chiffre occupe une largeur différente; activer les chiffres tabulaires donne à chaque chiffre la même largeur, et les colonnes s'alignent correctement.

Sur le tableau technique d'un fabricant de groupes électrogènes, des valeurs de puissance mal alignées côte à côte deviennent nettement plus lisibles dès que ce réglage est activé; sur la plupart des polices modernes, cela tient en une seule ligne de CSS.

Ce réglage ne se limite pas aux tableaux; la même différence se voit partout où des nombres sont placés côte à côte pour être comparés, une liste de prix, un affichage de date et d'heure.