Préférez les fontes standard pour votre site web

Lorsque l’on conçoit un site web, on est souvent tenté d’utiliser des polices personnalisée pour qu’il soit différent du reste. Pourtant, dans leur référentiel d’écoconception web, le collectif pour la conception responsable de services numériques indique la règle suivante :

Favoriser les polices standards

Référentiel d'écoconception web, Collectif Conception responsable de service numérique

Penchons-nous un peu plus sur cette règle.

Fontes standards ou personnalisées #

Définitions #

Sur une page web, vous pouvez utiliser le CSS pour contrôler quelles polices sont utilisées pour l’affichage. Vous pouvez définir une pile de fonte (font stack), c’est-à-dire une liste de polices à essayer.

Par exemple, si vous écrivez la règle font-family: Helvetica, Arial, sans-serif;, le navigateur testera d’abord si Helvetica est présente. Si c’est le cas, c’est la police qui sera utilisée ; sinon, il fera la même chose avec Arial. En dernier recours, si aucune autre fonte n’est présente, il tombera sur le mot-clé générique sans-serif et utilisera la police sans empattement par défaut du système.

Il est également possible, avec la règle @font-face, d’obtenir un contrôle plus fin des polices.

1@font-face {
2  font-family: "Open Sans";
3  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
4       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
5}

L’exemple ci-dessous indique au navigateur quels fichiers télécharger pour respecter la règle font-family: 'Open Sans'.

Tant que vous ne vous appuyez pas sur un @font-face à l’aide d’un attribut src, vous utilisez une fonte standard, en faisant confiance à ce qui est installé sur l’appareil de votre visiteur. J’oppose ceci aux fontes personnalisées, définies par @font-face.

Avantages et inconvénients #

Lorsque vous travaillez pour un client, il n’est pas inhabituel de recevoir une image et devoir créer un site qui en soit la reproduction parfaite. En utilisant une fonte personnalisée, vous vous assurez que le site sera affiché de la même manière sur tous les appareils. Enfin, plus tant que ça, en raison de la variété d’écrans et de tailles sur le marché.

D’un autre côté, le navigateur devra télécharger la fonte. Cela a plusieurs conséquences. Le plus évident est que votre site fera autant de requêtes supplémentaires que vous aurez de polices, vous utiliserez un peu plus de bande-passante, [l’empreinte de votre site sera un peu plus lourde][footprint-digital]. Cela implique souvent une légère dégradation de l’expérience utilisateur, car la page sera d’abord affichée sans la police personnalisée et tout risque de clignoter ou changer de place lorsque la fonte sera finalement disponible, faisant parfois bouger des liens sur lesquels l’utilisateur s’apprête à cliquer. Ou cela pourrait simplement ajouter quelques secondes au temps de chargement, ce qui est tout aussi détestable pour un utilisateur.

S’appuyer sur les fontes standards est le contraire : l’affichage est immédiat, mais il implique un rendu (légèrement) différent selon les appareils. Si vous choisissez Helvetica comme police par défaut, elle s’affichera certainement sur un appareil Apple mais pas sous Windows, Linux ou Android. Il faut juste vous poser une question : est-ce vraiment un problème ?

Les fontes standards on un avantage additionnel : elles s’intègrent plus naturellement avec l’interface du système d’exploitation. Pour l’expérience utilisateur, ne pas déroger aux habitudes est une bonne pratique. Vous pouvez en particulier regarder la [« pile de fontes système »][system-font-stacks] et son implémentation par Medium, Github ou Twitter.

Construisez votre pile de fontes #

Le principe de base n’est pas compliqué :

1. Définissez les systèmes d’exploitation que vous ciblez.
2. Trouvez une collection de fontes présentes sur la plupart de ces systèmes. FontsArena offre un guide des polices par défaut, CSS Fonts donne de statistiques de disponibilité pour des fontes habituelles.
3. Définissez quelles polices vous préférez à quelles autres et écrivez-les dans cet ordre.
4. Terminez toujours votre pile par sans-serif, serif et monospace. Si le navigateur ne peut trouver aucune des autres fontes que vous avez spécifiées, il saura au moins quelle famille retenir.

À titre d’exemples, je peux vous proposer les trois piles de fontes que j’utilise pour ce site :

• Titres : 'Ubuntu Condensed', 'Open Sans Condensed', 'Dejavu Sans Condensed', 'Arial Narrow', 'Segoe UI', 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif.
• Extraits de code : 'Fira Code', Monoid, 'Ubuntu Mono', 'Lucida Sans Typewriter', 'Lucida Console', monaco, 'Bitstream Vera Sans Mono', monospace.
• Tout le reste : Ubuntu, Geneva, Verdana, Tahoma, sans-serif.

Si vous regardez ma pile « code », vous verrez que certaines polices seront certainement absentes de la plupart des systèmes (p.ex. Fira Code and Monoid). Ce n’est pas grave : si elles sont disponibles, cela ressemblera à ce que j’ai sur ma machine ; dans le cas contraire, ce sera tout aussi lisible, ce qui est le véritable but.

Si vous manquez d’inspiration, vous pouvez commencer avec la liste de 13 fontes « web-safe » de Template Tester. En dépit de leur nom, souvenez-vous malgré tout qu’il est seulement [probable][wiki-seb-safe-fonts] sur tous les OSs. Par exemple, Times New Roman et Arial ne sont pas installées par défaut sur la plupart des distributions Linux.

Si vous avez besoin de fontes personnalisées #

Parfois, vous n’avez pas le choix : le designer du client ou sa charte graphique impose l’usage d’une police spécifique. Je recommanderais d’éviter ceci autant que possible. Pour citer une page « conçue pour durer » :

Limitez-vous aux 13 police web-safe +2 – on se concentre sur le contenu en premier lieu, donc les fontes décoratives et inhabituelles sont complètement inutiles. Limitez-vous à une petite palette et les 13 polices web-safe. OK, vous avez peut-être réellement besoin d’une police néo-grotesque qui n’est pas Arial/Helvetica, ou vous avez besoin d’une fonte géométrique. Dans ce cas, choisissez le strict minimum nécessaire, comme Roboto (pour le néo-grotesque) ou Open Sans (pour le géométrique) ; ce sont les deux polices les plus populaires sur Google Fonts et sont donc certainement déjà dans le cache du navigateur de vos ordinateurs. Outre ces +2 fontes, vous devriez vous concentrer pour faire parvenir efficacement votre contenu à l’utilisateur et rendre le choix des fontes invisibles, plutôt que de caresser votre ego de designer. Même si vous utilisez Google Fonts, vous n’avez pas besoin d’un lien direct. Télécharger le sous-ensemble dont vous avez besoin et servez-le depuis vos propres dossiers.

traduit de This Page is Designed to Last (EN), Jeff Huang, December 2019

Une petite remarque : cela peut paraître évident, mais si vous utilisez une fonte uniquement pour afficher le nom ou le logo d’une marque, vous avez certainement intérêt à le remplacer par une image (bitmap ou SVG).

Dans tous les cas, si vous utilisez des polices personnalisées, vous devriez regarder les bonnes pratiques. Cela vous aidera à réduire leur taille, économisant par la même occasion un peu de bande-passante et allégeant votre empreinte.