Webfont : quand la créativité permet de plus beaux sites web

Il y a encore quelques années, les sites avec une belle typographie se faisaient extrêmement rares. Aujourd’hui, il n’a jamais été aussi simple pour les designers d’interfaces web (ou webdesigner) de trouver une police de caractères correspondant à leur imagination. Les bibliothèques de polices web se remplissent et il existe de moins en moins de limites à la créativité… et l’on passe de plus en plus de temps à trouver la police d’écriture idéale. Il est en effet important de ne pas sous-estimer leur importance car ce sont souvent elles qui donnent la première impression des visiteurs sur votre site. Une combinaison adéquate et originale de polices Web est souvent le meilleur moyen de refléter la personnalité de votre site Internet.

Typographie du Web : de l’écriture des navigateurs aux fontes modernes

Le rôle de la typographie du Web a évolué ces dernières années grâce aux progrès techniques en informatique. Par exemple, la police de caractère du langage HTML était auparavant définie par le navigateur utilisé. C’est seulement depuis l’introduction de la balise <font> (maintenant obsolète) que les développeurs ont pu intégrer leur propre typographie sur leur site Internet. Les utilisateurs pouvaient charger ces fontes seulement si celles-ci étaient installées sur leurs ordinateurs. Sinon, une « fallback font » était alors proposée, soit une fonte web standard.

La séparation du contenu (HTML) réalisée par les feuilles de style en cascade (CSS) et la mise en œuvre des téléchargements de polices dans le navigateur ont permis aux concepteurs de sites Internet d’avoir recours aux fontes du Web (ou webfonts). Il s’agit ici de polices de caractères Web. Le navigateur de l’utilisateur reçoit lors du chargement d’une page une indication sur la fonte utilisée et la charge immédiatement. Ainsi, les utilisateurs du site Internet ont devant eux la police sélectionnée, même si celle-ci n’est pas installée sur leur ordinateur.

Depuis le développement du Web Open Font Format (WOFF), soit un format de police de caractère comprimée pour un usage sur les sites Internet, les licences de webfont sont vendues par un nombre croissant de fournisseurs à des conditions différentes. Cela a entraîné une variation tant des prix, des méthodes de paiements que d’hébergement (sur un serveur dédié ou un serveur appartenant à un fournisseur). Compte tenu de la concurrence qui prend avant tout de l’importance sur les mobiles, les concepteurs de site Web disposent d’un large choix de polices de caractères modernes et créatives.

Catégories de polices et champs d‘application

Une police de caractère regroupe toutes les typographies qui ont une conception identique. Plusieurs variantes de polices existent et présentent des particularités en matière de largeur ou d’espacement. C’est la raison pour laquelle on parle de famille de polices. C’est ainsi que les polices Segoe UI, Segoe Light und Segoe Semibold appartiennent à la même famille.

Ces diverses polices ont différents champs d’application. Quand vous ferez votre choix, il vous faudra prendre deux points en considération : la lisibilité ainsi que l’émotion transmise par la police. L’écran utilisé joue également un rôle. Les polices serif sont des polices avec empattement (« serif » en anglais), c’est-à-dire que les lettres présentent des petites extensions placées perpendiculairement au trait principal du caractère. Pour la lecture sur écran, cette police n’est pas toujours idéale.

La fonction et la position du texte influencent le choix de la police. Les polices de caractères qui sont relativement voyantes sont plus adaptées aux titres qu’au corps du texte. C’est pourquoi les webdesigners utilisent plusieurs polices de caractères ou d’interfaces dans un même texte. Néanmoins, il convient de ne pas en faire trop, faute de quoi, le site peut avoir du mal à se charger.

Les effets provoqués par ces polices de caractère Web varient en fonction des contextes. Le tableau suivant illustre les particularités que ces différentes polices de caractères présentent.

Ces caractéristiques représentent les impressions générales des fontes. Dans la pratique, l’utilisation d’une police est un moyen efficace pour se démarquer de la concurrence. Afin de trouver la typographie qui vous convient, nous vous conseillons de suivre les conseils suivants :

  • Prenez en compte le thème ainsi que votre groupe cible. Une combinaison convaincante ne présente aucun intérêt si celle-ci n’est pas adaptée au sujet que vous traitez. Le mieux est probablement de mélanger des polices serif et sans serif. Les polices d’écritures manuelles sont plus voyantes et créent un effet vivant. Elles donnent une touche personnelle à votre site mais elles doivent être utilisées avec parcimonie. Les polices calligraphiques sont souvent utilisées pour les occasions spéciales telles que pour les mariages voire les cartes d’anniversaire.
  • Plus une page contient du texte, plus il est judicieux de mettre en valeur la fonctionnalité de la police de caractère. Au-delà d’une bonne lisibilité, il faut noter que les utilisateurs de mobiles utilisent le réseau mobile pour charger une page Internet et ne peuvent se permettre de charger une typographie trop complexe.
  • Limitez le nombre de polices de caractère utilisés. Deux fontes peuvent amplement suffire. Une pour le corps du texte et l’autre pour les titres ainsi que les caractères typographiques spécifiques.
  • Recherchez des polices de caractères du Web qui se démarquent et qui créent du contraste. L’interaction entre les types serif et sans serif est un bon exemple. Faites en sorte de ne pas en faire trop. Les fontes ne doivent pas être trop éloignées esthétiquement parlant pour ne pas perturber les visiteurs. Par contre, si les deux polices se ressemblent, cela peut également avoir un effet négatif car le site ne se démarquera pas.

Où trouver vos polices de caractères pour le Web ?

Les fournisseurs de polices de caractères modernes vendent des licences. Ces dernières fonctionnent soit pour une durée déterminée ou accordent des propriétés complètes. Dans le premier cas, vous recevez un lien vers le serveur du fournisseur sur lequel la police de caractère Web se trouve. Dans le dernier cas, vous hébergez vous-même la fonte. Il existe bien entendu un bon nombre de typographie en open source. Celles-ci sont très souvent utilisées par les concepteurs de sites Internet.

Vous désirez optimiser votre site Internet en utilisant une police de caractère moderne et qui se démarque ? Comparez les offres des fournisseurs de webfonts suivants :

  • Google Fonts : Fontes de Google gratuites. Plus de cent familles de polices différentes et diverses fonctions de prévisualisation.
  • Adobe Edge Webfonts : Vous trouvez plus de 500 fontes Web gratuites et modernes dans cette liste fournie par Adobe.
  • Font Squirrel : Liste de centaines de fontes gratuites.
  • Police d’écriture (www.policedecriture.com) [Plus de 13 000 polices gratuites disponibles au téléchargement] : 13000 polices gratuites par catégories.
  • FFonts : polices gratuites et payantes. Un abonnement premium est possible.
  • Dafont : cette plateforme présente des polices qui appartiennent à leurs auteurs. L’avantage est qu’elles sont uniques et vous permettront de vous démarquer.
  • MyFonts : polices diverses acquises en grande partie grâce à un paiement ponctuel et testées pendant 30 jours. Le service WhatTheFont permet d’identifier gratuitement et de manière automatisée de quelle police il s’agit.