Introducción a la Tipografía Web y @font­face

Con la llegada del amplio soporte de los navegadores para CSS3 @font­face, la tipografía en la web ha tomado un gran paso hacia adelante: finalmente es posible usar fuentes reales en tus páginas web sin recurrir a soluciones que se basan en imágenes (IFR), Adobe Flash (sIFR) u otras técnicas que no basadas en texto. Pero esta nueva era de tipografía en la web viene con nuevos retos legales, técnicos, y de diseño. Este artículo revisa cómo hemos llegamos hasta aquí y describe cómo utilizar las fuentes web en una forma que supera los nuevos retos involucrados, dando la libertad de aplicar con éxito los viejos principios de la tipografía en el diseño web y desarrollo de proyectos.

Principios de la tipografía web

El arte de la tipografía ha sido perfeccionado durante cientos de años en el medio de impresión para abarcar los principios fundamentales como el uso de contraste, repetición, alineación, y proximidad para comunicar su significado con claridad y estilo, así como mantener la legibilidad en la presencia de marca. Estos principios son importantes en la web como en cualquier otra parte, después de todo el diseño web es 95% tipografía. Uno podría incluso argumentar que la tipografía toma más importancia en un medio interactivo como la web, dónde; debido a que puede darse clic en el texto y puede tener un comportamiento, esto es más que solo contenido, es la interfaz de usuario (UI).

En todo esto, tener la habilidad de poder elegir el tipo de letra es la clave. Y en el mundo actual de sitios web dinámicos continuamente actualizados que son accesados por una diversa gama de motores de búsqueda, dispositivos, y tecnologías de apoyo siendo capaz de elegir el tipo de letra correcto de una manera que sea accesible, fácil de mantener y basado en estándares, es una necesidad. Durante mayor parte de la historia de la web, ese santo grial ha estado fuera de alcance.

A pesar del hecho de que la rica historia del arte de la tipografía ha dado lugar a la producción de miles y miles de tipos de letra, cuando la web nació, los diseñadores que trabajaron en ese nuevo medio, literalmente no tuvieron opción de elegir que tipo de letra usar. En 1993 por ejemplo, el primer navegador web gráfico: Mosaic solo incluía una sola fuente por defecto.

Fuentes seguras para Web

Esta situación mejoró ligeramente en los anteriores quince años como el conjunto de lo que se llama fuentes seguras para la web, que crecieron hasta llegar a ser 18 en 2008 (ver imagen). Las fuentes seguras para web son el subconjunto de fuentes del sistema que vienen preinstaladas en la mayoría de los sistemas operativos de las computadoras personales. Debido a que los diseñadores y desarrolladores web sabían que los visitantes de sus sitios tendrían por lo menos estas dieciocho fuentes disponibles, podían utilizarlas con seguridad en sus páginas web al referenciarlas por medio de la propiedad font­family en su CSS. Sin embargo considerando las miles de fuentes disponibles en el mundo del diseño impreso, poder utilizar dieciocho fuentes seguía siendo una situación bastante abismal. El potencial de expresión diferenciada, para la marca de encontrar el tipo de letra correcto para el trabajo, era un poco frustrante.

Soluciones: Texto como imagen, script u objeto

Recorriendo las limitaciones, algunos diseñadores han llegado a depender de varios hacks y soluciones para impulsar la tipografía web. Tal vez la más común de estas es usar una imagen para procesar el texto deseado en las fuentes web no seguras (IFR – Image Font Replacement). Esto hace que sea posible usar cualquier fuente en una página web pero lo hace con un coste significativo; como el texto es capturado dentro de una imagen, no se puede seleccionar, buscar, traducir, o acceder a él con dispositivos de ayuda, a diferencia del texto HTML normal. Técnicas tales como el reemplazo de imagen con CSS pueden hacerse cargo de algunos de estos problemas usando CSS para posicionar las imágenes sobre el texto subyacente que está realmente en el código fuente de la página HTML y que por lo tanto es accesible, pero permanecen los problemas de selección y traducción.

Por otra parte, para elementos de texto que cambian frecuentemente, por ejemplo las cabeceras de un sitio de noticias esta técnica incrementa el costo de mantenimiento por la necesidad de crear una nueva imagen cada vez que se cambie el texto, a menos que los desarrolladores del sitio configuren un mecanismo de lado del servidor para generar estas imágenes sobre la marcha. En pocas palabras: usando imágenes para procesar el texto hace posible una tipografía web más rica, sí; pero en una manera torpe que por lo general parece más complicado de lo que vale. Un esfuerzo valiente pero en última instancia no es la mejor manera de avanzar.

