Ceux qui ont lu les articles précédents, connaissent mon obsession pour le poids d’une page web. Et parmi les mauvaises pratiques que je ne cesse de constater, l’abus des variantes d’une seule et même font web, pour une différence visuelle identifiable que par des “spécialistes”. Et pourtant, en CSS la propriété font-weight peut déjà faire une transformation élégante d’une police. Dès lors ce “faux gras” en CSS peut vous faire gagner du poids ! Et donc de la web performance !
Plusieurs fonts Web
Comme sur tant d’autres sites Web, nous utilisons tous des polices Web pour nos besoins en matière de typographie. Souvent la conception nécessite deux polices dans le document :
- une pour les titres
- et une pour le texte.
Et généralement, cela se traduit par l’ajout via les feuilles de styles CSS d’au moins 2 requêtes par police vers des versions dîtes “Regular 400” et “Bold 700”. Soit 2 fichiers distincts d’un poids en moyenne compris entre 20 ko et 40 ko.
Expérimentez le faux gras avec votre font web !
A partir du moment où vous avez identifié ce cas, je vous recommande fortement d’expérimenter la suppression de la version en gras “Bold 700” et l’utilisation de la version “faux gras” avec la propriété CSS font-weight avec pour valeur bold ou 700.
Faites tester par des utilisateurs lambda. Demandez leurs si ils voient une différence notable. Je vous parie que lors de vos tests, la différence visuelle sera si faible qu’aucun de vos testeurs ne pourra identifier la différence sans voir les deux en même temps.
Et donc, il n’y a plus lieu d’utiliser cette variante “Bold 700” ! Supprimez-moi ça de vos CSS et alléger du coup,
- le poids de la CSS,
- le poids des fonts web embarquées,
- et améliorer les temps de rendu,
- notamment le CLS cher aux Web Vitals tellement tendances !
Et si différence il y a ?
Ne renoncez pas ! Il se peut qu’il y ait une différence notable avec des navigateurs basés sur Chromium sur Mac et ceux basés sur WebKit sur les écrans haute résolution.
Dans ces cas là, vous pouvez essayer la propriété -webkit-text-stroke pour forcer le trait sur ces navigateurs un peu capricieux. En effet, la propriété -webkit-text-stroke permet de définir l’épaisseur et la couleur d’un contour pour les lettres d’un texte.
Et n’en déplaise aux typographes, la différence visuelle est tellement légère par rapport à l’utilisation du poids d’une font web en plus, que cela justifie l’utilisation de ce “faux gras”.
Comment évitez ce choix crucial ?
Si vous voulez vous éviter ces discussions entre graphistes et intégrateurs, je vous recommande alors d’utiliser une font web variable (comme sur https://www.baudouin-bois.com/ par exemple).
Celle-ci embarque en un seul fichier toutes ses variantes. Alors c’est certes un peu plus lourd qu’une seule font classique mais quand même moins lourd que deux fonts ! Et beaucoup plus souple. Avec une font web variable vous pouvez faire varier la propriété font-weight de 200 à 900 sans aucune restriction… Et même mettre cette valeur à 666 si vous êtes adeptes du HellFest ! Voir même inclure les versions italiques et pourquoi pas des ligatures… Pour en une seule font, les rassembler toutes !
Google Font fournit déjà 89 familles de polices variables.
Enfin pour rappel, n’oubliez pas toutes les bonnes recommandations pour optimiser vos polices avec les articles : Optimiser les Google fonts et Optimiser les fonts d’icônes.
