25 de mayo de 2010

Páginas web ricas en tipografía

Hasta ahora uno de los hándicaps más habituales que los diseñadores gráficos se encontraban a la hora de publicar contenidos en la web era el entorno pobre en fuentes tipográficas que era la web. Era común plantear un grafismo usando, por ejemplo, Photoshop® afinando al máximo el look & feel para que posteriormente el experto en maquetación HTML nos devolviera a la cruda realidad espetándonos un árido "con esta fuente no puede ser, cámbialo todo a Arial..." o similares.


El motivo de esta barrera gráfica a la hora de presentar unos textos en la web con un aspecto adecuado estriba en que las páginas HTML en un inicio empleaban familias de fuentes tipográficas ubicadas en el ordenador del navegador del cliente, que podía ser cualquier cosa. Así, un párrafo en una página HTML venía marcado con un estilo que incluía dicha familia de fuentes, a saber:


font face="Arial, Helvetica, sans-serif" ...


Este fragmento de código HTML venía a decir que el texto a continuación se intentaba representar en fuente Arial. Si ésta no estaba disponible en el Sistema del cliente, el navegador pasaba a intentarlo con la Helvetica (más típica en Mac) y por último, empleaba el código especial "sans-serif" para utilizar la tipografía de palo seco por defecto de dicho Sistema.


Este método garantizaba una representación más o menos homogénea del texto en HTML, independientemente de la plataforma utilizada para representarlo. Pero aún así el abanico de tipografías disponible era muy escaso, y obligaba a menudo a optar por alguna de estas "soluciones":

  • Resignarse a emplear una familia tipográfica ajena al grafismo proyectado en un principio
  • Sustituir los textos por imágenes GIF, creadas con un programa de diseño gráfico, con tal de respetar el grafismo
  • Sustituir el texto HTML por texto en formato Flash (SWF)
En el segundo y tercer supuesto, el remedio podía ser peor que la enfermedad: por un lado había que asegurar de colocar un texto alternativo a las imágenes (por aquello de la accesibilidad y de la indexación del contenido correctas) y por otro lado hacía muy difícil la actualización de los contenidos.

Con la evolución del diseño web, y el nuevo paradigma de separación de los contenidos en HTML del grafismo en CSS, se abría una posible puerta a la revolución tipográfica en la web: incrustar la fuente peculiar en el código CSS a costa de subir los archivos de la fuente necesarios al servidor web.

Esta solución presentaba un problema adicional: no era posible dejar un archivo de una fuente tipográfica en un directorio del servidor web potencialmente accesible de manera pública, de tal modo que podríamos incurrir en estar distribuyendo libremente una fuente licenciada, cosa que lógicamente no se debe hacer.

pequeña muestra de algunas de las tipografías que ofrece Google Font Directory


Pues bien, parece ser que la era de la web tipográficamente pobre o repleta de parches de texto-imagen toca a su fin. Existen en la actualidad diversos servicios web que ofrecen utilizar hojas de estilos CSS vinculadas a sus servidores, donde también residen fuentes propietarias de libre uso. Google Labs por ejemplo ofrece el servicio de Google Font Directory.

Este servicio permite al diseñador web añadir vía HTML o Javascript una hoja de estilos situada en los servidores de Google, que a su vez alberga un catálogo tipográfico de libre uso. Un ejemplo de cloud computing aplicado al diseño. Si usamos ya sea el Google Font API junto con sus fuentes, o simplemente para cargar las fuentes de otro proveedor de fuentes web, será posible alcanzar diseños HTML más eficientes, donde no sea necesario sustituir texto por imágenes para alcanzar un grafismo atractivo en nuestras páginas web.


2 comentarios:

  1. Buena iniciativa de Google, ahora hace falta que los diseñadores apliquen en buen gusto y no conviertan esta fabulosa posibilidad en una fuente de páginas a lo "mensaje de secuestrador"

    ResponderEliminar
  2. El tema de las Webfonts es un asunto muy delicado precisamente por el hecho de "compartir" un archivo de tipografía, tal y como tu comentas. Por otra parte, he hablado con varios creativos y todos coinciden que el catálogo de fuentes "open source" que ofrece Google es bastante limitado y no se ajusta a la imagen corporativa deseada.
    Personalmente a mi me gustan mucho y la API está muy bien comentada. No esperaba menos de Google.

    ResponderEliminar

Consulteu aquí la versió en català d'aquest blog