Quelle police de caractère adaptative choisir sur le Web ?

Le Web offre un large choix de polices de caractères permettant un affichage optimal, quel que soit le support  et la taille de l’écran utilisé. De cette manière, on dit d’une police de caractères qu’elle est conforme aux normes du responsive Web design, c’est-à-dire adaptative. La deuxième partie du Digital Guide IONOS a démontré comment mettre en place une police de caractères adaptative, qui s’adapte donc à différentes tailles d’écran. Cette troisième partie vise désormais à expliquer où trouver ces polices de caractères adaptatives et comment les utiliser de manière appropriée.

Polices de caractères adaptatives gratuites

Les polices de caractères adaptatives ont été créées à partir de grilles fluides adaptables et conformes aux normes du Responsive Web design car elles sont librement modulables. Lorsqu’une page contenant des polices de caractères est chargée, celles-ci sont téléchargées par un serveur et affichées par la suite sur le navigateur de l’internaute. Ces polices de caractères adaptatives réagissent aux exigences du navigateur et à la taille de l’écran d’affichage.

Plusieurs plateformes mettent à disposition leurs polices de caractères adaptatives sur le Web. Parmi les sites payants, vous trouverez

Typekit ou Fontspring qui proposent un large choix de familles de polices de caractères populaires, dont de nombreuses qui font partie des grands classiques de la typographie. En matière de polices de caractère adaptatives gratuites, l’offre est toute aussi large. Par exemple, sur le site de

Google Fonts, Adobe Edge Web Fonts, Font Squirrel ou encore DaFont. Néanmoins, toutes polices de caractères adaptatives proposées ne sont pas forcément adaptées à un usage général. Certaines sont trop enfantines ou originales et sont donc à éviter ou à utiliser de manière spécifique. D’un autre côté, il se peut que certaines polices d’écriture ne comportent pas tous les caractères spéciaux voulus, il est donc important de prendre en compte le fait que l’offre de caractères disponibles varie grandement. Veillez donc à en choisir une qui est adaptative et à ce que celle-ci comporte tous les caractères spéciaux nécessaires à votre langue d’écriture. Nous vous présentons dans la suite de l’article quelques polices de caractères adaptatives de Google et comment les installer.

Sélection de polices de caractère adaptatives sur Google Fonts

La plateforme Google Fonts, en ligne depuis 2010, est une source utilisée fréquemment par les designers Web pour les polices de caractères adaptatives. Dès le départ, cette plateforme a mis en ligne plus de 700 fontes gratuites et variées qui peuvent également être utilisées tant à des fins commerciales que privées. Toutes ces polices de caractère adaptatives sont disponibles pour le téléchargement et vous pouvez les intégrer à votre site via un code.

Open Sans

« Open Sans » est une police de caractères classique, épurée et sans empattements. Cette police, créée par Steve Matteson, est adaptée à tous les supports : ordinateurs, terminaux mobiles et domaine de l’impression. 

Lato

« Lato » est une police de caractères sans empattements très appréciée. « Lato » a été créée par Łukasz Dziedzic, avec le soutien de Google.

Roboto

« Roboto » a tout d’abord été utilisé sur le système Android et cette police de caractères se développe continuellement. « Roboto » est une police de caractères sans empattements et se caractérise par la finesse du lettrage, ce qui permet d’intégrer plus de caractères sur une même ligne.

Source Serif Pro

« Source Serif Pro » a été lancée pour l’entreprise Adobe Systems. Cette police de caractères avec empattements peut être utilisée en complément de « Source Sans Pro » (qui est une fonte sans empattements) et de « Source Code Pro » (qui est une police d’écriture à chasse fixe conçue pour la programmation). Celle-ci est également mise à disposition gratuitement par Adobe.

Playfair Display

Si vous désirez avoir recours à une police de caractères stylisée et avec empattements, « Playfair Display » est un excellent choix. De plus, six styles différents sont mis à disposition.

Intégrer les polices de caractères adaptatives de Google

Ces polices de caractères adaptatives pour votre site en Responsive Web design sont disponibles sur des bases de données variées. Les polices de caractères présentées précédemment sont disponibles aussi bien sur Google Fonts que sur Adobe Edge Web Fonts ou encore sur Font Squirrel. Nous vous montrons à titre d’exemple comment intégrer la police « Open Sans » via Google Fonts.

  • Entrez « Open Sans » dans le champ de recherches et cliquez sur le bouton fléché « quick use »;
  • Par la suite, les différents styles de cette police de caractères adaptative s’afficheront et il ne vous reste plus qu’à choisir votre fonte de prédilection. Vous pouvez également définir si vous souhaitez par la suite utiliser les caractères autres que les caractères courants de l’alphabet latin,
  • Un code s’affiche par la suite pour le <head> de vos pages Web et un autre pour le document CSS,
  • Pour intégrer « Open Sans » dans HTML, insérez le code attribué (qui contient également le lien vers Google Fonts). Les instructions apparaissent par la suite comme ceci :
<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Voici comment intégrer une fonte Web de Google</title>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
   </head>
   <body>
   </body>
</html> 
  • A l’aide du deuxième code, vous définissez la police en CSS :
body {
 font-family: 'Open Sans', sans-serif;
 font-size: 100%
}

Comme vous pouvez le constater, il est particulièrement aisé d’intégrer une police d’écriture via le programme de Google. Vous avez également la possibilité d’effectuer cette opération sur Google Fonts pour intégrer cette police en utilisant la règle @import en CSS ou JavaScript.

Un large éventail de polices de caractères adaptatives gratuites

De nombreuses polices de caractères adaptatives pour votre site en Responsive Web design sont disponibles en ligne. En tant que Web designer, vous pouvez facilement utiliser des polices d’écriture de Google Fonts telles qu’Adobe Edge Web Fonts ou Font Squirrel entre autres. Vous devriez tout de même être averti du fait que les polices très appréciées, telles que « Open Sans », « Roboto » ou encore « Lato » sont très largement répandues le Web. Vous aurez donc à mettre en place un budget conséquent si vous désirez utiliser une police de caractère particulière ou unique (par exemple celle d’une entreprise, la « police maison »). Mais les polices de caractères gratuites vous offrent beaucoup de libertés dans le cadre d’un projet en Responsive Web design. De plus, leur intégration sur votre site Web s’effectue rapidement, et vos visiteurs peuvent rapidement en profiter.