Ahorra peso a una web usando pictografías en lugar de imágenes

En el diseño es algo habitual 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.

Puesto en marcha

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. En este paso no me voy a parar mucho, ya que hace tiempo en Genbeta Dev comentamos de forma extensa cómo usar @font-face.

Una vez añadidas estas tipografías, simplemente copiando la letra o código del icono y añadiéndolo en nuestro HTML se mostrarán los iconos. Como cada tipografía es diferente y usa símbolos distintos para añadir los iconos, veremos varios ejemplos de varias pictografías conocidas.

Raphaël

La pictografía Raphaël es una pequeña tipografía con iconos variados de distinto tipo, incluye iconos sociales, navegadores y los típicos que suelen usarse en muchas apps, por lo que puede ayustarse fácilmente a cualquier diseño.

Su uso es el más simple que podemos encontrar, ya que desde su web nos proporcionan los símbolos de cada icono. El CSS necesario para añadir esta tipografía es el mismo que usaremos para las demás, primero importamos la fuente tipográfica y posteriormente establecemos el font-family de un elemento.

@font-face {
    font-family:iconos-raphael;
    src:url('fonts/iconos-raphael.ttf');
}
span.icono {
    font-family:iconos-raphael;
}

Con esté código en nuestro CSS cualquier elemento con la clase icono se usaría el icono de la pictografía.

    $
    Temperatura elevada

En este caso el símbolo del dólar corresponde al icono de la temperatura. El resultado podría ser el siguiente:

Más información | Raphaël

Entypo

Por otro lado tenemos Entypo Que es una tipografía un poco más amplia y se centra en iconos para aplicaciones de distintos tipos, además de tener otra pictografía con iconos sociales, lo que lo hace una buena opción a la hora de crear una app.

A diferencia de la anterior pictografía, Entypo relaciona los iconos con códigos numéricos que tenemos que copiar de su propia página, como sería: ➦ o . Pero en resumidas cuentas, el proceso es igual.

Flaticon

Recientemente en Genbeta Dev anunciamos de Flaticon, que es un enorme catálogo de iconos de todo tipo, de los cuales podemos descargar los que realmente queramos, sin la necesidad de descargar todo un pack y nos incorpora un archivo CSS que debemos de usar para utilizar más cómodamente la tipografía y un pequeño manual junto a la descarga del la tipografía.

Por lo que se convierte, sin duda, en la opción más versátil de las tres.

Más información | Flaticon

Icomoon

Y por último tenemos Icomoon, que es muy similar a Flaticon, aunque es más reducido. El funcionamiento es además similar, pudiendo descargar los iconos que queramos sin necesidad de descargar todos.

Pero tiene una peculiaridad, y es que nos permite subir vectores en SVG y podemos así crear nuestra propia pictografía online sin necesidad de grandes conocimientos en la creación de fuentes tipográficas.

Más información | Icomoon

En Genbeta Dev | Introducción a las propiedades de las fuentes en CSS3