Je me suis mis il y a peu à la technique des glyph icons, en gros ça permet de gérer les pictos sous forme de fonte (donc c’est du texte) pour profiter de la foultitude de bénéfices que le vecteur peut apporter dans ce domaine. J’ai parlé de la technique dans un précédent billet et ce présent article est un peu mon retour d’expérience.
Alors il y a deux approches, soit vous cherchez des packs d’icônes vectorisés libre de droits, il suffit de choisir un pack d’icônes qui vous plaît, personnellement je vais sur icomoon, leur bibliothèque d’icônes à triplé en 3 mois, l’interface est cool et pis c’est gratos). Bon ça c’est fastoche je ne vais pas m’étendre là-dessus.
La deuxième approche c’est de se constituer son propre pack d’icônes à partir de pictos, soit glanés sur le web (libre de droits !), soit faits par un graphiste. Là encore icomoon est top pour ça puisqu’il vous permet d’importer des icônes au format svg (ou autres) et de générer vos fontes facilement. Et si vous choisissez d’aller dans cette voie vous allez vous heurter à quelques soucis. Ok alors prenons un cas concret Il se trouve que j’ai tout un tas d’icônes vectorisées (que j’ai été prendre sur The Noun Project), en voici un aperçu.
Toujours dans Icomoon, je les importe et je génère ma fonte que j’installe ensuite dans mon projet web et là malheureusement je me retrouve dans un cas où mes icônes sont affichées en tout petit (sans blague ?? en même temps c’est un peu le propre des icônes d’être affichées en petit 🙂 sauf que voilà ce que ça donne : 
Pas beau. On dirait que les icônes ont pris du poids pendant la manoeuvre ! Elles sont toute grassouillettes. Un rapide tour des navigateurs m’apprends que c’est comme ça dans Chrome 21, Firefox 14, et Opera 12. A ma grande surprise je découvre que c’est vraiment pas mal dans ie9 🙂 (ie8 c’est naze de toute façon et cette technique ne marchera pas dans ie7, là n’est pas la question), le meilleur rendu que j’obtiens c’est sur l’iPad 1 et 3 (pas pu tester le 2), et sur Android 4.0 (opera mobile, chrome, firefox beta et le navigateur par défaut qui doit être sous webkit je suppose). Bon donc en résumé : super sur mobile et tablette, pas terrible sur ordi de manière globale.
Solution 1 : aligner ses icônes sur une grille
Après quelques tests je me rends compte qu’en agrandissant le font-size de mes 3 pictos le problème disparaît. Sauf que moi j’en ai besoin précisément dans ces dimensions et d’ailleurs la plupart des icônes sur le net sont taillées entre 16 et 32 pixels. Des petites tailles en somme. En fait le problème vient du fait que nos navigateurs ne sont pas capable de gérer correctement le sub-pixel rendering. C’est résumé mais dans les faits c’est vraiment ça. Plus de détails sur le sujet : dcurt.is/pixel-fitting. Très bien donc en fait, le soucis vient des icônes vectorisées elles-même parce qu’elles n’ont pas été correctement alignées sur une grille (ouais les graphistes qui font des icônes utilisent des grilles de 16×16 ou 32×32 :). Donc je prends mon Illustrator, je me fait une grille. Pour info voici comment procéder “View > Show grid” pour afficher la grille (et dans “Illustrator > Preferences > Guides & Grid…” pour la paramétrer). Pour info une autre options très utiles à activer : “View > Snap to grid”, ça permet que les points soient “aimantés” à la grille quand on les déplace à la main. Et donc j’y pose une de mes icône histoire de voir comment ça rend et là…
Bah voilà on peux constater que pratiquement rien n’est aligné ! 😀 J’entreprends donc de tout aligner comme il se doit en utilisant l’outil “flèche blanche” (ouais je suis un illustrator noob), et je me retrouve avec ça du coup :
Là tout tombe nickel ! 🙂 Ca m’a pas pris très longtemps entre 2 et 5 minutes je pense (surtout avec le “Snap to grid” activé ça permet vraiment d’aller plus vite). Bon donc je fais pareil pour mes 2 autres icônes… Et voilà ce que ça donne (ça s’améliore !) :
Je vous conseille grandement une grille de 32×32 pixels, ce sera plus simple qu’en 16×16 pour reproduire l’icone.
Solution 2 : -webkit-font-smoothing pour forcer l’antialiasing sur Webkit
Je fais quelques recherches et je tombe sur cette propriété CSS qui paraît pas mal.
.mes-pictos {
-webkit-font-smoothing: antialiased;
}
Le rendu est plutôt acceptable : 
Le w3c parle lui de font-smooth que Mozilla décrit dans sa doc mais pas moyen de le faire marcher à l’heure où j’écris cet article (Firefox 14). Bon donc font-smoothing c’est la version implémentée par Webkit, apparemment ils ont encore fait leur popotte dans leur coin histoire de pas faire comme les autres mais bon, passons. Cette solution est donc plutôt pas mal mais elle ne s’adresse qu’aux Webkit. C’est déjà ça mais il reste encore ff, opera, et ie8.
Solution 3 : tricher un peu avec du text-shadow
Cette solution est toute bête mais peut grandement améliorer le rendu. Un chouilla de text-shadow de la même couleur que le fond.
.mes-pictos {
text-shadow: 0 1px 0 #couleur;
}
Ou bien un peu plus clair que la couleur de fond pour créer un effet de biseautage. Jouer légèrement avec l’opacité permet aussi parfois d’améliorer encore un peu le rendu. 
Bon ici il se trouve qu’ici j’ai des icônes blanches du coup ça ne changera pas grand chose par contre pour tous ce qui est des icônes grises, là vous arriverez pratiquement systématiquement à améliorer le rendu.
Conclusion
En combinant ces trois techniques (font-smoothing + aligner sur une grille + text-shadow d’1 pixel) on arrive à quelque chose de presque parfait. Alors certes Firefox reste clairement le moins bon pour l’anti-aliasing des glyph icons mais uniquement sur des petites font-size.
Certains peut-être n’y trouverons, comme moi, rien à redire et d’autres décideront que c’est trop crado pour être utilisé en l’état. Pour ma part, la quantité de bénéfices liés à cette technique pèse bien plus lourd dans la balance que d’avoir un lissage parfait de mes icônes sur Firefox, ie8 et Opera. Et puis Mozilla finira bien par sortir une maj qui améliorera la situation.
Note à propos des MIME types
Pensez qu’il y a peu de chance que les fichiers de types .woff, .eot et compagnie soient déclarés par défaut dans vos serveurs aussi voici un extrait du .htaccess d’H5BP.
Ressources
• Pixel fitting – D. Curtis
• The making of Octicons – Github
• Creating and using a custom icon font – Video CSS Tricks
• Displaying icons with fonts and data-attributes – 24 Ways
• Why and how to use icon fonts – Vanseo Design
