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.
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 librementmodulables. 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.
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 » 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 » 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 » 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èressans 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 » 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.
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.
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.
<!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> 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.
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.
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...
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....
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 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.
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...
Offrez un service performant et fiable à vos clients avec l'hébergement web de IONOS.
Voir les packs
