Le faux gras pour alléger vos fonts web
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 Une font (police de caractères) est un ensemble de caractères typographiques ayant un style et une taille spécifiques. Elle détermine l'apparence du texte sur un site web ou dans un document. web, pour une différence visuelle identifiable que par des « spécialistes ». Et pourtant, en CSS Le CSS (Cascading Style Sheets) est un langage utilisé pour décrire l'apparence et la mise en page des documents HTML, en définissant des styles comme les couleurs, polices, marges, et positionnements des éléments sur une page web. 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 La Webperf désigne l'optimisation des performances d'un site web pour accélérer son chargement et améliorer l'expérience utilisateur, grâce à des techniques comme le caching, la compression, et la réduction des fichiers. !
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 Ko (Kilooctet) est une unité de mesure informatique équivalente à 1 024 octets. Il est utilisé pour mesurer la taille des fichiers ou la quantité de données dans un système numérique. 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 Le Cumulative Layout Shift (CLS) est une métrique qui mesure la stabilité visuelle d'une page web en évaluant la quantité de décalements inattendus des éléments lors du chargement, affectant ainsi l'expérience utilisateur. 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.
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 En création de polices de caractères, une ligature est un glyphe unique qui remplace une séquence spécifique de caractères pour améliorer la fluidité ou l'esthétique lors de la génération d'une font. … 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.
