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. 

Image: Voici à quoi ressemble la police de caractères Open Sans sur Google Fonts
La police de caractères sans empattements Open Sans est épurée et très appréciée dans le domaine du Web (Source: Google Fonts)

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.

Image: Voici à quoi ressemble la police de caractères Lato sur Google Fonts
Lato est également une police de caractères sans empattements populaire et qui compte différentes variations (Source: Google Fonts)

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.

Image: Voici à quoi ressemble la police de caractères Roboto sur Google Fonts
Roboto est une autre police de caractères sans empattements régulière, son domaine d’utilisation repose sur les systèmes d’exploitation Android (Source: Google Fonts)

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.

Image: Voici à quoi ressemble la police de caractères Source Serif Pro sur Google Fonts
Voici différentes représentations de la police de caractères avec empattements Source Serif Pro de Google Fonts (Source: Google Fonts)

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.

Image: Voici à quoi ressemble la police de caractères Playfair Display sur Google Fonts
Google Fonts propose différentes variations de la police de caractères avec empattements Playfair Display (Source: Google Fonts)

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.

Cet article vous a-t-il été utile ?
Aller au menu principal