Otra solución, como Cufón basado en JavaScript y typeface.js, automatiza el procesamiento de texto en canvas o?elementos VML. Mientras que esto minimiza el tipo de mantenimiento y costos de configuración que pueden venir con el uso de imágenes para procesar el texto, esto aún resulta en texto procesado que no se siente nativo de la web: el texto no se puede seleccionar o cambiar de tamaño. Además, usando esta técnica para procesar grandes cantidades de texto se puede tener implicaciones negativas de rendimiento.

Otra forma de procesar texto con fuentes de estilo, como algo más que texto HTML usa Flash en lugar de canvas o elementos VML (sIFR – Scalable Image Font Replacement). En este enfoque, un diseñador incrusta una fuente en un objeto Flash y lo aplica al texto dentro del objeto, el cual se procesa entonces a través del motor de procesamiento de texto construído en la plataforma Flash. Sin duda esto puede llevar a una tipografía hermosa y efectiva, pero también puede conducir a problemas inherentes en el uso de imágenes u otros elementos sin texto en el procesamiento de texto. Aún más importante es el hecho de que la cada vez más popular plataforma iOS de Apple no soporta Flash. Eso significa que los usuarios de dispositivos iOS como el iPad y el iPhone no se beneficiarán de la agradable tipografía hecha posible por este enfoque, o peor aún no verán el texto.

Más allá de las fuentes seguras para web: @font­face

La forma correcta en como se basa el estándar de tecnologías web constructoras de bloques de HTML y CSS están diseñadas para trabajar juntas al presentar contenido en un estilo definido por el autor es bastante simple, realmente: es usar una característica de CSS llamada @font­face para definir una familia de fuentes al vincular un archivo de fuente (en lugar de referenciar a una fuente preinstalada en el sistema) y entonces aplicar el tipo de letra a los elementos de la página web referenciando esta fuente a través de la propiedad CSS font­family, al igual que le aplicarías una fuente del sistema segura para la web. Este mecanismo básico de CSS funciona como a continuación se explica. Primero, se usa una declaración de @font­face para definir la familia de fuentes dándole un nombre a esta familia, usando el descriptor de font­family y luego se apunta a un archivo que contiene al tipo de letra usando el descriptor src:

Aquí, una familia de fuentes nombrada Awesome Font es definida por el vínculo a un archivo fuente con el nombre de awesome­font.ttf. Luego en el CSS, simplemente se aplica la fuente a un elemento HTML usando la propiedad font­family, al igual que lo harías con una fuente de sistema segura para la web:

Aquí, la familia Awesome Font (definida anteriormente con la declaración de @font­face) es aplicada a un nivel de encabezados.

El texto procesado de esta forma es solo texto HTML normal estilizado con una font­family definida por el autor en lugar de una font­family predeterminada del sistema. Esto significa que este enfoque evita los problemas basados en soluciones sin texto: el texto se puede buscar, seleccionar, cambiar de tamaño, es accesible y fácil de mantener. En su núcleo, eso es todo lo que hay realmente para CSS @font­face. Este mecanismo básico fue definido por el cuerpo de los estándares web, la World Wide Web Consortium, a finales de 1990. Desafortunadamente, debido a las implementaciones inconsistentes como resultado de la guerra de los navegadores de esa era y a otros factores, nunca despegó ­hasta recientemente. Desde el 2009 la mayoría de los navegadores soportan @font­face, y poco después el navegador móvil Safari también lo hizo en el iPhone y el iPad. La forma correcta de ir más allá de las fuentes web?seguras estaba finalmente a la mano.

Pero la calidad de @font­face basada en estándares plantea un nuevo problema. Quienes venden fuentes para vivir estaban preocupados de que una vez que se enlazara el archivo fuente en una página web ­y así exponer un vínculo para ello­ no hubiera nada que salvara ese archivo de ser robado. En el momento, esta preocupación mantuvo a más fundiciones comerciales permitiendo que sus fuentes sean usadas como fuentes web. Ahí es donde intervinieron los primeros servicios de hospedaje de fuentes web incluyendo Typekit, el servicio que yo co­funde­ con soluciones que permiten a los diseñadores usar fuentes como fuentes web seguras mientras mantienen esas fuentes protegidas de uso no autorizado.

