Webtypographie: utilisation des polices de caractères en création web

Eléments de webtypographie

Pour que le visiteur d'un site le voit comme le graphiste l'a composé, il faut que les textes soient composés avec une fonte présente sur son système d'exploitation, en général Windows ou Mac.

Famille de caractères

On distingue classiquement les polices de caractères avec empattements (en anglais serif) comme le Times New Roman, son homologue sous Mac Time ou bien le Georgia, de ceux sans empattements (Arial/Helvetica, Verdana, Impact ou Trebuchet, la police utilisée pour ce site). Les caractères serif sont souvent très bien adaptés à l'impression mais moins lisible à l'écran en petites tailles. Soit tout le contraire de leurs homologues sans serif (linéales) qui conviennent mieux à l'affichage.

On distingue également les polices de caractères de type cursif (comme le Comic Sans), les caractères monospace (Courrier New/Courrier) qui sont des polices à « chasse fixe » c'est à dire que l'espacement entre chaque caractère est constant et les caractères fantaisie (Symbol, Webdings).

Pour un affichage optimal, et afin de tenir compte de l'hétérogénéité de l'équipement des internautes, il est recommandé de spécifier plusieurs polices de caractères et également une famille générique. Vous limiterez au maximum les problèmes d'affichage.

Ex ; body { font-family : arial, helvetica, sans-serif }

Taille des caractères à l'écran

Quand on compose pour le web, il existe deux formes de définition de tailles : la fixe et la relative.

Les tailles fixes sont exprimées en point (pt) ou pixel (px).

8 points    10 points    12 points    14 points   
16 points
    18 points    20 points

8 pixels    10 pixels    12 pixels    14 pixels   
16 pixels
    18 pixels    20 pixels

Les tailles relatives en pourcentage, en em.

xx-small    x-small    small    Normal    large   
x-large
    xx-large

Smaller    Normal    Larger   

0.8 em    1 em    1.2 em   

55%    70%    85%    100%    115%    130%    145%

Polices commerciales

Les sites des grandes fonderies typographiques internationales.

Polices gratuites

Les grands sites pour télécharger des polices gratuitement.