mardi 29 janvier 2013

Tendance Web : les fontes d’icônes.

Il semble qu’une tendance émerge sur le Web depuis l’utilisation de fontes telles que celles proposées par Google Web Fonts. Il s’agit de l’utilisation de fontes d’icônes.


En effet, il y a quelque temps, les fontes utilisées devaient être disponibles sur le poste de la majorité des utilisateurs d’un site Web. On appelait Web Safe Fonts la liste de fontes pouvant être utilisée. On pouvait contourner le problème en affichant une image plutôt qu’un texte…ce qui était moins pratique pour l’utilisateur (le texte ne pouvant être agrandi ou réduit) et pour le référencement (il fallait se servir de la balise ALT pour compenser cette lacune).

Bien sûr, on avait utilisé les fontes comme Wingdings pour insérer des pictogrammes. Mais le peu de formes disponibles dans ces fontes fit qu’on se lassa assez rapidement de voir les mêmes icônes.

Par la suite, des sites tels que Google Web Font et Font Squirrel proposèrent d’intégrer un lien vers un serveur, lequel se chargerait d’afficher la fonte sans que l’utilisateur ne la possède. Ceci ouvra la porte à un Web plus riche au niveau typographique, et ce sans utilisation d’images.

Ce n’est que récemment que les Web designers ne recommencèrent à utiliser les pictogrammes contenu à même les fontes. Le fait que la communauté Internet est vaste pousse aussi dans cette direction car on voit apparaître des fontes faciles à utiliser contenant beaucoup de symboles.

Les avantages d’utiliser les fontes d’icônes :
  • On peut les redimensionner 
  • Elles sont compatibles avec tous les navigateurs 
  • On peut leur appliquer différentes couleurs 
  • On peut leur appliquer des effets (les mêmes effets applicables à un texte)
Liens intéressants :
http://typicons.com/
http://fortawesome.github.com/Font-Awesome/
http://www.entypo.com/
http://www.zurb.com/playground/foundation-icons
http://tipogram.com/
http://icons.marekventur.de/
http://www.fontsquirrel.com/fonts/modern-pictograms
http://css-tricks.com/flat-icons-icon-fonts/
http://sixrevisions.com/resources/free-icon-fonts/
http://css-tricks.com/examples/IconFont/
http://css-tricks.com/html-for-icon-font-usage/


Source :
http://en.wikipedia.org/wiki/Wingdings

Aucun commentaire:

Enregistrer un commentaire