Quelle police de caractères utiliser pour mon site?
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:
Arial: 1 l I o O 0
Verdana: 1 l I o O 0
Georgia: 1 l I o O 0
Helvetica: 1 l I o O 0
Times New Roman: 1 l I o O 0
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;
}
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:
- Utilisation de px et pourcentages et non pas de em.
- Couleur de caractères noir ou gris foncé (#333).
- Couleur de fond toujours blanc.
- Choix de police: chaque site a ses préférences. Si l'on tient compte des fontes alternatives, les plus utilisées sont: Arial, sans-serif, Verdana.
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.