Typekit y Cufón, reemplazo de textos dinámico

No negaré que me ha llegado más de un correo lo largo de todo este tiempo indicándome que se hacía un poco incómodo el uso de Flash en los titulares. Siempre respondía que era algo que sabía y que esperaba solucionar antes o después. Pues ale, manos a la obra.

Hasta la fecha yo venía usando sIFR [en] en el blog para dicha tarea y también para el portfolio (pero implementado con jQuery en este caso) Me parecía un punto importante mantener unos titulares y encabezados decentes aunque presentara ciertos problemas de uso como la escalabilidad del tamaño de letra (no era del todo correcto), la imposibilidad de hacer un efecto hover en condiciones (en las últimas versiones creo que ha mejorado) y, la más importante, que era una lata para copiar la url a la que se enlazaba o incluso a hacer clic sobre los titulares. Pero bueno, en este caso me tragué lo de «la forma sigue a la función» y dí preferencia a lo visual. Hasta ahora.

Hace no mucho os comentaba la aparición de Typekit como una nueva alternativa de cara a conseguir un buen aspecto tipográfico en web, independientemente de si tienes la fuente instalada o no. Hablando con el bueno de Jamal sobre la solución, me dí cuenta que me había llegado ya la invitación para poder problarlo. Y me puse con ello porque quizá sería la solución perfecta a mis problemas con los titulares. Además Typekit aloja los archivos en sus propios servidores por lo que eso «relaja» el número de peticiones y ancho de banda del servidor. Great!

Tras poner tus datos y colocar el código necesario para activar el script, te ofrecen la posibilidad de elegir un determinado plan en función de las características que necesites. Si bien el gratuito estaba bien, escogí el personal más que nada por el tema ancho de banda. La librería de tipografías que ofrecen en la personal es lo suficientemente amplia como para satisfacer al más goloso. Además yo ya tenía claro que debía buscar una similar a la Century Gothic.

Una vez encontrada mi opción, mediante una nueva ventana emergente puedes configurar las características de la tipografía: si vas a incrustar también el formato en cursiva, en negrita… la clase o etiqueta sobre la que actuará Typekit…

Y listo! Basta con darle a publicar para comprobar el cambio en la web. Realmente sencillote hasta para mí. Quizá necesites configurar algunas cosillas en tu CSS para acomodar el estilo a una nueva tipografía.

Aquí iría una captura de cómo quedaba pero…

…pero me puse a pensar. ¿Realmente es lo que quiero? Queda bonito sí, pero… el suavizado no es tal y como me esperaba. En Safari sí, pero ni en Firefox ni Explorer… ¿Y la compatibilidad con navegadores?

Typekit reemplaza las tipografías mediante @font-face, una propiedad CSS que a pesar de no ser nueva, no ha sido implementada totalmente hasta la llegada de CSS3. Tenéis más info sobre este tema aquí [en]. El principal problema es que la compatibilidad con navegadores no es tan alta como me gustaría (en este caso todo es cuestión de estudiar las visitas de la web y ver los navegadores más usados).

¿Qué hacer entonces? Pensé en usar Type Select [en] pero está un poco verde y no es una opción muy empleada, lo que quiere decir que en caso de problemas el soporte sería mínimo.

¿Qué hacer entonces? (Pensé una segunda vez). Y se me encendió la bombilla. Recordé Cufón [en]

Cufón no emplea Flash ni CSS. Usa Canvas [en] y VML para la sustitución. ¿Qué conseguimos con esto? Que la penetración a nivel de compatibilidad sea notablemente superior empezando por versiones antiguas de Firefox hasta Chrome y conseguir muchas más opciones de configuración (efectos de sombra, degradados…) En contra tiene que lo tenemos que alojar en nuestro servidor.

Su implementación es muy sencilla y no hace falta que me ponga a explicarla. Basta con usar el generador de script [en] y hacer la llamada de reemplazo [en]. De hecho para WordPress existe Wp-cufon [en] que lo debe hacer más fácil.

El resultado es visualmente mucho más agradable y las opciones tipográficas son enormes. Recordad que deberéis tener en cuenta las licencias de las fuentes. Yo me fuí hasta Font Squirrel [en] para escoger la que yo quería.

Resumiendo: hay muchas opciones actualmente para «saltar» la traba tipográfica en la red. Sería interesante llegar a conseguir un estándar común. Mientras los que saben se van poniendo de acuerdo, creo que me quedo con Cufón.

Por cierto, que tengo 1 3 5 invitacion de Typekit. Se puede apuntar cualquiera y esperar a que se la manden. Pero para los impacientes, me dejáis un comentario y las iré dando en orden de llegada.