Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Usando pictografías en lugar de imágenes

Usando pictografías en lugar de imágenes 24.JAN.14

Gianfranco Lemmo
Fundador WebBizarro

En el diseño es algo normal usar imágenes, pero es cierto que muchas veces su uso puede ralentizar la carga de una web o app y finalmente engordar la cantidad de datos transmitidos. 

Para solucionar este problema podemos optar por el uso de sprites cuando queremos añadir iconos similares o pequeños detalles en una web, pero desde hace tiempo disponemos de las pictografías, que son fuentes tipográficas que contienen iconos y podemos usar de forma simple como si de letras normales se tratasen (pero muestran diferentes iconos).

La principal ventaja de las pictografías es que son vectores y nos permiten añadir iconos redimensionables que no perderán la resolución en ningún momento, además de poder cambiar el color y añadirle efectos, al igual que hacemos con la letra de una web.

Las pictografías, en la práctica, son tipografías normales y corrientes, normalmente en formato .woff, .ttf o .eot como los más importantes.

El primer paso es conseguir estos archivos cargados de iconos y añadirlos a nuestra web como si de otra fuente se tratase mediante @font-face, que nos permite incrustar la web. 

Una vez añadidas estas tipografías, simplemente copiando la letra o código del icono y añadiéndolo en nuestro HTML listo se mostrarán los iconos sin ningún tipo de problema.

Para no hacer este artículo mas extenso en los próximos días les mostraré 4 herramientas para el uso de pictografías.

--> Pueden hacer clic ver Usando pictografías en lugar de Imágenes Parte II