Así es como funciona en el caso de Typekit: Como diseñador, puedes comprar una suscripción a la librería de fuentes de Typekit, eliges qué fuentes quieres usar, y especificas en qué sitio quieres usar esas fuentes. Entonces Typekit te proporciona un fragmento de código JavaScript para que lo coloques en el elemento head de tus páginas HTML. Cuando los usuarios visiten tu sitio, JavaScript solicitara las fuentes desde el sistema de Typekit, sí la solicitud proviene del sitio que registraste con Typekit, las fuentes son inyectadas dinámicamente en la página usando el estándar @font­face de CSS; y si no es así, se retienen las fuentes. Le pagas a Typekit para usar las fuentes, y entonces Typekit comparte las ganancias con los dueños de las fuentes.

Por supuesto, muchos desarrolladores web saben que este método de protección, llamado revisión de referencia, puede ser fácilmente eludido al falsificar una referencia, usando herramientas de línea de comandos simples y ampliamente disponibles. Es el por qué Typekit también protege las fuentes modificando los archivos fuente de forma que no cambie el cómo se procesan, pero si las hace no instalables en un sistema operativo. De esta forma, incluso si se consigue pasar la comprobación de la revisión de referencias o si se incrusta la fuente en el cache del navegador, seguirán sin ser instalables y utilizables en aplicaciones como Photoshop. La capa extra de defensa, aunque todavía rompible por alguien con el software correcto de edición de fuentes y con experiencia, es suficiente para disuadir el mal uso ocasional de las fuentes, y ha hecho muchas fundiciones de fuentes cómodas para permitir que sus fuentes sean fuentes web a través de Typekit.

Por supuesto que Typekit no es el único servicio comercial de alojamiento de fuentes web. El espacio ahora incluye muchas opciones, como Kernest, Fontdeck, Fonts.com Web Fonts, WebINK, FontsLive, WebType y más. Mientras que la diferencia en características, selección y precio, de cada uno de estos servicios comparten la misma función básica: ellos alojan archivos de fuentes comerciales con licencia para su uso web y brindan acceso a los diseñadores web mediante CSS @font­face.

Ciertas fundidoras y servicios de fuentes web, incluyendo FontFont, Process Type Foundry, Fontspring, y Monotype Fonts.com Web Fonts, en algunos casos también brindan fuentes web que puedas descargar y alojar por tu cuenta sin depender de un servicio de terceros. A menudo es permitido en conjunto con el uso de un nuevo estándar emergente de formato de fuentes web llamado WOFF, el cual es esencialmente un contenedor alrededor del archivo de la fuente que impide que pueda ser instalada en un sistema operativo pero la mantiene utilizable como una fuente web en los exploradores que soportan este formato. No todas las versiones ampliamente utilizadas de la mayor parte de los navegadores soportan WOFF.

Desafíos al trabajar con fuentes seguras

Con un servicio comercial de alojamiento de fuentes web, WOFF -sin mencionar recursos libres de fuentes web como son Font Squirrel y Google Web Fonts el problema de licenciamiento de fuentes web ha sido resuelto. El mejor camino hacia la tipografía rica en la web ha sido despejado.

Pero, por desgracia, todavía no es el final de la historia.

Formatos de fuentes web y soporte de navegadores

Resulta que las fuentes web vienen en un número de diferentes formatos y es no sorprende que los diferentes navegadores web soporten diferentes subconjuntos de formatos.

Esto presenta un desafío técnico. Para soportar los principales navegadores, una declaración CSS @font-face en realidad no es tan simple como se vio anteriormente:

En su lugar, tiene que lucir como esto:

Esto es lo que se conoce como la sintaxis Fontspring de @font-face, la cual es la última versión de lo que comenzó como la sintaxis bulletproof de @font-face. Usando combinaciones del descriptor de formato @font-face y varios hacks, esta sintaxis fue desarrollada para “engañar” a los navegadores en el uso del mejor formato de fuentes web que soportan. Desafortunadamente, la sintaxis original resultó ser inferior que la bulletproof. Varias veces, ha tenido que ser actualizada para resolver algunos problemas como limitaciones al soporte de móviles y soporte para las últimas versiones de los navegadores, como IE 9.

