Polices standard et Polices Web

Approfondissements >

Polices standard et Polices Web

Previous pageReturn to chapter overviewNext page
Montrer/Cacher le texte caché

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.

Cliquez pour etendre/reduireLisibilité des polices

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.

Genre - En ce qui concerne le genre, sur le Web, les polices sans-serif (sans empattement, ou à bâtons, comme Arial ou Elvetica) sont plus lisibles, tandis que les polices serif (avec empattement, comme Times New Roman, Georgia ou Palatino) conviennent mieux aux documents imprimés. En revanche, les Navigateurs supportent peu les polices cursiv (cursives, comme Arabic) et fantasy (fantaisies, comme Symbolix). Enfin, lorsqu'elles sont utilisées pour des textes très longs, les polices monospace (à chasse fixe, comme Courier) ont tendance à fatiguer la vue et sont habituellement utilisées sur le Web uniquement pour publier des fragments de code.
Hauteur x - "Hauteur x" signifie la hauteur du caractère pour la lettre x minuscule. Une police telle que Times New Roman a, par exemple, une lisibilité moyenne sur l'écran d'un ordinateur, car sa hauteur x est modérée. Un caractère comme Verdana, étudié spécifiquement pour être lu à l'écran, présente au contraire une hauteur x très élevée, en particulier si elle est comparée à d'autres types de caractère avec le même corps.
Cliquez pour etendre/reduireLe polices standard ou Polices Web Safe

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.

Cliquez pour etendre/reduireLes polices non standard ou Polices Web

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 :

utiliser des polices présentes sur votre ordinateur, en publiant les fichiers des polices (dans les différentes extensions) sur le serveur Web du Site;
utiliser un service externe, tel que Google Fonts™ (gratuit) ou Adobe Typekit (payant), qui proposent des Polices Web déjà prêtes à l'emploi, à rappeler à l'aide des feuilles de style (CSS) des Pages du Site.

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.

Cliquez pour etendre/reduireQuelques conseils

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 :

Il est préférable d'utiliser peu de polices et de dimensions : les Pages auront un aspect plus clair et ordonné.
Il faut éviter les changements fortuits et appliquer le même type de caractère et la même combinaison de styles dans toutes les pages : le Site sera plus homogène et cohérent.
Il est important d'intégrer dans les Pages uniquement les Polices Web et les styles associés effectivement utilisés : les fichiers des Polices Web doivent être téléchargés par l'utilisateur et, par conséquent, il faut en évaluer l'impact sur les temps de téléchargement des Pages.
Il est important de toujours vérifier les licences d'exploitation des polices utilisées : certaines polices peuvent être utilisées gratuitement sur le Web, tandis que d'autres peuvent être utilisées uniquement pour l'impression ou dans des certaines conditions et il faut évaluer chaque cas séparément.
Cliquez pour etendre/reduireUtiliser les Polices Web dans WebSite X5

À 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 :

Google Fonts: polices intégrées à l'aide de la fenêtre Ajouter des polices web de WebSite X5 et reliées au serveur Google.

Polices Web en ligne : polices intégrées à l'aide de la fenêtre Ajouter des polices web de WebSite X5 et et reliées aux serveurs du service qui offre les polices.

Polices Web hors ligne : polices intégrées à l'aide de la fenêtre Ajouter des polices web de WebSite X5 et publiées sur le serveur Web du Site.

 


Bonnes pratiques :

-

Comment utiliser les Polices Web

-

Comment télécharger une police de caractères depuis Fontsquirrel