Ir directamente al contenido de esta página

Probando Typekit

Desde que existe Internet, los desarrolladores web en general —y los diseñadores en particular— hemos sollozado por la falta de control sobre las fuentes de nuestras páginas. Y cuando el obstáculo tecnológico había sido superado, ha aparecido el obstáculo legal. Typekit pretende ser una solución.

Como es sabido, por medio de CSS se puede aplicar una fuente a cualquier elemento de una página. Pero la lista de font-family no deja de ser una mera sugerencia: la fuente final con la que el agente de usuario representará el elemento dependerá de las fuentes que el usuario tenga instaladas.

Actualmente la tecnología para aplicar fuentes a un documento web está presente —de una forma u otra— en las últimas versiones de los navegadores más importantes. Pero para poner en perspectiva los obstáculos que aún tenemos para emplear las fuentes que deseamos, vamos a hacer un brevísimo repaso histórico.

En perspectiva: EOT, @font-face, web fonts

Para superar el obstáculo mencionado, en 1997 Microsoft desarrolló para la versión 4 de Internet Explorer una tecnología que permitía incrustar fuentes en un documento web. Básicamente, se trataba de crear versiones compactas de fuentes OpenType —un formato de fuente creado por Microsoft y Monotype, aunque actualmente también Adobe contribuye a su desarrollo— denominadas EOT.

Al año siguiente, el W3C incluiría en la Recomendación de CSS2 la definición de @font-face —actualmente @font-face se define en el módulo de fuentes de CSS3—. @font-face es una regla que permite definir —entre otras muchas cosas— la fuente a emplear en un documento, y la URL que apunta al archivo de la misma que los agentes de usuario pueden descargar, de la misma forma que descargan las imágenes que deben incluir en una página. A estas fuentes «vinculables» es a las que se ha dado el nombre de web fonts.

En el párrafo anterior hemos enfatizado la palabra «descargar», puesto que es el punto que genera la controversia hoy. La tecnología de EOT incrusta la fuente en el documento, de manera que la fuente sólo puede emplearse en ese documento concreto. Sin embargo, el mecanismo definido por el W3C simplemente vincula el archivo de la fuente de la misma forma que vincula cualquier otro contenido reemplazado. Una vez que el archivo de la fuente ha sido descargado, el usuario podría emplearlo a su antojo, como ocurre con las imágenes. ¿Cuál es el problema? Que para los dueños de los derechos de las fuentes, eso es una distribución de las mismas que va en contra de lo estipulado en las licencias de compra.

Así, el enfrentamiento está servido:

Grosso modo, ésta es la situación, aunque para más información recomendamos las siguientes lecturas:

Y así, entra en escena Typekit.

Typekit

El servicio —http://typekit.com/— aún está en beta, pero en su blog se puede leer en qué consiste:

We’ve been working with foundries to develop a consistent web-only font linking license. We’ve built a technology platform that lets us to host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM.

Jeffrey Veen, Introducing Typekit

Aplicando el concepto de FaaSFonts as a Service, ‘fuentes como un servicio’— de John Allsopp, Typekit ofrece la posibilidad de vincular fuentes comerciales en páginas web por un precio que incluye la licencia para hacerlo. ¿Cómo? El proceso es el siguiente:

  1. Crear una cuenta en Typekit: En estos momentos basta con rellenar el formulario de la página para recibir una invitación, que incluye una cuenta con la que probar gratuitamente el servicio durante un mes.
  2. Crear un kit: A cada kit se le asigna un nombre identificativo y una lista de dominios. El JavaScript que reemplaza la fuente comprueba que el documento se encuentra en el dominio especificado, de manera que se respete la licencia adquirida.

    Interfaz de la administración del kit
  3. Seleccionar las fuentes: De la lista de fuentes disponibles se pueden añadir las que se quieran emplear al kit. Como la nuestra es una cuenta de prueba, sólo podemos añadir dos fuentes de la librería de pruebas, que en este momento ofrece un total de 68.

    Las fuentes se añaden al kit con el botón + ADD

    Elegimos Armlite Rifle y Carbon Type, ambas de Vic Fieger.

  4. Añadir selectores: Por defecto, para cada fuente existe una clase con el prefijo tk- y el nombre de la fuente que permite asignarla a cualquier elemento en nuestra CSS, pero se puede añadir más selectores por medio del formulario de la esquina superior derecha de la interfaz del kit. A ésta se accede a través del vínculo Launch Kit Editor.

    Esquina superior de la interfaz: los selectores se añaden en el campo del formulario

    Añadimos h1 para Armlite Rifle y p para Carbon Type.

  5. Agregar la llamada al script en al página: Por medio del vínculo Embed Code obtenemos el script que tenemos que incluir en el head de nuestra página.

    El script generado

