Tipografías web: uso de font-face y Typekit

Por Ernesto Jiménez · 8 noviembre, 2011
Publicado en Tipografía
Etiquetas: , ,

El campo de la tipografía es el que más me ha interesado desde que empecé a estudiar diseño. Mucho antes de diseñar mi primer sitio web hace once años (una labor titánica para acabar con un puñado de archivos html sobre The Smashing Pumpkins) ya me pasaba las horas mirando tipos y viendo cómo funcionaban unos con otros.

Cuando apareció en pantalla la Times New Roman fue una gran decepciónPara aquella página web utilicé unas tipografías barrocas que usaba el grupo en su disco Mellon Collie and the Infinite Sadness. Para mí entonces quedaban genial. Cuando en la sala de ordenadores de la facultad quise enseñarle mi creación a mis compañeros comprobé extrañado que mis tipos se habían convertido en la común Times New Roman. Menudo chasco. Aprendí rápidamente que sólo podía definir tipos que todo el mundo tuviera instaladas si quería preservar cierta coherencia. Desde luego esta limitación me sirvió mucho para aprender a combinar unas pocas tipografías y aprovechar al máximo los escasos recursos disponibles.

Esto ha sido así durante muchos años pero ahora el escenario ha cambiado. Han aparecido tecnologías y servicios que amplían el rango de tipografías que podemos utilizar como Cufón que mediante javascript muestran las tipografías que subamos.

Font-face trae una libertad inédita al diseño webMucho mejor es el desarrollo de la directiva @font-face de css que nos permite incrustar las familias que queramos subiendo los archivos a nuestro servidor. Esto nos da una libertad que hasta hace poco sólo podíamos soñar (no voy a mencionar siquiera el uso de flash). Así podemos definir por ejemplo:
[css] @font-face{ font-family: ‘Mrs Eaves’; src: url(‘../fonts/mrs-eaves.otf’) format(‘opentype’); } [/css] Después podríamos utilizarla declarándola:
[css] .texto-articulo{ font-family: ‘Mrs Eaves’; } [/css] Antes de que nos pongamos todos como locos a subir tipos a nuestros servidores hay algunas cuestiones que debemos tener en cuenta:

1. Licencias de uso

Que tengamos una tipografía en nuestro ordenador no significa que tengamos la licencia para usarla en internet. Muchas fundiciones incluso disponen de diferentes licencias en función del número de páginas vistas en las que aparece la tipo. Es importante que sepamos qué se nos permite hacer con las familias que pretendemos usar.

2. Conversión de fuentes

No basta con subir un archivo OpenType o TrueType, casi todos los navegadores soportan ambos formatos, pero nuestro amigo Internet Explorer necesita el formato EOT. Además por motivos legales no podemos dejar los archivos accesibles a cualquiera así que deberemos convertir nuestro archivo a WOFF y SVG, formatos creados en parte para solucionar este asunto. Font Squirrel nos ofrece un generador muy útil para esto: font-face generator.

3. Del punto anterior se desprende éste: cada navegador interpreta el texto de una determinada forma. Es imprescindible que sepamos cómo se va a ver nuestro texto en diferentes navegadores y sistemas.

Typekit me parece una herramienta muy potente y fácil de usarPara mí hay una solución ganadora que nos simplifica mucho la parte técnica y nos permite hacer lo que más nos gusta, diseñar. Se trata de Typekit, un servicio online (comprado hace poquísimo por Adobe) de excelente calidad que nos ofrece un amplio catálogo tipográfico para usar en nuestras páginas. Simplemente creamos un proyecto y vamos añadiendo las familias que queramos usar. Pegamos en nuestro sitio web un trozo de código que nos facilita el sistema y ya podemos indicar en el css las familias que queremos usar.

Detalle de Typekit

Detalle de Typekit

Por ejemplo, el texto de mis artículos está en Chaparral Pro de Adobe. El valor de font-family que tengo que escribir es: chaparral-pro. De esta manera si quiero que los títulos h2 se muestren en esta familia tendré que escribir en mi css:
[css]h2{ font-family: chaparral-pro; }[/css] Sencillo, ¿verdad?

Para navegadores antiguos podemos además definir otras familias de la forma habitual, por ejemplo:
[css] h2{ font-family: chaparral-pro, Georgia, serif; }[/css] Aunque disponemos de un plan personal gratuito, por unos pocos euros al año podemos acceder a familias comerciales bien construidas y usarlas con la tranquilidad de estar haciéndolo correctamente, sin complicarnos la vida con asuntos legales de licencias de uso.

Otro día hablaré de parejas tipográficas disponibles en Typekit que me parecen que funcionan muy bien y publicaré un vídeo enseñando paso a paso el proceso de uso.

Tenemos muchos motivos para sentirnos entusiasmados con los avances que se están produciendo en el uso de tipografías en la red y que acercan un poco el diseño web al diseño editorial en este aspecto. Ahora también podemos disfrutar jugando con tipos cuando estemos creando páginas web.

De interés

Cómo usar font-face, en inglés. Nice Web Type, 2009.
Tipografía web en su contexto, en inglés. Tim Brown, A list apart, 2009.

Recursos

Typekit
Font Squirrel
Cufón

¿Te ha gustado el post? Puedes seguirme en Twitter o en Facebook donde seguimos hablando de diseño web