Ce n’est pas forcément la question la plus soulevée dans la sphère SEO, mais nous voulions déterminer dans cet article si le choix de telle ou telle police web pouvait avoir un impact sur votre SEO.

Peut-être vous-êtes-vous déjà demandés si l’utilisation d’une police web personnalisée ou une Google Font, avait une incidence négative comme positive votre visibilité organique. Pour lever le voile sur ce sujet, nous avons décidé de nous replonger dans les déclarations passées de notre ami John Mueller, Webmaster Trends Analyst chez Google.

En d’autres mots, il s’agit de savoir si Google prenait en compte le choix de la police web pour juger de la qualité de votre contenu, par exemple si une police personnalisée conduisait Google à considérer le contenu comme moins pertinent que des qu’un même contenu utilisant d’autres types de web fonts.

Ce que dit Google

Cette question avait été posée à John Mueller en 2017 lors de la vidéo Webmaster Office Hours ci-dessous.

Le cadre de chez Google affirme que le choix de la police d’écriture n’a pas d’impact sur votre référencement. Du moment que Google peut explorer la page et voir le contenu, l’analyse fonctionnera normalement.

La seule situation où John indique que cela pourrait être un peu délicat est si vous utilisez des images au lieu de texte sur une page. Ok, Google fait de l’OCR (Optical Character Recognition : processus de convertir une image en texte) sur les images, mais cela reste un procédé nouveau qui n’est pas pleinement sollicité pour l’indexation des pages web (cela exige beaucoup trop de ressources).

Impact sur le temps de chargement

Le même sujet a été abordé sur Twitter en 2020. Toujours auprès de John Mueller. Cette fois-ci, la question initiale était de savoir si le choix de sa police avait un impact sur les performances de vitesse du site, puis de savoir s’il y avait des polices recommandées par Google.

Les réponses de John Mueller :

1 - Tous les éléments qui composent une page web, comme la police, ont un impact sur la vitesse de chargement.
2 - Le choix de la police n’a pas d’importance pour le SEO.

Ces deux réponses sont contradictoires puisque le temps de chargement est considéré comme un facteur de ranking SEO. Ainsi, si votre police web impacte le temps de chargement, elle influence indirectement votre SEO.

Bon ok, ce n’est pas nouveau que la police impacte le temps de chargement, c’était d’ailleurs un point majeur soulevé dans notre article sur l’optimisation de votre vitesse de site sous WordPress.

Par conséquent, si vous utilisez une police personnalisée parce que vous voulez mettre en avant votre branding, faites attention à ce que cette dernière n’impacte pas trop vos performances. Surtout avec l’introduction des Core Web Vitals en tant que facteurs de positionnement SEO.

Impact sur l’expérience utilisateur

Évidemment, si vous optez pour des polices web personnalisées totalement illisibles, cela aura un réel impact sur la compréhension qu’auront les visiteurs du contenu de votre site. Veuillez donc à ne pas trop en faire et à trouver l’équilibre entre branding et expérience de navigation.

Mais améliorer l’expérience utilisateur signifie aussi que chaque milliseconde compte. De ce fait, il existe de nombreuses façons d’améliorer la vitesse, comme l’optimisation des images et des polices de caractères web.

Commençons par une note positive : il est facile d’adopter une belle typographie gratuitement pour votre site comme vous pouvez en trouver dans les magazines papier. Des sociétés comme Fontawesome, Google et Adobe proposent énormément de polices gratuites qui vous permettront de construire votre site selon votre image. Cependant, un grand nombre auront impact drastique sur la vitesse de vos pages… pouvant vous faire perdre de précieuses secondes et chuter votre score sur PageSpeed Insights.

Voyons donc ensemble comment ces satanés polices web peuvent autant impacter votre temps de chargement en se focalisant sur les polices Google.

Le problème des polices Google

Les Google Fonts peuvent représenter plusieurs problèmes pour vos performances de site. Mais pas que…

Combien de requêtes HTTP les polices effectuent-elles ?

Lorsque votre site est en train de charger sur un navigateur, vous avez peut-être remarqué des messages dans la barre d’état tels que « connecting to fonts.gstatic.com » ou « waiting for fonts.googleapis.com ». Il s’agit du navigateur qui télécharge la police sur laquelle votre site repose à partir de serveurs qui hébergent ces polices.

Pour analyser ce processus de plus près, il suffit de se rendre sur des sites de mesure de vitesse de page tels que GTmetrix ou Pingdom et de tester votre URL. Il y a de fortes chances que vous soyez surpris par le nombre de requêtes que votre site nécessite pour télécharger des fichiers de polices. Mais… attendez deux p’tites secondes… ces polices ne sont-elles pas transférées à partir d’un Google Cloud super méga rapide ?!!

