No se si fué el primero que tuvo la idea, pero fue Drew Wilson y su Pictos Font los que me abrieron los ojos a la posibilidad de usar una fuente tipográfica especial en combinación con la propiedad @font-face de CSS3 en lugar de imágenes para representar íconos.

Ahora que la técnica se ha vuelto más y más popular me da gusto decir que fuí un early adopter y que la vengo usando desde hace más de un año en la plataforma de publicidad que escribí en Onswipe. Aunque en su momento fue una decisión arriesgada, el riesgo terminó valiendo mucho la pena.

¿Han escuchado de ese aparatillo que Apple está liberando por estos días? Boom. ¿Vieron la resolución de esa pantalla? Ahora mismo los diseñadores (bueno, los responsables) del mundo estan trabajando horas extra creando gráficos de doble resolución para que sus sitios no se vean del nabo en el nuevo iPad. Y los sys admins están sufriendo calculando cuánto más ancho de banda van a gastar sirviendo estás gráficas de alta resolución.

Pero no es mi caso, ni el de ningún diseñador que haya tenido la visión de utilizar @font-face en lugar de gráficas para sus íconos por que resulta que las fuentes son vectoriales y por lo tanto infinitamente escalables. Así que mientras ellos trabajan extra yo al fin tengo tiempo para escribir un post.

Esta técnica, obviamente, no es para todos. A los pixel control freaks o a los semantic nazis seguro les produce urticaria tan solo el pensamiento de usar fuentes en lugar de gráficas. Para el resto de diseñadores inteligentes les dejo unos enlaces útiles:

• Pictos font server es una versión hospedada y sobre demanda del Pictos font.
• Steedicons tiene una estética de hecho a mano
• Iconic es un set open source de íconos. Muy bonitos.
• Glyphish Otro oldie. Originalmente es para apps de iOS, pero se ven bien en web.