Quelle police de caractères utiliser pour mon site?

Question Y-a-t'il une police de caractère qui soit préférable pour mon site Web, sachant qu'il s'adresse à tous publics et de tous âges? Et quelle taille de caractères choisir? Faut-il la définir en pourcentages (%), pixels (px) ou en unités de mesure typographiques (em)?

Pour choisir il faut prendre en compte pour la taille de la police le fait que que tous les utilisateurs n'ont pas une vue parfaite.
Un site s'adressant aux professionnels jeunes adoptera une police réduite pour économiser l'espace, mais ce n'est pas le choix qui convient le plus généralement.

Quand à la police, il peut être crucial dans certains cas d'avoir une claire distinction entre les caractères 1 (un) l (l minuscule) I (i majuscule), ce qui n'est pas le cas d'Arial, mais que Verdana fait très bien.

Fontes et les caractères un, l, i majuscule, o minuscule, o majuscule, zéro:

Si l'on utilise des polices différentes pour des éléments de page différents, exprimer la taille en pourcentages est le mieux car les "em" peuvent avoir des résultats différents selon la police.

Exemples de sites populaires

En partant du principe que les sites les plus populaires et les plus visités ne peuvent se tromper, pour avoir une réponse objective à toutes les questions, le mieux serait de voir quels choix ils ont fait!

Amazon

body 
{
    font-family: verdana,arial,helvetica,sans-serif;
    font-size: small;
    background-color: #FFFFFF;
    color: #000000;
    margin-top: 0px;
}  
.h1
{
    font-size: medium;
}  

Google

body
{
    height:100%;
    font-family:Helvetica,Arial,sans-serif;
    font-size:small;
    color:#000;
    background-color:#fff;
    margin:3px 8px 0 0;
    padding:0;
}
h1 { font-size:160%}
h2 { font-size:140%}
h3 { font-size:120%}

Apple

body
{
    font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    background-color: #fff;
    color: #333; 
    margin:0;
    padding:0;
}  
h1 { font-size: 24px; font-weight: bold; line-height: 36px; margin-bottom: 18px; } 
h2 { font-size: 16px; font-weight: bold; line-height: 18px; margin-bottom: 18px; } 
h3 { font-size: 1em; font-weight: bold; line-height: 18px; }

New York Time

body 
{ 
background-color:#FFFFFF;
color:#333333;
font-family:georgia,"times new roman",times,serif;
font-size:62.5%;
line-height:1.5em;
margin:0;
padding:13px 0;
}

Les points communs:

Conclusion

La meilleure police:

Choisir parmi Arial, Verdana, Georgia, selon le contenu et la remarque faite plus haut. La police sans-serif est un choix alternatif obligé.
On peut utiliser des polices différentes pour les titres et autres éléments.

La taille de police:

Les sites ont souvent tendance à utiliser de petits caractères. Une taille de police de 13 pixels est généralement considérée comme un bon compromis entre la lisibilité et l'encombrement. Quand aux tailles des titres, voir les choix faits par Google ou Apple.

L'unité de mesure:

La taille de base, celle de body, est exprimée avec le code small. Les tailles des balises sont exprimées en pourcentage ou en pixels.
L'utilisation de pixel n'enlève rien au coté relatif: lorsque l'utilisateur agrandit la page, les textes en pixels sont agrandis avec le reste.

Voir aussi