Des polices stylisées pour le web
Lorsqu’on s’attache à rendre un design de qualité sur un site internet, on aborde très souvent la problématique des polices et on se confronte à la faiblesse du choix disponible. En effet, peu de polices sont universellement installées sur la grande majorité des ordinateurs. Vous retrouverez ici la liste des polices avec leurs taux respectifs d’installation.
Le premier artifice que les développeurs et la norme W3C a inventé est la pile de police ou « font stack ». Ceci permet de définir un ensemble de polices plutôt qu’une seule. Ainsi, on affichera la première police de la liste qui est disponible. Ceci permet de gérer les équivalences de polices entre les mondes PC & Mac notamment. Cet outil conserve toutefois l’inconvénient de ne fournir qu’un petit nombre de styles différents.
Du texte dans des images
La plupart des grands sites cependant on intégré d’autres polices dans leurs chartes graphiques. Cependant, ils passent souvent par des images. Ces polices ce cantonnent donc aux bandeaux d’animation, qui ne souffrent d’aucune limite technique.
Certains sites, sur la même technique, génèrent des images à la volée pour correspondre aux titres de leurs rubriques. Ceci a l’intérêt d’un affichage qualitatif quelque soit la configuration de l’utilisateur. Cependant, cette technique pose 3 soucis majeurs selon moi :
- elle impose de stocker autant d’images que de titres et/ou de consommer de la ressource serveur pour la génération dynamique de ces titres
- elle ne permet de positionner le texte aussi facilement qu’on le ferait avec du texte brut. Elle interdit par exemple d’appliquer des variations de styles (gras, espacement des caractères, interligne, etc…)
- elle pose des problèmes de SEO et impose de se satisfaire de champ alt, beaucoup moins impactant pour le référencement que des balises Hx.
Le flash, styliste du web
Flash permet d’embarquer des polices de manière optimisée. Ceci comporte cependant les mêmes limites que les images, sauf pour le premier point, car on peut créer des flash dynamiques.
Sur ce sujet, l’initiative SIFR est intéressante : elle permet de transformer dynamiquement n’importe quel texte avec la police choisie, en javascript directement. L’astuce consiste à embarquer la police dans un flash caché et le réutiliser pour les titres.
Le résultat est correct et a moins de contraintes que les images ou le flash statique.
Le SEO n’est plus un problème car le code HTML est classique et la transformation se fait après le chargement de la page.
Cependant cette technique pose toujours le problème des variations de style. Positionner un flash sera moins aisé. Cependant, cela peut convenir a bien des cas.
Le flash embarqué pèse entre 30Ko et 150Ko, selon la police choisie.
Embarquer directement la police en CSS
La manière la plus efficace que j’ai trouvée à ce jour pour embarquer des polices est d’utiliser tout simplement CSS. La norme CSS3 doit permettre à terme d’embarquer de manière uniforme les polices sous le format Web Open Font Format (Woff) mais comme pour toutes les normes web, cela prendra du temps.
Cependant et à mon grand étonnement, avec de petites manipulations simples ceci est compatible avec la plupart des navigateurs (même IE6).
La voie a été ouverte par l’initiative WebFonts de Google qui saura satisfaire nombre d’utilisateurs. Cependant, j’ai constaté des longueurs à la connexion parfois qui peuvent pénaliser les performances d’un site : j’ai donc internalisé la fonction.
Le principe est simple, on charge si besoin la police en CSS, avec des formats différents selon le navigateur de l’utilisateur. Tout ce qu’il vous faut, c’est une police déterminée en deux formats : ttf & eot (microsoft). (Pour convertir un TTF en EOT, il y a plusieurs sites qui vous y aideront, notamment l’excellent font2web, on la commande ttf2otf sous Linux).
Ensuite, vous pouvez
- soit utiliser les balises CSS @font-face adaptées à chaque navigateur comme décrit sur Covert Prestige
- soit utiliser le script web-fonts que j’ai publié en opensource sur Google Code (http://code.google.com/p/web-fonts/)Il s’agit d’un petit script PHP qui génère le code adéquat à chaque navigateur.(Il sera aisé de convertir ce code en .Net ou en JSP je pense)N’hésitez pas à me contacter pour comprendre l’utilisation du script.Pour la page, il s’agit uniquement d’ajouter une feuille de style CSS et ensuite d’ajouter votre police à votre font stack.
Voici un petit exemple de l’utilisation du script :
Grâce à cette technique,
- vous limitez la charge sur le poids de vos pages (le poids correspondra uniquement au poids du fichier de la police et la police ne sera chargée logiquement qu’une seule fois puisque mise en cache pour les pages suivantes)
- vous restez compatible avec les normes W3C,
- vous pouvez optimiser vos pages pour le référencement naturel
Limites et restrictions
Attention cependant au choix de vos polices, avec certaines polices le rendu diffère beaucoup selon la configuration graphique de l’ordinateur de l’internaute. Il sera donc nécessaire de faire des tests méticuleux pour valider la bonne lisibilité du résultat.
Sur certaines polices, j’ai rencontré aussi parfois des problèmes de positionnement (par exemple avec la police Josefin de Google WebFonts) : la ligne de pied pose des soucis et lorsqu’on a besoin de positionner un texte très précisément, c’est impossible.
Enfin, sous certains navigateurs (Firefox) avec le script web-font fourni, cela ne semble fonctionner que si le script est hébergé sur le même domaine que le site à personnaliser. Google Web Fonts est meilleur que moi sur ce coup-là car eux y arrivent semble-t-il : je n’ai pas compris la différence.
Il ne vous reste plus qu’à trouver la police qui vous plaira, la perle rare qui correspondra au ton que vous souhaitez donner à votre site. Ce sera sans doute ça le plus long.
Pour cet exercice, dafont est un outil incontournable
J’ai trouvé une liste de fournisseurs de web-fonts clé en main. Il y a des limites mais cela peut peut être compléter le débat.
http://sprungmarker.de/wp-content/uploads/webfont-services/#part1