Existe-t-il un CDN pour les polices ?

Oui, les polices web sont fournies par le CDN de Google. Google a optimisé et continue d’optimiser ces fichiers pour un transfert plus rapide. Néanmoins, il s’agit de demandes supplémentaires de données supplémentaires dont la plupart des sites et blogs peuvent se passer. Les néo webmasters commencent souvent avec un hébergement mutualisé chez OVH, et souvent avec un ensemble de plugins redondants qui alourdissent les performances globales de leur site. Dans la plupart des cas, les fichiers de polices web ne font que s’ajouter à la masse.

Quel est le poids des polices web ?

La taille typique d’un fichier de police est de 35-50ko. Cependant, selon la façon dont votre site est développé, il peut nécessiter plusieurs fichiers de polices ou parfois, même un seul fichier de police peut atteindre un poids de quelques mégaoctets. Cela s’explique par le fait qu’un site peut utiliser plus d’une langue, nécessiter plusieurs formats de fichiers ou devoir être disponible en mode hors ligne. Parfois, les thèmes et les plugins qui utilisent les Google Web Fonts font plusieurs demandes pour la même ressource. Pire encore, votre site peut obliger un visiteur à télécharger des éléments qui ne sont jamais utilisés. La plupart du temps, les visiteurs de votre site peuvent se passer de tout cela.

Du coup, une question légitime que l’on pourrait se poser serait de savoir si la mise en cache avait un impact ? Un navigateur ne va-t-il pas stocker ces polices pour une utilisation ultérieure ? La réponse courte : pas tout.

Quid de la mise en cache des polices Google ?

La mise en cache du navigateur ne permet d’accélérer que les visites répétées, et non les premières visites. Pour les visiteurs réguliers, le webmaster du site a le pouvoir de définir la durée pendant laquelle le navigateur doit mettre en cache une ressource localement. Vous pouvez fixer une date d’expiration lointaine (d’un mois ou plus) pour les ressources statiques telles que les images, etc… mais pas pour tout ! En effet, pour les ressources fournies par des tiers, comme Facebook ou Google, le propriétaire du site n’a aucun contrôle. Leur date d’expiration est fixée par les sites qui les fournissent.

Alors que les fichiers de polices de base peuvent avoir une date d’expiration lointaine, les ressources de style liées aux polices ont une date d’expiration de seulement 24h00 en général. Ainsi, lorsqu’un fichier de police a été modifié et qu’un abonné email clique sur le lien d’une newsletter pour lire votre dernier article, ce visiteur fidèle devra télécharger à nouveau toute la police web requise. Inutile de dire que si votre abonné dispose d’une connexion internet pourrie, vous ne l’aidez pas.

Alors, pourquoi ne pas simplement fournir les polices à partir de votre site et de contrôler l’expiration du cache du navigateur ?

Peut-on charger les polices Google en local ?

Les polices web étant OpenSource, vous pouvez les héberger localement sur votre site, réduire le nombre de requêtes HTTP et contrôler l’expiration du cache. Il existe des plugins gratuits pour vous aider à y parvenir. Toutefois, Google déconseille cette pratique. Cela m’amène à poser la question suivante : pourquoi Google adopterait-il une pratique aussi gourmande en termes de ressources, puis déconseillerait dans le même temps une solution permettant de consommer moins et d’optimiser les performances ?

La raison officielle invoquée par la firme de Mountain View est qu’il héberge et fournit les polices afin que vous ayez les plus récentes et les plus optimisées à disposition pour votre site web. Cependant, la vérité se cache peut-être ailleurs…

Les polices Google portent-elles atteinte à la vie privée ?

Quelques pays, comme la Chine, bloquent l’accès à aux serveurs Google, ce qui signifie que les sites utilisant les Google Fonts n’auront pas la même apparence partout dans le monde. De nombreuses autres personnes ont fait part de leurs inquiétudes quant à la confidentialité des données liées aux polices Google, en particulier dans le sillage de la mise en œuvre de la politique européenne RGPD. En effet, en fournissant la police de votre site, Google a un accès direct à ses entrailles. Pour vous faire une idée, jetez un œil à la quantité gargantuesque de données collectées par Google à travers ses polices en consultant les statistiques du site Google Font Analytics.

Les Google Fonts seront-elles toujours gratuites ?

