Pour que votre site web soit bien lisible: vous trouverez des polices ici

Pour que votre site web soit bien lisible: vous trouverez des polices ici

La bonne police n’augmente pas seulement la lisibilité d’un site web, mais également de manière plus générale, le plaisir de lire. Comme les polices ont un degré de reconnaissance élevé, elles jouent également un rôle essentiel dans le marketing. Nous vous montrons ce qui fait la différence.

Mauro Landolt Mauro Landolt · Head of Communication

Le choix de la police adaptée (en anglais: «font») est essentiel dans le design global d’un site web. Celle-ci contribue en effet largement à son apparence et à sa lisibilité. Aussi devriez-vous absolument, lorsque vous concevez votre propre site Internet, réfléchir très tôt aux polices que vous utiliserez.

Lors de la conception d’un site web, un flux de lecture aussi plaisant que possible pour le visiteur doit faire partie des principaux objectifs à se fixer: plus le texte est lisible, mieux il est adapté aux personnes malvoyantes ou dyslexiques par exemple. Toutefois, même chez les personnes avec une bonne vision, le ressenti peut être différent en fonction des polices affichées. Une police agréable et facile à lire peut en effet faire toute la différence sur un écran numérique. En matière de conception, des contrastes forts et – pour les textes déroulants – un alignement à gauche améliorent généralement la lisibilité.

Les polices web donnent une note personnelle

Quelques-unes des polices les plus connues, comme l’Arial, la Verdana ou la Times New Roman, sont préinstallées sur les ordinateurs dotés des systèmes d’exploitation Windows ou Mac ainsi que sur les navigateurs les plus répandus. Ces polices préinstallées sont appelées «polices web safe». Les termes «polices système» ou «polices de navigateur» sont également couramment utilisés. Le seul système d’exploitation qui n’a pas du tout besoin de polices web safe est Android.

Les polices web safe présentent l’avantage d’être déjà disponibles sur pratiquement tous les appareils et navigateurs et de toujours avoir la même apparence. Cependant, comme elles sont utilisées sur de très nombreux sites web ainsi que dans des documents textes, il leur manque un peu le caractère individuel. Pour les applications qui nécessitent de l’originalité – par exemple à des fins de marketing et de valorisation de marques – les polices système ne sont donc la plupart du temps pas adaptées et sont donc peu demandées.

Si vous souhaitez configurer votre site web de manière plus personnalisée et accroître son degré de reconnaissance, vous devriez utiliser des types de polices personnalisées par des concepteurs. Dans le jargon professionnel, ces polices sont appelées webfonts. De nombreux systèmes de gestion de contenu (CMS) contiennent une série de webfonts préinstallés faciles à utiliser.

Cependant, de nombreuses bases de données de polices spécialisées sur Internet proposent une gamme plus complète de webfonts. Dans ces bibliothèques de polices, il est possible de télécharger des polices individuelles – souvent gratuitement – et de les intégrer dans votre site web. Mais il convient cependant de respecter certaines règles: comme pour les photos, il existe des polices soumises à licence et payantes ainsi que des polices gratuites libres de droits. De plus, en fonction du site d’implantation de la base de données, des dispositions de protection des données sont applicables.

Concernant les licences de polices: ce que vous devez savoir

Comme pour les images, les polices sont en principe protégées par les droits d’auteur. Il n’est pas possible d’acheter une police: si vous acquérez une licence pour une police – gratuitement ou contre un droit de licence – vous en obtenez toujours uniquement le droit de jouissance, pas la propriété.

Sur Internet, toute une série de bibliothèques de polices connues proposent des polices soumises à licence et payantes. Il s’agit, entre autres, d’Adobe Fonts, de Linotype ou (en partie) de MyFonts. Et il existe différents modèles de paiement pour ces polices payantes.

Avec le modèle «pay as you go», l’exploitant du site web a droit à un certain nombre de consultations de pages après le paiement initial. Une fois celles-ci effectuées, l’exploitant doit à nouveau acquérir une licence et payer pour en obtenir d’autres. Le modèle «pay once», quant à lui, est basé sur l’estimation du trafic mensuel moyen. Tant que les consultations mensuelles restent dans ce cadre, aucuns frais supplémentaires ne s’ajoutent aux droits initiaux.

Les deux modèles sont basés sur le principe technique selon lequel les polices sont intégrées ou hébergées sur le serveur web respectif; dans le modèle «pay as you go», un traceur qui compte les consultations de pages est intégré dans le code. En revanche, il y a également le modèle de licence de polices où des polices sont fournies via un abonnement à un service web et ne doivent pas être hébergées.

Trois modèles de licences de webfonts payantes et leur intégration fonctionnelle. (représentation propre selon type-together.com)

Des bases de données de polices gratuites proposent souvent aux utilisateurs des polices «libres de droits» à télécharger. Cela ne signifie cependant pas qu’aucune licence n’est nécessaire pour utiliser ces polices. Et surtout: «libre de droits» ne signifie pas automatiquement gratuit. Les polices libres de droits ne sont gratuites que si cela est stipulé dans la licence respective.

«Libre de droits» signifie en effet uniquement qu’une police peut être utilisée librement ou avec peu de restrictions après l’acquisition d’une licence unique, sans qu’il soit nécessaire d’obtenir des licences étendues. L’étendue de l’utilisation des polices sous licence est toutefois liée à des conditions préalables bien définies. Pour en savoir plus, lisez également cet article de blog.

