Crear tipografía de iconos para tu Web (responsive icons)
La técnica del Responsive Desing indica que la estructura, contenidos, e incluso del diseño del Web se debe de adaptar para su correcta visualización y uso a las diferentes resoluciones soportadas, o más específicamente a los dispositivos soportados (ordenador, tablet y smartphone en la mayoría de los casos).
Esto es sencillo de llevar a cabo en cuanto a textos y objetos del Web (capas, tablas, párrafos, etc..).
En cuanto a las imágenes, también se puede llevar a cabo, aunque corremos el riesgo que las imágenes o iconos propios de la UI (User Interface) les pase lo siguiente:
- Pixelados: si la imagen base del icono es más pequeña que el tamaño de redimensión, vía CSS, para su adaptación a resoluciones concretas de Responsive Design.
- Sobrecarga: si la imagen base del icono es más grande que el tamaño de la redimensión, se verán bien, pero se hará una sobrecarga de recursos, penalizando la carga y rendimiento del Web ya que se estará empleando una imagen más pesada de lo necesario.
¿Cómo disponer de iconos óptimos en rendimiento para las diferentes resoluciones de nuestro diseño Responsive?
Se podrían emplear varias técnicas para conseguir nuestro objetivo. Una de ellas sería la de emplear diferentes imágenes, totalmente optimizadas para cada resolución y cargarlas vía CSS. La pega de esta técnica es que realmente estaremos penalizando el rendimiento del Web al sobrecargar el CSS con contenidos por cada resolución, así como teniendo más trabajo de preparación de imágenes.
Otra técnica, la que tiene como objetivo esta entrada, es la de emplear una tipografía con iconos vectoriales.
¿Por qué emplear una tipografía con iconos vectoriales para nuestra Web?
Empleando el atributo font-face de css es posible cargar una tipografía específica en nuestra Web y salirnos de las típicas Arial, Verdana o Times New Roman. La técnica requiere que se aloje en un servidor Web (el nuestro o uno externo como Google Fonts) el fichero de la tipografía.
Lo bueno de las tipografías es que son vectoriales. ¿Qué significa que sean vectoriales? Pues que por muy grandes o pequeñas que las hagas, se visualizarán correctamente, y no por ello pesará más la Web.
Esto te tiene que dar una pista sobre la técnica que vamos a bordar. ¿Y si creáramos una tipografía con iconos? Las ventajas estarían claras: podríamos emplear los iconos, de forma vectorial, y usarlos de la misma forma que se emplean en CSS los diferentes tamaños por resolución en clases para medias de responsive design.
¿Cómo crear una tipografía con iconos vectoriales para nuestra Web?
Puedes hacerlo de forma manual, pero en el siguiente Web podrás hacerlo fácilmente y de forma gratuita:
El Web te permitirá importar los iconos vectoriales a tu nueva tipografía, crear la tipografía y emplearla en tu Web.