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

criterion

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!

typekit comparativa planes

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.

probando typekit

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…

configurando 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 al rescate

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.

Hay 21 comentarios

  1. Corbacho

    Buen momento para repartir invitaciones.. un sábado por la noche :D

    Yo me apunté pero todavía no me llegó la invitación, asi que estaria bien probarlo este fin de semana para ver qué tal está.

    Gracias y buen análisis de opciones

  2. harold

    Cufón tenia cierto problema para poder seleccionar los textos que se habían reemplazado, que veo que tu no tienes.
    ¿Le has metido algún fix en particular, o ha sido cuestión de suerte?

  3. Skeku

    @Corbacho: te envío una ahora.

    @harold: puedes seleccionar texto? Es que no se puede hacer con Cufón xD. A ver si estás seleccionando algo que no está reemplazado :D

    @Sandman: te va otra.

    @Carlos: maestro, qué debo deducir de esa imagen? Te lo digo porque lo veo todo bien :S

  4. Jeky

    Estupendo post Skeku, por fin alguien nos explica esto como funciona, aunque me sigue pareciendo mucho mejor “Typekit”, el tiempo lo dira… Por cierto, hay algún sitio donde se puedan ver ejemplos que usen “Typekit”?
    Gracias por la explicación.
    Saludos.

  5. Acsel

    Interesaaante! La primera vez que oí algo similar a lo que hablas, ha fué hace cosa de 2 semanas con la Fundición tipográfica Typotheque. Pero por lo que veo… iba algo retrasado, pues como muestras ya hay empresas que lo estan sirviendo xD

    Genial post Skeku!

  6. Skeku

    @Thomas, cuando llegue a casa te envío una :)

    @Acsel, ya ves cómo avanza. Estoy encantadísimo con Cufón. Lo que tengo que mirar ahora es el tráfico que genera.

  7. Nacho

    Hola Skeku… he visto que implementaste el sifr con jquery es por si me puedes iluminar ya que no se donde buscar más.

    Tengo una página que lo he implementado pero tengo problema con los acentos.

    1. He embebido los acentos en el fla. (por desesperación hasta he puesto todos…)
    2. El “html” lo tengo en UTF-8 (sin ´s;)

    Pero sólo me salen cuando pongo en el navegador Codificación de carácteres: ISO-8859-1 si pongo UTF-8 no me lo pasa bien.

    Por ejemplo si pongo Gastronomía -> pone txt=Gastronom%EDa

    ¿Alguna idea o sabes pq me pasa?

    Muchas pero que muchas gracias por adelantado!!

  8. RicPlan

    Cufon powa :-) Si my friend.
    La idea de Typekit es buena pero lo veo caro para lo que es, a pesar de haber bajado los precios hace poco.
    Supieron crear un “buzz effect” con el tema de las invitaciones pero Cufon les ha dado donde más duele.

Deja tu comentario