Typographie et site web

La typographie, c'est-à-dire la manière dont est composé un texte du point de vue de la qualité des caractères et de la mise en page, permet de rendre visible et lisible la hiérarchisation de l'information qui caractérise un site web.

Les polices de caractères

On appelle « police de caractères » l'ensemble des signes typographiques d'un même dessin de base : lettres plus caractères accentués ou ligaturés, le tout en bas de casse, capitales, petites capitales, chiffres et signes courants nécessaires à la composition d'un texte.

Un contrôle relatif

Bien que le langage HTML permette de spécifier le type de police à utiliser, le contrôle des polices n'est pas absolu. En effet, l'affichage de la police spécifiée nécessite que celle-ci soit installée ou disponible sur l'ordinateur de l'internaute qui consulte le site. Si l'ordinateur ne dispose pas de cette police ou est incapable d'accéder à la police spécifiée, l'affichage du texte se fera alors avec la police par défaut du navigateur.

Par ailleurs, l'internaute peut toujour configurer les préférences de son navigateur de sorte que les pages web utilisent, au lieu de leurs propres polices, les polices par défaut qu'il aura personnellement choisies.

Quelles polices?

S'il était auparavant fortement conseillé de s'en tenir aux polices installées par défaut, l'utilisation de polices hébergées en ligne permet désormais de déclarer une police de caractères non standard qui s'affichera sur la plupart des navigateurs. (Pour plus de détails, voir : CSS 3 : déclarer une police de caractère non standard avec @font-face; Bonnes pratiques pour les déclarations @font-face; Google Fonts.)

De façon générale, il est préférable de n'utiliser qu'un nombre restreint de polices en indiquant, pour chaque grande famille, les équivalents pour chacun des différents systèmes d'exploitation. Cela dit, il faut aussi tenir compte du fait que certains types de polices sont plus aisément lisibles que d'autres.

Les classes génériques de polices

Le W3C a défini cinq classes génériques de polices de caractères :

Les deux groupes de polices les plus couramment utilisés sont serif et sans serif. Serif est une police à empattements, c'est-à-dire qu'elle comporte de petites barres à l'extrémité des traits de ses caractères (Times New Roman, par exemple). À l'inverse, une police sans serif est formée de traits droits et n'a donc pas d'empattements (Arial, par exemple).

La chasse des polices

La plupart des polices sont proportionnelles ou à chasse variable, c'est-à-dire que la largeur des différents caractères varie en fonction du caractère lui-même, certaines lettres étant plus larges que d'autres. Les polices non proportionnelles ou à chasse fixe, c'est-à-dire celles dont chaque caractère est de largeur égale, peu importe la taille de la lettre, sont quant à elles surtout utilisées pour afficher du code ou des données qui doivent être alignées verticalement.

La spécification des polices

Pour spécifier les polices utilisées dans une page web, on aura recours aux feuilles de style (CSS en anglais pour : Cascading Style Sheets). Notons au passage que la balise <font>, autrefois employée avec l'attribut <face> pour préciser les polices utilisées, est une balise dépréciée; elle n'est donc plus prise en charge dans les normes actuelles du langage HTML telles que définies par le W3C. Il est donc déconseillé d'utiliser cette balise car elle pourrait devenir obsolète et ne plus être compatible avec les navigateurs à venir.

La manière la plus sûre d'obtenir un résultat qui se rapproche de l'intention première consiste à déclarer plusieurs polices dans une liste, selon la syntaxe propre aux feuilles de style, en les séparant par des virgules. L'ordre de préférence ira de la police désirée, c'est-à-dire la plus spécifique (précisée par son nom), vers les polices les plus génériques susceptibles d'être présentes sur la plupart des systèmes et possédant des caractéristiques semblables pour une classe donnée.

Ainsi, pour des polices de type serif, le code pourrait être le suivant :

{ font-family: "times new roman", times, "liberation serif", serif }

Dans cet exemple, le navigateur essayera de charger la police Times New Roman en premier; si elle n'est pas installée, le navigateur essayera avec la suivante sur la liste puis avec la troisième et, enfin, affichera la quatrième option, c'est-à-dire la police de type serif définie comme police par défaut dans le navigateur.

Le choix des polices

Choisir la bonne police de caractères s'avère d'autant plus important que ce choix affectera la façon dont les internautes percevront un site (amical, décontracté, exotique, sérieux, formel...) tout en conditionnant sa lisibilité.

Idéalement, à la lecture d'un texte, les polices ne devraient pas se faire remarquer : elles devraient laisser toute la place au contenu sans interférer avec le processus de communication; il en va cependant autrement pour des logos ou des titres qui doivent se démarquer. Il semblerait, par ailleurs, que les polices sans empattements (sans serif), de par la forme plus simple de leurs lettres, soient légèrement plus lisibles à l'écran que les polices à empattements (serif).

On aura donc avantage à choisir un type de police qui s'intègre à la personnalité du site, qui est bien adapté au contenu afin d'éviter un décalage entre le message et la forme, et qui offre une bonne lisibilité à l'écran.

Typographie, mise en page et lisibilité

Une fois les polices de caractères choisies, d'autres facteurs conditionnant le confort de lecture sont à considérer afin d'améliorer la lisibilité du texte :

Couleur et contraste

Privilégier le texte foncé sur fond clair ou, à l'inverse, le texte clair sur fond sombre, en évitant cependant les trop forts contrastes. Dans le cas des longs textes surtout, il vaut mieux opter pour un contraste positif (texte foncé sur fond clair).

Image de fond

À moins qu'elle ne soit d'une discrétion exemplaire, une image en fond de page (background image) risque de générer une fatigue visuelle tout en rendant l'information moins facile à repérer. Idéalement, les fonds de page graphiques devraient se limiter aux menus ou à des endroits exempts de texte. Dans le même ordre d'idée, des éléments animés en bordure du texte risquent de perturber l'attention. Il s'agit en fait de limiter le bruit visuel, c'est-à-dire restreindre l'utilisation d'éléments graphiques qui ne servent qu'à « faire beau » au risque de surcharger la page et de nuire au repérage de l'information.

Hauteur de l'interlignage

L'interlignage, c'est-à-dire l'espacement vertical entre les lignes de base de deux lignes de texte, doit être ajusté pour détacher les lignes les unes des autres, pour éviter la superposition des caractères et pour prévenir l'effet de masse. La lecture sera en effet ardue si les lignes de texte sont trop rapprochées, mais elle le sera tout autant si l'espace entre les lignes est trop grand et découpe le texte en lignes distinctes : l'œil doit pouvoir parcourir le texte en passant naturellement d'une ligne à l'autre. Un interlignage de 2 à 5 points plus grand que la taille de police est généralement convenable.

Aération de la page

Aérer le texte, le laisser respirer, en évitant les gros blocs compacts, en séparant bien les paragraphes, en utilisant des listes, en soignant la mise en relief des titres et des sous-titres. Faire de même pour la page dans son ensemble avec, par exemple, l'utilisation des marges et des blancs (les « blancs » ou « espaces blancs » sont des espaces vides d'information; ils ne sont pas nécessairement de couleur blanche).

Longueur des lignes

Éviter les blocs de texte qui s'étendent d'un côté à l'autre de l'écran. Une ligne de texte trop courte interrompt la lecture, mais, trop longue, elle empêche de trouver la prochaine ligne; le texte devient ainsi difficile à suivre. Il s'agit d'un point à particulièrement surveiller dans la mise en page d'un site au design fluide.

Taille des caractères

Avec des résolutions d'écran de plus en plus élevées, il semble que la tendance soit à l'utilisation de tailles de police plus grandes que par le passé. Notons toutefois que la plupart des navigateurs actuels permettent l'agrandissement (zoom) non seulement du texte, mais de la page au complet, éléments graphiques inclus.

Ressources à consulter