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.