Utiliser des tailles de police lisibles

Cette règle se déclenche lorsque les analyses PageSpeed Insights indiquent que le texte de la page est trop petit pour être lisible.

Présentation

Sur Internet, la taille de police peut être définie à l'aide de quatre unités principales : le pixel (px), le point (pt), le cadratin (em) et le pourcentage (%).

  • Les pixels sont des "pixels CSS" qui varient en fonction de la densité et de la taille de l'appareil.
  • Les points sont définis par rapport aux pixels. Un pixel est égal à 0,75 point*.
  • Les cadratins et les pourcentages sont des unités "relatives" : elles sont fonction de la taille et des propriétés de la police utilisée. Un cadratin équivaut à 100 %.

* Voir les remarques complémentaires

En outre, la fenêtre d'affichage influence la mise à l'échelle sur les appareils mobiles. En l'absence de fenêtre d'affichage correctement configurée, la page est réduite sur les appareils mobiles, et le texte est alors souvent trop petit pour être lisible.

Recommandations

D'abord, configurez une fenêtre d'affichage pour vous assurer que les polices seront bien mises à l'échelle en fonction de l'appareil utilisé. Une fois la fenêtre d'affichage configurée, mettez en œuvre les recommandations complémentaires suivantes :

  1. Utilisez une taille de police de référence ("baseline") de 16 pixels CSS. Ajustez la taille en fonction des propriétés de la police utilisée.
  2. Basez-vous sur la taille de référence pour définir les tailles de l'échelle typographique.
  3. Les caractères d'un texte sont séparés par un espacement vertical, ce qui peut demander des ajustements en fonction de la police. En général, il est recommandé d'utiliser la hauteur de ligne par défaut des navigateurs, à savoir 1,2 em.
  4. Limitez le nombre de polices utilisées et l'échelle typographique : trop de polices et de tailles de police différentes génèrent des mises en page désordonnées et très complexes.

Par exemple, l'extrait de code CSS suivant définit une taille de police de référence de 16 pixels CSS, avec une classe CSS "petite" dont la taille équivaut à 75 % de la police de référence (12 pixels CSS) et une classe CSS "grande" dont la taille équivaut à 125 % de la police de référence (20 pixels CSS) :

body {
  font-size: 16px;
}

.small {
  font-size: 12px; /* 75% of the baseline */
}

.large {
  font-size: 20px; /* 125% of the baseline */
}

Pour obtenir des recommandations supplémentaires sur les polices applicables aux appareils mobiles, consultez les conseils relatifs à la typographie pour Android.

Informations complémentaires

Lisez attentivement la fiche des caractéristiques techniques relatives au langage CSS 2.1 afin de comprendre comment sont définies les unités de longueur. Elle contient des unités supplémentaires qui ne sont pas mentionnées ici : pouces, centimètres, millimètres et picas. L'erreur fréquente consiste à penser qu'un pouce CSS est nécessairement égal à un pouce physique.

Les unités absolues sont toutes définies les unes par rapport aux autres. 1 pixel vaut 0,75 point, 1 point est égal à 1/72e de pouce, 1 pouce fait 2,54 centimètres, etc. Toutefois, l'"ancrage" de ces unités dépend de l'appareil. Par exemple, lors d'une impression sur papier, 1 pouce est ancré à 1 pouce physique, et toutes les autres unités doivent être fonction du pouce physique. Cependant, lors d'un affichage sur téléphone mobile, l'ancrage est effectué en fonction de ce que l'on appelle le "pixel de référence". La valeur d'un pixel CSS est définie en fonction de ce pixel de référence, et toutes les autres unités (pouces, centimètres, etc.) sont ajustées en fonction du pixel CSS. Ainsi, sur un téléphone mobile, un pouce CSS s'affiche plus petit qu'un véritable pouce physique.

C'est pour cette raison que nous vous conseillons de définir vos tailles de polices à l'aide de pixels. Certains graphistes et développeurs peuvent être induits en erreur lorsqu'il est question de pouces ou de points. Ce sont en effet des dimensions physiques, mais qui ne correspondent pas nécessairement à leur taille réelle, tandis qu'on peut toujours envisager qu'un pixel puisse changer de taille en fonction de l'appareil sur lequel il s'affiche.

Enfin, chaque police possède également ses propres caractéristiques : taille, espacement, etc. Par défaut, toutes les polices sont affichées avec une taille de 16 px (pixels CSS) dans le navigateur. Cette valeur par défaut convient dans la plupart des cas, mais certains ajustements peuvent être nécessaires pour des polices spécifiques. Il est ainsi possible de réduire ou d'agrandir la taille par défaut pour s'adapter aux différentes propriétés de la police. Après avoir défini la taille par défaut, il convient de définir des polices plus grandes ou plus petites en fonction de la taille par défaut à l'aide de pixels. Cela permettra ensuite d'ajuster la taille du texte pour les contenus principaux et secondaires, et les autres types de contenu de la page.

Certains navigateurs pour mobile effectuent une mise à l'échelle des polices en l'absence de configuration d'une fenêtre d'affichage. Ce processus de mise à l'échelle varie d'un navigateur à l'autre et ne permet pas nécessairement de rendre une police lisible sur les appareils mobiles. Dans PageSpeed Insights, le texte s'affiche sur votre page sans mise à l'échelle de la police qui varie d'un navigateur à l'autre.