Tout bon designer sait parfaitement que le développement d'un design pour le web doit tenir compte des polices de caractères et de leur affichage correct sur l'ordinateur de l'utilisateur. Le problème est simple : si dans notre beau design nous utilisons des titres, du texte ou des menus avec des polices particulières ou, en tout cas, non installées sur le pc de la personne qui visite les pages, la même police sera remplacée par une police incluse dans le jeu de polices du pc de l'utilisateur.
Utilisation de polices
Il est conseillé d'utiliser des polices spéciales, pour les titres et la plupart des menus. Pour les textes, il est fortement recommandé d'utiliser des polices de caractères qui seront certainement installées sur la plupart des ordinateurs (pc, mac, linux).
Dans ce billet, je ne veux pas parler du remplacement des polices, pour les titres et les menus (positionnement via Css, techniques flash/javascript, bibliothèques Php Ming etc), mais plutôt analyser les possibilités d'étendre le choix des polices système à utiliser pour le texte "courant" de nos pages. Généralement, on choisit toujours entre Arial, Tahoma, Verdana, Trebuchet, Georgia, Courier, bref, un ensemble très limité de 7-8 polices.
Extension des polices
L'extension du jeu de polices pourrait être très utile pour éviter les images et les solutions de contournement, donc à mon avis une petite étude ne fait pas de mal. On a découvert cette page qui répertorie toutes les polices (Windows et Mac Os) par ordre de popularité (en pourcentage).
Nous découvrons donc qu'en fait les polices énumérées ci-dessus sont celles qui sont les plus courantes sur les deux systèmes (et nous parlons certainement aussi des anciennes installations des systèmes d'exploitation). Par exemple, Arial sur Windows est à 97, sur Mac à 96%.
On découvre, cependant, que sur Mac OS la police avec le plus haut pourcentage est la Monaco donnée à 96.91%.
Typoghaphie
Pour ceux qui ne travaillent qu'avec des Mac depuis des années, le problème ne se pose peut-être pas, mais ils constateront que 60 à 70 de leurs visiteurs ne voient pas la Monaco, car ils surfent avec des systèmes Windows qui n'utilisent presque jamais cette police.
Cette liste (en utilisant peut-être la touche de recherche du navigateur) nous permet de comprendre immédiatement quelles sont les possibilités dont on dispose pour trouver la police souhaitée sur les principaux systèmes d'exploitation.
Une autre aide consiste à répertorier via CSS les différentes polices "similaires" au niveau typographique. En partant de celle qu’on veut, nous essayons de donner via CSS, 3 ou 4 possibilités au navigateur pour rendre une police similaire à celle que nous voulons.
Cette page, appelée Font Matrix, nous permet de voir le rendu de la police souhaitée et (en croisant les colonnes avec les lignes) de savoir si elle est utilisée ou non sur ce système d'exploitation.
Font Matrix tient également compte du fait que les polices sont installées comme un plus avec les versions de Office ou de la suite Adobe.
OpenOffice
Cependant, étant donné que des programmes open source (comme OpenOffice) sont en train de voir le jour, je ne me fierais pas vraiment aux dernières colonnes, mais simplement aux installations par défaut du système d'exploitation.
La page d'assistance du blog pour cette matrice, met en évidence la manière d'utiliser une police et de trouver des polices similaires sur diverses plateformes.
Enfin, on vous indiquera un lien utile pendant le développement. C'est une autre matrice, liée cette fois aux EMs.
On ne va pas parler ici des avantages et des types d'utilisation de cette unité de mesure, mais je vais vous signaler cette ressource très utile pour convertir EM en pixels, sans avoir toujours une calculatrice à portée de main.
