03/07/2013

Icon fonts: tipografías para implementar íconos escalables

Icon fonts: tipografías para implementar íconos escalables

Existen diversas formas de mostrar imágenes en una página web. La manera convencional es insertar un archivo de imagen, o bien utilizarlo como fondo. Si se quiere acelerar el tiempo de carga, la técnica CSS Sprites es una variante interesante sobre este último método. Pero también hay un enfoque muy diferente, ideal para los pequeños íconos que suelen acompañar el texto, cuyo uso se volvió habitual en los últimos tiempos.

Las icon fonts son tipografías que contienen íconos visuales en lugar de letras. Por ejemplo, si quisiéramos incluir íconos de redes sociales al pie de cada post, podríamos hacerlo con caracteres en lugar de insertar pequeños archivos de imagen. Existen varias formas de mostrar icon fonts:

  • Como un carácter de texto de un archivo de fuente, al que debemos invocar a través de la propiedad @font-face de CSS.
  • Especificando el carácter desde una subclase en CSS, utilizando el pseudoelemento :before para ubicarlo a la izquierda del texto.
  • Utilizando el atributo data-icon de HTML5, con el carácter elegido como valor.

Se considera que una página con íconos como fuentes tarda hasta un 14% menos en cargar que una página que utiliza archivos de imagen. Pero hay otras ventajas:

  • Son mucho más fáciles de editar que las imágenes. Si queremos cambiar el color o el tamaño de un ícono, o agregar efectos de sombreado o animación, no debemos utilizar programas de edición gráfica, sino realizar mínimas modificaciones de código. Naturalmente, aceptan todas las propiedades de texto de CSS.
  • Como se trata de gráficos vectoriales y no de mapas de bits, no se «pixelan» al agrandarse. Por eso, se ven bien en pantallas con tecnología Retina Display.
  • Son más sencillos de insertar que los CSS Sprites.
  • Ofrecen un aspecto limpio, con contornos bien delineados.

Claro que también tienen algunos inconvenientes:

  • Su creación puede ser muy trabajosa.
  • Son monocromáticas. Agregar efectos como gradientes es más complicado que con un editor gráfico.

A pesar de sus defectos, las icon fonts son una de las mejores herramientas para agilizar la carga de una página web.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce