INFORMATIQUE : CRÉER UN 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écessaire à la composition d'un texte.

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

Correspondances de polices
PC	Mac	Unix
Arial	Helvetica	Helvetica
Book Antiqua	Palatino
Courier New	Courier	Courier
MS Sans Serif	Geneva
MS Serif	New York
Symbol	Symbol
Times New Roman	Times	Times
WingDings	Zapf Dingbats

De façon générale, il est préférable de n'utiliser qu'un nombre restreint de polices et de s'en tenir aux polices installées par défaut en indiquant, pour chaque grande famille, les équivalents présents dans tous les systèmes d'exploitation. Cela étant 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 : serif (avec empattements), sans-serif (sans empattements), monospace (à chasse fixe), fantasy (fantaisie) et cursive. Cependant, 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 ou Helvetica).

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. Bien qu'elle fonctionne encore avec les navigateurs actuels, 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 votre intention première consiste à spécifier plusieurs polices dans une liste, en les séparant par des virgules selon la syntaxe propre aux feuilles de style. 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. Pour les polices de type serif, le code pourrait être le suivant :

{ font-family: Georgia, "Times New Roman", Times, serif }

Dans cet exemple, le navigateur de votre visiteur essayera de charger la police Georgia 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, avec la quatrième option, c'est-à-dire n'importe quelle autre police de type serif.

Typographie, lisibilité et fond de page

Une fois la ou les polices de caractères choisies, d'autres facteurs sont à considérer afin de ne pas gâcher la lisibilité du texte :

La couleur et le contraste

Privilégier le texte foncé sur fond clair ou, à l'inverse, le texte pâle sur fond foncé. Dans le cas des longs textes surtout, il vaut mieux opter pour un contraste maximum.

L'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.

D'autres éléments viendront aussi conditionner le confort de lecture :

• la hauteur de l'interlignage, c'est-à-dire l'espacement entre les lignes pour les détacher les unes des autres.
• l'aération de la page : il faut 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. Il faut faire de même pour la page dans son ensemble, avec l'utilisation des blancs et des marges, par exemple.
• la longueur des lignes : il vaut mieux é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 difficile à suivre. Il s'agit d'un point à particulièrement surveiller dans la mise en page d'un site au design fluide.
• la 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é si on utilise une police à taille fixe (pixels, points) plutôt que de gérer la taille du texte avec des unités relatives (pourcentage, « em »). 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 (voir ici).

À consulter (Voir aussi la section Langue : typographie)