Dans cette partie, je vais pour expliquer pourquoi vous devriez privilégier les polices de caractères présentes sur l'appareil de vos utilisateurs. Nous allons aussi voir pourquoi vos utilisateurs sont pénalisés si vous utilisez des polices de caractères spécifiques que vous téléchargez sur Internet, gratuitement ou non.

Regarder la vidéo sur YouTube

Cet article est la 3e partie d'une série qui explique comment réaliser un site Internet de A à Z. Vous n'avez pas besoin d'avoir lu ou vu les parties précédentes pour comprendre cette partie. Les autres épisodes sont disponibles ici.

Si vous ne pouvez pas regarder la vidéo, un compte rendu est proposé plus bas.

Résumé de la vidéo

Lorsque vous réalisez le design de vos pages, vous pouvez modifier la police de caractères. Vous avez le choix entre trois options :

  • Ne rien faire et utiliser la police de caractères par défaut, celle choisi par le navigateur de vos internautes, comme on l'a vu dans la partie précédente.
  • Spécifier le nom d'une police de caractères, en espérant qu'elle soit déjà dans l'appareil de l'utilisateur.
  • Fournir une police de caractères spécifique à vos utilisateurs.

Chaque option possède des avantages et des inconvénients.

La première, qui consiste à utiliser la police par défaut, a l'avantage d'être simple à mettre en place, car il n'y a rien à faire. Elle peut donc être utilisée immédiatement pour tous vos projets et sera fonctionnel sur tous les appareils. Il y cependant deux inconvénients : le fait que la police ne soit pas la même pour tous, et le fait que la police ne soit probablement pas la plus belle.

La seconde, qui consiste à utiliser une police déjà présente dans l'appareil de l'internaute, a l'avantage de ne pas nécessiter une ressource extérieure. L'inconvénient est que chaque appareil (PC sous Windows, Mac sous MacOS, Mobile sous iOS ou Android) possède ses propres polices, notamment pour des raisons de droits (copyright). Il faut donc étudier chaque appareil et proposer une police pour chacun de ces appareils.

Enfin, la dernière option, qui consiste à fournir une police de caractères spécifique, a l'avantage de laisser libre cours à l'imagination du créateur, qui peut utiliser la police de son choix parmi les milliers qui se trouvent sur internet. Il y a cependant un inconvénient majeur : le temps de chargement, et dans une moindre mesure les droits d'utilisation et la bande passante.

Pour illustrer ce problème de temps de chargement, reprenons le site que l'on réalise et essayons d'appliquer une police de caractères spécifique.

Problèmatique des polices spécifiques

Nous allons utiliser, pour cet exemple, une police spécifique et libre de droits, que j'ai trouvé par hasard sur Internet : Sansita-Swashed.

Une fois la police téléchargée, je peux la déposer dans le répertoire où se trouve ma feuille de style, et ajouter certaines règles à mon fichier CSS pour la déclarer.

Deux règles sont utilisées : font-family, qui permet de donner un nom à la police, et src (comme source) qui permet de localiser le fichier qui contient la police :

@font-face {
  font-family: SansitaSwashed;
  src: url(SansitaSwashed-Regular.ttf);
}

Je dois aussi ajouter une règle qui permet d'utiliser cette police que je viens de définir et de l'appliquer à l'ensemble de la page :

body {
  font-family: SansitaSwashed;
}

On peut maintenant afficher la page dans le navigateur et constater que la police a bien été appliquée à l'ensemble du texte de la page.

Ma page est chargée localement sur mon ordinateur, le chargement de la police est donc instantané. Pour tester des conditions plus réelles, nous pouvons utiliser les outils de développement des navigateurs pour brider la connexion et simuler une connexion de moins bonne qualité, comme une connexion 3G.

En 3G, Le chargement se déroule en deux étapes :

  • En premier, La page HTML est analysée et le navigateur détecte la présence d'une feuille de style CSS, ce qui bloque le chargement de la page jusqu'au téléchargement complet de la police. Aucun texte n'est affiché à l'utilisateur pendant cette période.
  • Ensuite, lorsque la police est téléchargée, le texte est affiché dans la police souhaitée.