Lo que es importante aquí, sin embargo, no es necesariamente avanzar a través de los detalles de cada iteración de esta sintaxis, sino sólo para darse cuenta de que la sintaxis CSS requerida para usar las fuentes web cambia como la evolución de la orientación del navegador y el cómo la comunidad de fuentes web aprende más acerca del soporte de los navegadores y la tecnología de las fuentes. Esto significa que es importante continuar para probar tu fuente web. También es una buena razón para considerar el uso de un servicio de alojamiento de fuentes web, donde la lógica de escoger cual formato de fuente utilizar para que navegador puede ser retirada de tus manos -e idealmente, ser actualizado continuamente por el servicio de fuentes web. En lugar de mantenerlo personalmente, puedes abstraer esa complejidad detrás de algo tan simple como esto:

Ese es un ejemplo de código JavaScript usado para habilitar Typekit en un sitio web. Otros servicios de alojamiento de fuentes web ofrecen mecanismos sencillos, algunos con ayuda de JavaScript para entregar fuentes @font-face y así obtener el control sobre el comportamiento de carga, otros solamente dependen de CSS.

Cualquiera que sea la ruta que elijas -el alojamiento de tus propios archivos de fuentes web y mantener la sintaxis de @font-face requerida para su uso u outsourcing que trabaje para un servicio de alojamiento de fuentes web- la buena noticia es que es posible navegar por la complejidad de los formatos de fuentes web y soporte del navegador y con ello finalmente abrir una gran puerta hacia la gran selección de tipografías, que siempre esta creciendo.

El flash de texto sin estilo

Otro reto en el uso de fuentes web se trata de un fenómeno llamado “Flash de texto sin estilo” o FOUT (Flash Out Unstyled Text).

Una fuente web es un recurso remoto, como una imagen o un video, y eso significa que se debe descargar. Por lo tanto, ¿Que debe ocurrirle al texto con fuente de estilo web mientras se descarga?
IE9 y algunas versiones de navegadores basados en Mozilla como Firefox, mostrarán el texto en una fuente fallback mientras se espera que la fuente web se descargue, como se muestra en la imagen 4.En este ejemplo, la primera línea del texto tiene una fuente web en la declaración de su font-family, seguida de una fuente web fallback segura. La segunda línea de texto solo tiene una fuente web fallback segura. Mientras se espera la descarga de la fuente web, Firefox procesa ambas líneas en la fuente fallback.

Una vez descargada la fuente web, Firefox cambia la primera línea para procesarla en la fuente web.

Esto puede ser una experiencia desagradable, causando parpadeos y cambios de layout, particularmente cuando las métricas de la fuente web (cosas como el tamaño óptimo vertical/horizontal, etc) son diferentes de las de la fuente fallback. Esto es el “Flash de texto sin estilo”.

Por el contrario, los navegadores basados en WebKit como Chrome o Safari, ocultaran el texto estilizado con la fuente web mientras esperan la descarga de la fuente web, dejando el espacio para esta en el layout, como muestra la imagen 6. Es lo mismo que las dos líneas de ejemplo anteriores, pero como puedes ver la primera línea no es visible.

Cuando la fuente web ha sido descargada, Safari hace visible el texto, cuando ya ha sido procesado por la fuente web.

Esta experiencia es más suave y tiende a ser preferida por muchos usuarios y diseñadores.

Afortunadamente, no tienes que esperar y aceptar esta falta de coherencia entre los navegadores. Puedes ganar control sobre estas diferencias entre navegadores usando WebFont Loader, una librería de JavaScript desarrollada por Typekit en colaboración con Google. Liberado como un proyecto open source, compatible con varios servicios de almacenamiento de fuentes web e incluso con las fuentes web alojadas por tu cuenta.

Nota: Si usas Typekit, puedes tomar ventaja de WebFont Loader sin cargar un archivo adicional de JavaScript, ya que se construye en el código JavaScript de Typekit que se coloca en tus páginas para habilitar las fuentes Typekit.

WebFont Loader carga las fuentes a través de JavaScript, para poder saber cuándo una fuente ha comenzado a descargarse, cuando ha terminado la descarga y si no va a cargar todas (porque está siendo solicitada con un antiguo navegador, que no soporta fuentes web, por ejemplo).

Para cada uno de estos eventos (cada uno de estos estados) WebFont Loader agrega dinámicamente el nombre de una clase al elemento HTML de la página que contiene. Estas clases son wf-loading para cuando se descargan las fuentes, wf-active para cuando se han descargado las fuentes, y wf-inactive para cuando no se van a cargar las fuentes. Puedes usar estas clases en tu CSS para cambiar el estilo de los elementos de la página durante cada estado, como se muestra en este patrón:

