Le choix d'une police représente une étape très importante, car elle influence considérablement le rendu graphique d'une Page Web. Pour comprendre cela, il suffit de constater que plus de 90% des informations sur le Web sont textuelles. Il est donc fondamental d'utiliser pour les textes d'un Site des polices non seulement belles, mais également facilement lisibles à l'écran, et d'avoir la certitude que ces polices peuvent s'afficher correctement sur les écrans de tous nos Visiteurs, indépendamment du dispositif et du Navigateur utilisés pour leur navigation.
La lisibilité d'une police dépend essentiellement de facteurs tels que : le genre auquel elle appartient, la "hauteur x" et la dimension générale du caractère.
|
En plus de la lisibilité, jusqu'à l'introduction de CSS3, le support offert par les Navigateurs représentait un autre facteur capital dans le choix des polices pour les Pages Web. De fait, nous étions obligés d'utiliser uniquement des polices standard, c'est-à-dire des ensembles de caractères diffusés dans le monde entier et donc déjà présents sur la plupart des ordinateurs. Dans la pratique, lorsque nous développons une Page Web, nous indiquons au client quelle police utiliser pour convertir le texte. Le client cherche la police requise parmi les polices présentes sur l'ordinateur utilisé, pour voir si elle est disponible: si elle est disponible, il suit les instructions; sinon, il utilise une police par défaut. Ce mécanisme nous obligeait donc à toujours utiliser les mêmes polices (Arial, Verdana, Georgia et quelques autres), afin de pouvoir conserver le résultat visuel souhaité pour nos Pages Web, en limitant fortement la créativité des auteurs. |
L'introduction de CSS3 a permis d'utiliser dans les Pages Web des polices non standard: grâce à la commande @font-face, en effet, vous pouvez envoyer au client le fichier (aux formats TTF, EOT, WOOF ou SVG selon le Navigateur utilisé) contenant l'ensemble de caractères à utiliser pour une page spécifique. De cette manière, le client ne doit plus chercher si la police est déjà installée sur l'ordinateur utilisé, mais il utilise directement l'ensemble de caractères relié à la feuille de style de la Page même. Ainsi, grâce aux CSS3, nous pouvons insérer dans une Page Web n'importe quelle Police Web en le faisant télécharger directement par l'utilisateur. Il existe 2 techniques principales pour utiliser les Polices Web :
Ces solutions ont pour défaut que les Polices Web devront être téléchargées par l'utilisateur et auront donc un impact plus ou moins significatif sur le temps de téléchargement de la Page. En revanche, elles offrent une plus grande liberté dans le formatage des textes et la possibilité d'obtenir des mises en page plus belles et intéressantes. Par ailleurs, dans le cas des Google Fonts, les polices restent archivées sur les serveurs de Google et ne doivent pas être publiées sur le serveur du Site Web. |
Grâce aux Polices Web, vous pouvez désormais profiter de la même liberté de créativité que sur le Bureau, mais vous devez cependant faire attention à ne pas exagérer. Voici quelques conseils utiles à suivre :
|
À de nombreuses reprises WebSite X5 permet de choisir la police à utiliser : bien entendu, l'option pour la sélection de la police est disponible dans l'éditeur de l'Objet Texte, mais également dans l'éditeur de l'En-tête/du Pied de page du Modèle graphique et, de manière générale, toutes les fois qu'un texte est prévu, qu'il s'agisse d'un contenu, d'un champ de menu, d'une étiquette, etc. Dans tous les cas, le choix du type de caractère est effectué à l'aide d'un menu dans lequel s'affichent automatiquement toutes les polices installées sur l'ordinateur. Cette liste peut être enrichie en ajoutant, sans devoir les installer sur le système, des Polices Web prises sur Internet (voir Comment utiliser les Polices Web). Dans le menu de sélection, toutes les polices de système disponibles et les Polices Web ajoutées sont répertoriées ensemble par ordre alphabétique, mais vous pouvez les distinguer facilement grâce à l'icône qui les accompagne : Les types de police sont facilement différenciables grâce aux icones associées :
|
Bonnes pratiques :