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.
Articles similaires
Responsive Web design et CSS
Les polices de caractères sont bien trop souvent oubliées en Responsive Web design bien qu’il soit relativement aisé de les mettre en place de manière adaptative. Mais comment y parvenir ? Quelles polices de caractères sont adaptées à votre présence sur le Web ? Nous vous donnons un aperçu des procédés techniques et des commandes CSS à mettre en place pour votre projet Web.
Typographie selon le responsive Web design : principes de base
Internet met à disposition de nombreux textes dotés de polices variées. La propagation du responsive Web design se répercute sur la typographie des pages Web. L’apparence de la police doit constamment s’adapter à la taille de l’écran, selon le support utilisé. Une bonne typographie doit être flexible et s’adapter aux différentes présentations de sites Web et appareils correspondants selon les…
Icon fonts : un Web design avec des pictogrammes vectoriels
L’utilisation d’une icon font pour intégrer des pictogrammes fonctionnels vectoriels dans votre site Internet présente de nombreux avantages. Premièrement, par rapports aux images classiques pixelisées, ces illustrations peuvent s’adapter à tous les supports sans que leur qualité n’en pâtisse. Par ailleurs, l’intégration via CSS présente de nombreuses possibilités de conception en se basant sur le…
Les meilleures webfonts : voici pourquoi les web safe fonts sont si importants
Les web safe fonts sont des polices qui peuvent être utilisées sur le Web sans aucun problème. Le facteur clé ici est de savoir si les polices respectives peuvent être affichées correctement par le plus grand nombre de navigateurs possible. Découvrez pourquoi le nombre de web safe fonts ne cesse de croître et pourquoi les webfonts jouent un rôle important pour le succès des entreprises sur le Web.
Comment incorporer une icon font à un document HTML
Les icônes sont intégrés en général via des classes CSS dans des fichiers HTML. Ce principe est illustré par l’une des icon fonts les plus utilisées, soit la Font Awesome. Cette police open source comprend plus de 600 pictogrammes vectoriels et elle convainc grâce à sa simplicité et sa mise à jour régulière. Le paquet d’installation contient un fichier CSS presque entièrement configuré, ce qui…