Voilà!, el resultado es éste. Nota: La cuenta de prueba solamente tiene una duración de un mes, por lo que es posible que para cuando el lector visite el ejemplo no se produzca la sustitución de la fuente; ésta es una captura en Firefox 3.5 del resultado que obtuvimos.

Comparativamente, el resultado en varios navegadores es el siguiente:

Comparativa: de izquierda a derecha, Explorer 6, Explorer 8, Firefox 3.5 y Safari 3.1

Nada mal, ciertamente, aunque Typekit no sea la panacea…

Limitaciones

En nuestra prueba nos hemos encontrado con algunas limitaciones:

Comparativa: TypeKit y otras soluciones

Por supuesto, hay otras soluciones harto conocidas: sIFR y Cufón. Me parece interesante compararlas.

sIFR es una solución con cinco años de antigüedad y para la que es difícil encontrar un desarrollador que no la conozca. Básicamente, se trata de un script que sustituye un texto por un objeto Flash que incluye incrustada la fuente elegida.

Cufón es algo más reciente, y se basa en convertir la fuente en vectores de SVG —y en sus equivalentes en VML— y de nuevo sustituir el texto vía JavaScript: en el caso de Explorer por los trazos de VML, y por un canvas en los navegadores que soporten este elemento de HTML5.

A continuación, recojo algunas opiniones acerca de los aspectos que más me preocupan de la aplicación de cualquiera de las tres opciones:

En resumen, en una tabla sintética quedaría así:

Comparativa: sIFR/Cufón/Typekit.
sIFR Cufón Typekit
¿Depende de JavaScript?
¿Depende de un plug-in? No No
¿Es aceptable para grandes cantidades de texto? No
¿Es accesible a los lectores de pantalla? No
¿Aplicable a navegadores antiguos (IE6/7 o FF2)? Casi Casi
¿Concede la licencia para incrustar/vincular la fuente? No No
¿Supone un coste adicional? No No

Conclusiones

En cuanto al servicio, aunque se trate de una beta, tenemos que decir que la impresión es muy positiva: la interfaz es clara y su empleo muy sencillo, y el coste nos parece razonable. Nos queda la duda sobre qué cantidad de fuentes incluirán el juego de caracteres que necesitamos para el español, pero para poder juzgarlo adecuadamente deberíamos comprobar de manera exhaustiva la lista de fuentes de la librería de pruebas por medio del Type Tester, por lo menos para hacernos una idea aproximada.

En cuanto a su utilidad, nos resulta un poco más difícil juzgarla, puesto que dependerá de los requisitos del proyecto, las exigencias del cliente y su presupuesto. Lo que sí podemos indicar son cuáles serían los puntos a valorar:

Y de momento, esto es todo.

Esta entrada se publicó el 14 de octubre de 2009, se archivó en , y fue etiquetada como , . Autor: Saúl González Fernández. Hay 2 comentarios ›.

Comentarios

  1. David León dice:

    Bueno, el problema de las licencias no existe con las fuentes gratuitas…

¿Algún comentario?

* Los campos con un asterisco son necesarios

Últimos proyectos

© Digital Icon, S.L., 2007 – 2017