INFORMATIQUE : CRÉER UN SITE WEB

Du texte qui paraît bien

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.

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 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. Par ailleurs, l'internaute peut 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.

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 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 :

• serif (avec empattements)
• sans serif (sans empattements)
• monospace (à chasse fixe)
• fantasy (fantaisie ou décorative)
• cursive (cursive)

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, par exemple).

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, avec la quatrième option, c'est-à-dire n'importe quelle autre police de type serif.

Un texte en image

Pour utiliser une police moins courante, il est possible de recourir à des images contenant du texte; cette solution permet en outre d'ajouter des effets artistiques. En procédant ainsi, la taille des pages aura cependant tendance à augmenter et les documents risquent d'être moins rapides au chargement. À utiliser avec discernement donc, pour un titre ou un logo, sachant que le texte ne sera pas accessible à la fonction « copier » du navigateur, et qu'advenant un problème avec l'affichage des images, l'aspect du site sera modifié.

Ne pas oublier d'ajouter l'attribut <alt> à la balise <img> afin d'insérer un texte de remplacement
qui sera affiché en l'absence de l'image.

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 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, qui offre une bonne lisibilité à l'écran et qui bénéficie d'une grande disponibilité sur différents systèmes d'exploitation.

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 :

La couleur et le 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).

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.

La 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.

L'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 l'utilisation des blancs et des marges, par exemple.

La 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.

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é. 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.

Les ressources à consulter (voir aussi la section Langue : Typographie)

Combined font survey results
Résultats de sondages qui montrent les polices de caractères les plus courantes installées sur les ordinateurs sous système d'exploitation Windows, Mac et Linux.

Dafont.com
Polices de caractères à télécharger (versions gratuites, partagiciels, du domaine public ou versions de démonstration), classées par ordre alphabétique, par type, par auteur, par popularité...

Font Cubes
Plus de 8800 polices de caractères gratuites à télécharger pour Mac, Android et Windows.

Lorem Accents
Outil générant du faux-texte (lorem ipsum) avec accents et caractères spéciaux pour la langue française. Permet de récupérer le code CSS du texte formaté selon différents critères.

Lipsum.com
Générateur de lorem ipsum utilisant un dictionnaire de plus de 200 mots latins et plusieurs structures de phrases pour générer un faux-texte sans répétition, mot farfelu ou touche d'humour.

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 d'exploitation Windows ou Mac.

Colour Contrast Check
Outil permettant de déterminer si les couleurs choisies pour le texte et pour l'arrière-plan engendrent un contraste suffisant pour que le texte puisse être lu par les personnes ayant des difficultés à distinguer les couleurs, ou encore lorsque les pages sont affichées sur un écran en noir et blanc.

Designer Plaything
Un outil pour tester différentes combinaisons de polices et de couleurs; permet aussi de vérifier l'accessibilité en ce qui concerne le contraste des couleurs. Utilisable en ligne ou téléchargeable.

Baseline Rhythm Calculator
Outil pour calculer différentes grandeurs de police (font-size) et hauteurs d'interligne (line-height) pour les titres et les paragraphes afin de conserver un rythme vertical agréable et régulier.

CSS with vertical rhythm
Calculatrice de rythme vertical en CSS qui offre un choix de quelques polices parmi les plus courantes.

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.

 The Font Thing (logiciel à 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é, il fonctionne aussi sous Windows XP et Windows 7.

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