Bases de données de polices gratuites sur Internet

Nous vous présentons ci-dessous quelques bases de données de polices connues et populaires qui contiennent des polices entièrement ou partiellement gratuites. En fonction de l’utilisation souhaitée, il est par ailleurs recommandé de vérifier avant le téléchargement si l’utilisation d’une police est autorisée uniquement à titre privé ou bien également à des fins commerciales. Ceci est généralement précisé dans les termes des licences.

Les bibliothèques de webfonts ont souvent un mode d’aperçu qui permet d’afficher un exemple de texte choisi dans différentes polices. (capture d’écran de fonts.google.com)

Intégrer des webfonts dans son propre site web

Les webfonts seront généralement stockés sur un serveur web et intégrés dans le site web. Lorsque le site est visité, les polices sont alors chargées par le navigateur respectif. L’intégration directe de polices dans le fichier CSS (Cascading Style Sheet) du site web.

Les webfonts à télécharger peuvent avoir différents formats, les formats TTF (TrueType-Format) et OTF (OpenType-Format) étant les plus répandus. Le téléchargement de webfonts TTF et OTF dans des bases de données de polices est aujourd’hui effectué par défaut au format de fichier compressé WOFF (Web Open Font Format). La compression permet un téléchargement plus rapide; les métadonnées des fichiers WOFF peuvent également contenir des informations supplémentaires sur les licences. Les fichiers WOFF sont pris en charge par tous les navigateurs courants et peuvent être intégrés dans le fichier CSS d’un site web.

Attention
Après l’intégration d’un webfont, le phénomène «Flash of unstyled text» («FOUT») peut se produire lors du chargement du site web. Dans ce cas, le site web n’est tout d’abord pas représenté avec le webfont souhaité, mais avec une police système web safe. Cela peut être dû à une connexion Internet de mauvaise qualité ou à un webfont peu performant. Dès que le webfont est bien chargé, le site web prend l’apparence souhaitée. Un FOUT est anodin, mais peut irriter les visiteurs de la page – et il est surtout peu esthétique. Il est donc recommandé de définir de bonnes polices Fallback qui ressemblent le plus possible à la police finale. Le FOUT est ainsi moins visible et également mieux noté par Google pour le SEO. Pour en savoir plus, lisez notre article de blog récent consacré aux Core Web Vitals.

Attention aux règlements de protection des données

Même si le chargement et l’intégration de polices gratuites par le biais de services web comme Google Fonts est simple, donc tentant, les exploitants de sites web (en Suisse également) doivent avoir conscience qu’il peut être soumis au Règlement général européen sur la protection des données (RGPD) et nécessiter un accord exprès des visiteurs du site web. Dès qu’un utilisateur accède à un site web avec Google Fonts ou des polices d’une autre plateforme de polices, certaines données sont envoyées aux exploitants des plateformes à des fins d’analyse.

Un jugement du Landgericht München (Allemagne) du 20 janvier 2022, qui a fait grand bruit, stipule que l’intégration dynamique de services web comme Google Fonts sans l’accord exprès des visiteurs est contraire à la protection des données. Les exploitants de sites web suisses doivent avoir à l’esprit que ce jugement pourrait faire jurisprudence. En effet, la «directive Vie privée et communications électroniques» (également appelée directive ePrivacy), existe déjà depuis 2002, soit quelques années avant l’adoption du RGPD, et a été élargie en 2009 par la directive sur les cookies.

Si vous ne voulez pas renoncer à vos polices favorites de fournisseurs comme Google Fonts, Adobe Fonts ou MyFonts, vous ne devriez pas les intégrer sous forme de services web, mais les télécharger et les héberger localement. Il est également recommandé d’afficher une fenêtre d’approbation conforme au RGPD (appelée «consent banner») à l’intention des utilisateurs lorsque ces derniers accèdent au site web.

Webfonts pour mon site web Hostpoint

Dans les systèmes de gestion de contenu courants comme WordPress, Drupal ou Joomla!, les utilisateurs peuvent également, en plus des polices préinstallées, télécharger et intégrer des webfonts pour leur site web. Et ce, qu’il s’agisse de polices d’une plateforme gratuite ou d’une police spécialement conçue pour le site web concerné. Cependant, l’intégration de webfonts nécessite certaines connaissances techniques. Si l’on considère par exemple WordPress 6.0, sorti récemment, ce n’est pas si simple qu’on pourrait le penser (pour en savoir plus, lisez notre article de blog consacré à WordPress 6.0). Notre assistance Hostpoint est à tout moment à la disposition des exploitants de sites internet pour répondre à leurs questions sur l’intégration de polices.

Visualisation d'une boîte aux lettres électronique dans un écran d'ordinateur portable avec l'icône Cloud Office. Visualisation d'une boîte aux lettres électronique dans un écran d'ordinateur portable avec l'icône Cloud Office.

Votre adresse e-mail avec domaine propre

Découvrez nos nouvelles offres de messagerie avec Cloud Office de Hostpoint. Vos adresses e-mail avec le domaine de votre choix, une mémoire généreuse pour vos e-mails et l’espace de stockage drive, différents outils Office et bien plus encore.