Les polices web représentent un pilier essentiel pour le secteur des éditeurs. La capture à grande échelle des données d’utilisation de ses polices peut potentiellement aider Google à créer un modèle freemium classant les polices gratuites et premium afin de convaincre les navigateurs (tels que Firefox, Safari ou Internet Explorer) d’inclure certaines de ces polices en tant qu’option native dans leurs futures versions. Autre possibilité, l’API Google Fonts pourrait suivre le chemin de l’API de Google Maps, qui exige désormais des propriétaires de sites qu’ils fournissent des informations de carte bancaire pour pouvoir l’utiliser.

***Colors in CSS can be specified by the following methods:

Hexadecimal colors
Hexadecimal colors with transparency
RGB colors
RGBA colors
HSL colors
HSLA colors
Predefined/Cross-browser color names
With the currentcolor keyword***

Hexadecimal Colors

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF.

For example, the #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
Example

Define different HEX colors:

p1 {background-color: #ff0000;} / red /

p2 {background-color: #00ff00;} / green /

p3 {background-color: #0000ff;} / blue /

Hexadecimal Colors With Transparency

A hexadecimal color is specified with: #RRGGBB. To add transparency, add two additional digits between 00 and FF.
Example

Define different HEX colors with transparency:

p1a {background-color: #ff000080;} / red transparency /

p2a {background-color: #00ff0080;} / green transparency /

p3a {background-color: #0000ff80;} / blue transparency /

RGB Colors

An RGB color value is specified with the rgb() function, which has the following syntax:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255 or a percentage value (from 0% to 100%).

For example, the rgb(0,0,255) value is rendered as blue, because the blue parameter is set to its highest value (255) and the others are set to 0.

Also, the following values define equal color: rgb(0,0,255) and rgb(0%,0%,100%).
Example

Define different RGB colors:

p1 {background-color: rgb(255, 0, 0);} / red /

p2 {background-color: rgb(0, 255, 0);} / green /

p3 {background-color: rgb(0, 0, 255);} / blue /

RGBA Colors

RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the object.

An RGBA color is specified with the rgba() function, which has the following syntax:

rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Example

Define different RGB colors with opacity:

p1 {background-color: rgba(255, 0, 0, 0.3);} / red with opacity /

p2 {background-color: rgba(0, 255, 0, 0.3);} / green with opacity /

p3 {background-color: rgba(0, 0, 255, 0.3);} / blue with opacity /

HSL Colors

HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors.

An HSL color value is specified with the hsl() function, which has the following syntax:

hsl(hue, saturation, lightness)

Hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness is also a percentage; 0% is black, 100% is white.
Example

Define different HSL colors:

p1 {background-color: hsl(120, 100%, 50%);} / green /

p2 {background-color: hsl(120, 100%, 75%);} / light green /

p3 {background-color: hsl(120, 100%, 25%);} / dark green /

p4 {background-color: hsl(120, 60%, 70%);} / pastel green /

HSLA Colors

HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity of the object.

An HSLA color value is specified with the hsla() function, which has the following syntax:

hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Example

Define different HSL colors with opacity:

p1 {background-color: hsla(120, 100%, 50%, 0.3);} / green with opacity /

p2 {background-color: hsla(120, 100%, 75%, 0.3);} / light green with opacity /

p3 {background-color: hsla(120, 100%, 25%, 0.3);} / dark green with opacity /

p4 {background-color: hsla(120, 60%, 70%, 0.3);} / pastel green with opacity /

Predefined/Cross-browser Color Names

140 color names are predefined in the HTML and CSS color specification.

For example: blue, red, coral, brown, etc:
Example

Define different color names:

p1 {background-color: blue;}

p2 {background-color: red;}

p3 {background-color: coral;}

p4 {background-color: brown;}

A list of all predefined names can be found in our Color Names Reference.

The currentcolor Keyword

The currentcolor keyword refers to the value of the color property of an element.
Example

The border color of the following <div> element will be blue, because the text color of the <div> element is blue:

myDIV {

color: blue; / Blue text color /
border: 10px solid currentcolor; / Blue border color /
}

attention article de 2004 !
En tentant de recréer un design sophistiqué dans un courriel HTML à l'aide de CSS, on se heurte souvent à un mur qui peut se présenter soit sous la forme d'inexplicables mutilations par les clients mail, soit sous celle d'un mail sentencieux de la part d'un administrateur de messagerie, statuant que les CSS sont “contre les règles”. Si vous aussi vous en avez assez de vous taper la tête contre les murs et d'utiliser les balises font, cet article est pour vous.

Contrairement à ce que l'on peut penser, vous pouvez créer en toute tranquillité des courriels HTML avec une bonne vieille CSS façonnée à l'ancienne. Oui, vous avez bien lu. Et même si tous les attributs ne seront pas de la partie, la plupart fonctionneront de manière irréprochable avec cette méthode.
D'abord arrive l'amour : pour le meilleur et pour le pire

Entre des articles sur le web design, des conversations entre professionnels, et des retours d'administrateurs de messagerie, j'ai fini par apprendre que certains clients mail massacraient allégrement les CSS en supprimant les styles ou en tronquant les en-têtes. J'ai également réalisé que si je voulais réellement utiliser des CSS dans mes courriels, j'avais tout intérêt à lier la feuille de style plutôt que de l'encapsuler.

Comme je n'avais encore jamais lu d'ouvrage ou rencontré d'administrateur de messagerie autorisant l'usage de mes CSS sans une guerre en règle, je m'en étais remis à la sagesse populaire. Quelle n'a pas été ma surprise quand je me suis attaqué au sujet et que j'ai décidé d'expérimenter !
Puis vient le mariage : la remise en cause

Le seul moyen de trouver une méthode pour utiliser les CSS dans les courriels HTML était de remettre en cause tout ce que je savais, et de casser toutes les “règles”. Une fois affranchi de celles-ci, il devenait possible d'explorer chacune des techniques recelant la moindre petite promesse. Voici comment cela s'est passé :

J'ai tout d'abord conçu un mail lié à une feuille de style et je l'ai expédié via un serveur d'administration connecté à de multiples adresses, webmails, et clients de messagerie. Je n'ai pas réalisé de tests sur tous les clients mail, mais tous les leaders des marchés Mac, PC et Unix ont pu être testés.
Après plusieurs essais, j'ai réussi à introduire des styles encapsulés. Ce qui s'est révélé être mon premier pas vers la réussite. (Dans le cadre d'une utilisation poussée des styles encapsulés, il est important de noter que les versions 6.0 et supérieures d'AOL rejetteront tout mail lié à des feuilles de style externes. Eh oui ! Rejetés, renvoyés en vous claquant la porte virtuelle au nez virtuel)
J'ai ensuite lu les codes source (ce qui relève de l'exploit en ce qui concerne les webmails) pour voir comment mon courriel avait pu déguster.
Enfin, j'ai utilisé mon expertise sur les styles mutilés pour tester les méthodes qui devaient, en théorie, éviter un tel massacre.

Mais quand j'ai vu les codes source, j'ai découvert quelque chose de plus horrible que je ne l'aurais cru. C'était incroyable ! En fait, la plupart du HTML n'en était plus - il n'en restait qu'un bric-à-brac de code et (apparemment) de balises propriétaires.
Enfin l'enfant paraît : mode d'emploi

Chaque client mail a sa propre manière de gérer le balisage, chacun avec ses propres bugs, ses fantaisies, ou ses propres méthodes de prise en charge des feuilles de style. Ce qui suit est la liste des problèmes les plus significatifs et de leurs solutions.
Problème :

L'enveloppe de chaque client basé sur la technologie web repose sur HTML, et il en résulte la présence de deux balises body lors de l'affichage d'un courriel HTML. Certains clients tentent de résoudre le problème en supprimant les deux ocurrences; d'autres y ajoutent un “x,” de sorte que <body> se mue en <xbody>. Dans les deux cas, le style définissant la balise body devient inapplicable.
Solution :

Enveloppez le contenu entier de votre mail dans une balise div et appliquez lui les attributs initialement destinés à body. That's all folks! C'est un remède simple et efficace, faisant uniquement appel à une balise <div> supplémentaire.
Problème :

Certains clients affichent purement et simplement les courriels sans aucun style. J'ai d'abord attribué ceci à la mutilation de mon style, pourtant clairement apparent dans le balisage. J'ai donc passé un temps non négligeable à traquer le coupable, testant une multitude de courriels. Hélas, la solution était en fait juste sous mon nez : les styles n'étaient pas supprimés, mais les points (.) précédant leurs noms, si. En l'occurrence, .DefinitionDeStyle{} se transformait en DefinitionDeStyle{}, provoquant ainsi une définition de style sans aucune portée.
Solution :

J'ai utilisé les sélecteurs de classe, qui assurent que chaque style défini commencera par une lettre plutôt que par un point. Ainsi .DefinitionDeStyle{} peut devenir td.DefinitionDeStyle{} ou div.DefinitionDeStyle{} (le cas échéant). Une solution quelque peu déconcertante, mais qui a le mérite d'être efficace et (une fois de plus) accommodante.
Problème :

Les webmails utilisent leurs propres feuilles de styles, et comme celles-ci précèdent les miennes, l'effet de cascade aboutit à une priorité de mes règles sur celles du webmail. De sorte que mes pseudo-classes et mes définitions d'éléments (tel a:link{} et td{}) altéraient par mégarde le design du webmail lui-même. Fichtre !
Solution :

J'ai paramétré précisément chaque définition. C'est ainsi que a:link{} est devenue à la fois span.DefinitionDeStyle a:link{} et td.Contenu a:link{} pour mettre en forme les liens HTML dans les deux niveaux de l'arbre du document. Cette approche peu orthodoxe alourdit le balisage, mais elle assure que mes styles seront appliqués uniquement aux éléments de mon courriel. Elle établit aussi un respect du travail, pour le designer du webmail comme pour ses utilisateurs. Mais surtout, le code qui en résulte est correct et fonctionne comme prévu.
Problème :

Hotmail : le plus démoniaque de tous. Aucune pitié pour les mails en HTML qui s'appuient sur des CSS. Il ne se contente pas d'éradiquer les styles, mais aussi les balises suivantes des courriels : <head>, <title>, <meta>, et <body>. Dites adieu à votre beau design.
Solution :

Je vous recommande de considérer soigneusement jusqu'où vous voulez vous plier à l'ineptie d'Hotmail, car la méthode suivante va demander du dévouement et de la rigueur. Comme la balise <body> et toutes celles qui précèdent se sont évaporées, la seule option consiste à utiliser les styles CSS en-ligne. Les styles définis en-ligne sont pénibles et peu productifs, et vous préféreriez sans doute ne pas avoir à les utiliser, mais ils fonctionnent tout de même. Si vous prévoyez une utilisation massive d'Hotmail par votre public, vous pouvez vous tourner vers cette méthode. Mais si vous n'avez pas à vous soucier d'Hotmail, sautez donc cette étape et pensez aux choses importantes de la vie, comme manger et dormir.
Remarques
Les attributs

Avant de venir me passer un savon parce que vous avez trouvé un attribut qui échoue en utilisant l'une de ces techniques, gardez à l'esprit le fait que je n'ai pas testé tous les attributs CSS. J'ai testé les attributs les plus courants et ceux que j'utilise fréquemment. Vous découvrirez peut-être que votre attribut favori ne marche guère, et c'est la raison pour laquelle je vous adresse toute ma sympathie, et mes encouragements à tester de nouvelles méthodes.
Clients testés

J'ai testé ces méthodes avec MailApp 1.3.2 (Mac), Squirrel Mail (Mac/Windows), AOL 7.0, 8.0, 9.0 (Mac/Windows), Mozilla Thunderbird 0.5 (Mac/Unix), Yahoo Mail (Mac/Windows), Hotmail (Mac/Windows), et Microsoft Outlook 2001/XP (Windows).

Tenez-moi au courant si ces techniques échouent dans votre configuration. Notez tout de même que les capacités d'Eudora en matière d'HTML sont incroyablement faibles, je l'ai donc exclu définitivement de tout test.

Line-height et vertical-align sont des propriétés très simples. Tellement simples que la majorité d’entre nous sommes persuadés de savoir comment elles fonctionnent et comment les utiliser. Mais non. Elles sont vraiment tout sauf simples, voire les plus complexes, puisqu’elles ont un rôle important dans la création de l’une des choses les moins connues de CSS : le contexte de formatage inline (inline formatting context)

Par exemple, line-height peut être défini comme une longueur ou comme une valeur sans unité 1, mais la valeur par défaut est normal. OK, mais c’est combien normal ? On lit souvent que c’est (ou que ça devrait être) 1, ou alors 1.2, même la spec CSS n’est pas très claire sur ce point. Ce que l’on sait, c’est que le line-height sans unité est relatif à la propriété font-size, mais le problème c’est que font-size: 100px se comporte différemment entre les polices, donc est-ce que line-height est également différent ? Est-ce vraiment entre 1 et 1.2 ? Et vertical-align, quelles sont ses implications par rapport à line-height ?
...

J'ai souvent eu l'occasion à travers mes divers projets Web mobile (responsive), d'avoir à réduire la taille des polices de titre car même un simple mot ne

Here at CSSPortal, we have gathered as much information as possible to try and help you learn CSS and improve your web design skills.

This article was originally published on February 2, 2009 and is now being updated to clarify the concept and update the information for modern browsers. R