Mon test montre que le temps de chargement de la police (d'une taille 183kB) avec une connexion 3G prend 1,9 s. Pendant plus d'une seconde, l'internaute attend donc devant un écran blanc, et c'est encore pire si on dégradait davantage la connexion car les navigateurs finissent par afficher une police classique si le temps de chargement est supérieur à 3 secondes.

On pourrait modifier ce comportement et indiquer au navigateur d'utiliser la police par défaut le temps que la police externe se charge en ajoutant la règle CSS : font-display: swap;

Contrairement à précédemment, la page s'affiche instantanément, mais lorsque la police externe est téléchargée, un flash intervient et tous les éléments de pages sont recalculés et ré-affichés avec la nouvelle police. Cela a pour conséquence de modifier la position des éléments, car les lettres des deux polices n'ont pas forcément la même taille de caractères. L'utilisateur qui a commencé à consulter notre page devra donc rechercher sa position précédente, s'il en a le courage, ou il pourra simplement fermer la page.

Cette expérience n'est pas bonne pour les utilisateurs.

Apport du cache

Pour améliorer la performance, les navigateurs sont munis d'un cache. Le cache permet de garder en mémoire le résultat d'une requête qu'il effectue lorsqu'il récupère des ressources extérieures comme les images ou la police dans notre cas.

En utilisant le cache, si deux sites téléchargent la même police du même fournisseur, comme Google Fonts pour citer un des plus populaires, le navigateur réutiliserait la police téléchargée lors de la visite du site A pour l'utiliser sur le site B et ainsi afficher plus rapidement la page à l'utilisateur.

Cet avantage lié au cache n'est cependant plus possible, car les navigateurs ont changé le fonctionnement du cache et mis des limitations pour des raisons de sécurité que j'explique dans cet article : Comment le temps de chargement des images permettait d'espionner votre historique de navigation.

Nous devons donc trouver une autre solution.

Utiliser les polices natives des appareils

Tous les appareils (Ordinateurs, Mac, téléphones mobiles, tablettes) utilisent un système d'exploitation avec un certain nombre de polices de caractères préinstallées.

Le problème est que ces polices ne sont pas les mêmes pour tous les appareils, notamment pour des questions de droits. Il est donc pas possible d'utiliser la même police partout. Dit autrement : les polices de caractères de Windows ne sont pas les mêmes que celles sur Mac.

En étudiant ces polices, on peut cependant trouver des similitudes dans les polices que proposent les différents fabricants.

Certaines personnes ont déjà fait ce travail de recherche comme Booking.com qui l'explique dans cet article : Implementing system fonts on Booking.com — A lesson learned..

La plateforme pour développeurs, GitHub, a fait de même, et utilise sur son site Web non pas une mais plusieurs polices.

Pour implémenter un ensemble de polices, on peut utiliser la règle CSS font-family. Cette propriété peut accepter une ou plusieurs valeurs. Si plusieurs valeurs sont déclarées, le navigateur essayera toutes les valeurs, les unes après les autres, jusqu'à trouver une police connue. Et si une police est connue, il l'utilise.

On peut ainsi définir un ensemble de valeurs dans un ordre précis pour s'adapter aux appareils de tous les utilisateurs:

  • -apple-system : police système utilisée sous iOS (iPhone), MacOS Safari, et MacOS Firefox. Elle correspond aux polices San Francisco, Helvetica Neue, ou Lucida Grande selon les version de MacOS utilisées.
  • BlinkMacSystemFont : police système utilisée sous MacOS Chrome.
  • Segoe UI : police utilisée sous Windows.
  • Roboto : police utilisée sous Android.
  • Helvetica , Arial, sans-serif : polices génériques utilisées dans les autres cas.

On peut créer une règle CSS qui utilise toutes ces valeurs et l'associer au sélecteur body pour qu'elle soit appliquée à l'ensemble du site :

body {
  font-family: -apple-system,
               BlinkMacSystemFont,
               "Segoe UI",
               Roboto,
               Helvetica, Arial, sans-serif;
}

Références

D'autres articles traitent de ce même sujet et peuvent être intéressant à lire :

Note: Le prochain épisode est disponible ici et le précédent ici.