¿Cómo ayuda esto con FOUT? Puedes usar la clase wf-loading para ocultar el texto cada vez que carga las fuentes, pero todavía deja espacio para el texto en el layout. Esto imitaría el comportamiento de Safari a través de todos los navegadores web. Aquí está el código requerido:

Traducido al lenguaje humano, este ejemplo dice “cuando un h1 está contenido dentro del alcance de wf-loading, hace su “visibilidad” oculta.” Haciendo esto, oculta el texto mientras se cargan las fuentes, dejando un espacio para este en el layout de la página. Entonces, una vez se han descargado las fuentes, este CSS ya no se aplica (debido a que WebFont Loader remueve la clase wf-loading), volviendo visible el texto.

Procesamiento de fuentes web

Otro reto en el uso de fuentes web es el problema de procesamiento. Si has utilizado fuentes web antes, probablemente te preguntes ¿Por qué la misma fuente se puede procesar tan diferentemente en distintos navegadores? o ¿Por qué dos fuentes diferentes procesadas con el mismo tamaño pueden tener diferentes niveles de legibilidad?

Un tipo de letra es una idea, -es una forma que puede ser escalada hacia arriba y hacia abajo en tamaño- y, como una idea, tiene una resolución infinita. Procesar esa idea en la pantalla de una computadora significa hacerlo en una cuadrícula a una resolución relativamente baja de pixeles. Esto puede causar problemas para algunos tipos de letra, particularmente aquellos diseñados originalmente para impresos, donde la resolución no es un factor limitante como lo es en la pantalla. Para una idea de cómo las cosas pueden ir mal, ve la “O” izquierda de la siguiente imagen, mira un ejemplo de esto en siguiente artículo sobre este tema por parte del diseñador Tim Ahrens. Aquí, el carácter “O” del lado derecho, pasa a caer a través de una sola columna de pixeles, debido a la forma general del carácter y su colocación en la cuadrícula. El lado izquierdo de la “O”, sin embargo, cae a través de dos columnas de píxeles. Eso hace que el procesamiento del carácter parezca desequilibrado, el cual, cuando se combina con artefactos similares en muchos otros caracteres de las fuentes, puede afectar la legibilidad del texto estilizado con esta fuente.

Afortunadamente, algunas fuentes que mostraron problemas como esta cuando se usa primero para texto web en vez de texto impreso, han sido mejoradas -optimizadas para un mejor procesamiento en una cuadrícula de píxeles- a través de una técnica llamada hinting. Agregado a una fuente por un diseñador de tipos, utilizando un software de edición de fuentes, hinting es un conjunto de instrucciones para motores de procesamiento de texto acerca de qué hacer cuando surgen problemas. En el lado derecho “O”, de la figura anterior, puedes ver indicios representados como enlaces a cada lado del símbolo. Estos especifican que ciertas partes correspondientes del símbolo deben ser siempre el mismo número de pixeles de ancho, independientemente de como el símbolo, podría, formarse naturalmente, dado que cae a través de la cuadrícula de píxeles. Esto puede mejorar dramáticamente la legibilidad del texto de esta fuente, particularmente en tamaños más pequeños y en navegadores que se ejecutan en versiones anteriores de Windows. (Si estás interesado en más de mecánicas de esto, Tim Ahrens “Un vistazo a TrueType hinting”, proporciona algunos detalles fascinantes.)

A donde ir desde aquí

El uso de fuentes web puede parecer desalentador, debido a las complejidades mencionadas anteriormente -pero pueden ser manejadas. Ahora sabes dónde obtener legalmente las fuentes web, como incluirlas en tus páginas web con una forma fácil de mantener, como ganar control sobre las diferencias de carga de las fuentes a través de los navegadores, y como entender el procesamiento de las fuentes web para elegir la fuente correcta para tus diseños, tienes lo que se necesita para participar en el renacimiento continuo de la tipografía web, sin dolores de cabeza. Así que salta, y haz un gran trabajo! Aquí hay algunos recursos útiles para agregar a tu caja de herramientas a medida que avances.

Donde obtener fuentes:

• Fonts.com Web Fonts
• Font Squirrel
• Fontspring
• Google Web Fonts
• Kernest
• Typekit
• WebType

Trabajando con fuentes web:

• Bulletproof sintaxis de @font-face
• Lettering.js
• WebFont Loader

Este artículo esta publicado bajo licencia Creative Commons así como su versión original en Adobe Devnet, fue traducido y adaptado en nuestro blog por Margarita García @gr_maggi.