Du texte qui paraît bien

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 :

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

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.

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.

(Voir aussi : Langue : Typographie)

Note : À moins d'indication contraire, les liens présents ci-dessous sont des liens externes, c'est-à-dire des liens qui pointent vers des ressources extérieures au site actuel et qui ouvriront donc des sites autres que maboite.qc.ca.

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

UrbanFonts

La plupart des polices de caractères répertoriées sur ce site sont gratuites, mais certaines sont des partagiciels ou requièrent l'attribution de crédits.

Font Cubes

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

What The Font

Service offert par le site My Fonts permettant de trouver, à partir d'une image téléchargée, la correspondance la plus proche d'une police. Si la réponse ne se trouve pas dans la base de données, un forum permet de demander de l'aide.

Identifont

Répertoire indépendant de polices numériques sur Internet qui propose une gamme de fonctionnalités pour vous aider à localiser les polices dont vous êtes à la recherche et à trouver des informations sur celles-ci.

WhatFont

WhatFont est un signapplet (bookmarklet) qui permet d'obtenir des informations sur la police utilisée simplement en plaçant le curseur de la souris sur un texte.

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.

CSS Type Set

CSS type Set est un outil de typographie pratique qui permet aux concepteurs et aux développeurs de tester le rendu d'un texte de manière interactive et de récupérer le code CSS correspondant.

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.

Em Calculator

Em Calculator est un petit outil en JavaScript qui permet de convertir une taille de police exprimée en pixels en équivalence em.

px-em

Outil pour calculer les tailles de police em à partir des tailles de police en pixels.

PXtoEM.com

Tableaux de conversion en pixels (px), em, pourcentage (%) et points (pt) à partir de la taille de police sélectionnée pour le body. Code CSS disponible.

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.

Vertical Rhythm Tool

Outil pour créer un rythme vertical. Calcule les marges haut (margin-top) et bas (margin-bottom) et la hauteur de ligne (line-height) et crée des règles CSS pour obtenir un rythme vertical cohérent.

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 exclusivement sur les considérations techniques de la typographie numérique.

partager la page
Monitoring internetVista®

Copyright © 2003-2016 maboite.qc.ca

Tous droits réservés