Comment optimiser une police de caractères ?

Je continue cette série sur les éléments UI avec l’optimisation de la police de caractère qui peut elle aussi faire une différence sur l’empreinte carbone d’un site web.

Voici la liste des autres articles de la série sur les éléments UI:
✔️ Quelles couleurs choisir pour un site web écolo ?
✔️ L’empreinte carbone des images sur le web
✔️ 5 façons de réduire le poids des images

On distingue deux types de polices de caractères:

  • Les polices standards qui sont celles installées par défaut avec les systèmes d’exploitation
  • Les polices particulières qui ne sont pas installées par défaut sur nos appareils

Les polices de caractères standards: à privilégier

Lorsqu’on a pour objectif d’éco-concevoir un site web pour limiter son empreinte carbone, la règle est claire et nette quant au choix de la police de caractères: il faut utiliser une police standard.

Leur gros avantage vient du fait que puisqu’elles sont déjà installées sur l’appareil de l’utilisateur, il n’y a pas besoin de télécharger de nouveaux fichiers pour afficher le contenu d’une page. Et pas de transfert de données réduit non seulement le nombre de communications avec le serveur mais accélère aussi le temps de chargement de la page.

polices de caractères standards
Polices standards les plus répandues

Les polices de caractères particulières: à optimiser

Bien que les polices par défaut soient très sympa, il se peut que nous ayons envie d’utiliser une police plus originale. Notamment pour des questions d’image de marque, afin de créer une identité facilement reconnaissable grâce à une typo qui sort de l’ordinaire par exemple.

Bien que ce ne soit pas le choix le plus écolo, ce n’est pas pour ça qu’il faut s’en priver. Il ne s’agit pas de créer une “dictature” du web où tous les sites auraient le même costume. En revanche, nous pouvons appliquer quelques bonnes pratiques pour que la conséquence de ce choix soit un peu moins néfaste pour la planète.

Utiliser à bon escient

Uniquement pour les titres par exemple ou le menu du site. En gardant la police par défaut pour la majorité du contenu, on s’assure d’une bonne lisibilité et on réduit l’empreinte carbone liée aux polices.

Limiter le nombre de variations

Chaque police de caractères propose un certain nombre de variations (standard, light, semi-bold, bold, black…) et chaque variation est un nouveau fichier à charger. On peut déterminer à l’avance de quelles variations nous aurons besoin (en essayant d’appliquer la méthode Marie Kondo ici aussi !) pour limiter le nombre de fichiers à charger.

Enlever les caractères inutiles

Une police peut embarquer un nombre de caractères plus ou moins grand en fonction du nombre de langues supportées. Si vous n’avez pas l’utilité de toutes les langues, vous pouvez donc dépouiller vos fichiers d’un certain nombre de caractères uniquement utilisés dans certains alphabets et ainsi en alléger considérablement sa taille. 

  1. Identifier le nombre de langues supportées par la police
    Après avoir choisi et téléchargé une police sur Dafont.com, envoyez le fichier .otf sur FontDrop pour connaître le nombre de langues supportées par cette police (ici 69 langues).
FontDrop screenshot
  1. Sélectionner les caractères et alphabets dont vous avez besoin
    Grâce à l’outil gratuit de Everything Fonts, sélectionnez uniquement les caractères et alphabets que vous souhaitez garder puis téléchargez à nouveau le fichier, sans le superflu.
screenshot Everything Fonts
  1. Comparer la réduction de taille et se féliciter !
    Dernière étape et non des moindres: comparez la taille des 2 fichiers ! Dans cet exemple, la taille a été réduite de 25%.
poids d'une police de caractères avant-après

Compresser au format WOFF2

Il existe plusieurs formats de police (WOFF, TTF, OTF pour les plus répandus) et il est très facile de transformer le fichier en WOFF2, format compressé qui a l’avantage de réduire le poids de la police d’environ 30%.

J’ai testé avec une police en .ttf téléchargée sur Dafont.com. En la passant au format .woff2 directement sur CloudConvert, j’ai obtenu une réduction de 45% de la taille initiale.

Si vous connaissez d’autres astuces concernant les polices de caractères, n’hésitez pas à les partager en commentaires, je mettrai à jour l’article 🙂

Vous pouvez contribuer à créer un web plus respectueux de la planète en partageant cet article pour éveiller les consciences :)
Publié le
Catégorisé comme Agir

2 commentaires

  1. Une technique complémentaire est d’utiliser les font au format Woff voir Woff2 qui sont des formats compressés et qui permettent donc de grapiller encore pas mal de place.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *