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.

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, 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. Pour les polices de type serif, le code pourrait être le suivant :

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

Dans cet exemple, le navigateur de votre visiteur 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, 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)

Web Page Design for Designers
Site très riche en contenu qui traite de la conception Web en mettant l'accent sur l'aspect graphique plutôt que sur la technologie. On y trouve les archives cumulant huit années de conseils et articles didactiques signés par Joe Gillespie sur la typographie, l'utilisation des polices de caractères en ligne et l'amélioration du graphisme des pages Web.

Tout sur les polices de caractères
Ce site a pour vocation de donner des informations sur les polices de caractères numériques (abusivement appelées parfois fontes). Il se focalise sur les considérations techniques de la typographie numérique.

Font size testing ~ Library & tools ~ Limitless Innovations
Page permettant de tester l'affichage des polices de caractères selon le style, la taille, les différents navigateurs...

Typetester
Typetester est une application Web pour comparer différentes polices de caractères selon les propriétés sélectionnées : taille, couleur, couleur de fond, alignement, etc. Possibilité de tester avec son propre texte et de choisir parmi une liste de polices installées par défaut sur système Windows ou Mac.

 X-Fonter [à télécharger]
Gestionnaire de polices de caractères qui permet de visionner toutes les polices installées et aussi d'avoir un aperçu des polices qui ne le sont pas. La liste des polices installées apparaît sur le coté gauche, le coté droit étant réservé à l'affichage de la police sélectionnée dans un format choisi par l'utilisateur (combinaisons de couleurs, styles et tailles). Création de textes en 3D et affichage de la liste des codes ASCII. Le programme peut également installer toutes les polices à partir de n'importe quel répertoire.

 The Font Thing [à télécharger]
Gestionnaire de polices de caractères qui permet de parcourir les polices installées et non installées, de choisir son propre texte pour la visualisation, de comparer les différentes polices, d'obtenir une description détaillée de chaque police, d'associer des commentaires personnels, d'installer ou de supprimer des polices, de filtrer et de cataloguer les polices par types et par collections. Bien que cela ne soit pas indiqué, le logiciel fonctionne très bien sous Windows XP.

Copyright © 2003-2012 maboite.qc.ca Tous droits réservésMonitoring internetVista®