Con todo el jaleo de la Google I/O 2013, la nueva entrega de #AskToPablo ha quedado relegada al sábado, y no al viernes como viene siendo habitual.
En este caso hablaremos de estándares referidos a tipografías, aprovechando la genial propuesta que +Manuel Ángel García a partir de un comentario en Google+.
Y es que, como ya vimos en la entrada ¿Skeumorfismo, diseño plano o minimalismo?, la elección de una buena tipografía puede suponer hasta el 90% de la identidad del servicio.
Fuentes tradicionales
Las fuentes digitales que usamos hoy en día tienen su sentido en el método tradicional de la imprenta, de la cual han heredado la mayoría de nomeclatura.
De hecho fue uno de los principales frentes de lucha entre los dos gigantes del mundo tecnológico, como lo son Apple y Microsoft. Con la llegada de las interfaces gráficas, quedó patente que era necesario conquistar el espectro tipográfico, ya que era éste quien tenía más papeletas para encandilar a los usuarios a decidirse por uno u otro sistema operativo.
Se crearon principalmente dos frentes:
- PostScript Type 1: Desarrollado por Adobe, y que tuvo su apoyo mediático y de distribución en la firma Windows. Usaba fuentes vectoriales, y por tanto escalables.
- TrueType: Desarrollado por Apple, y más tarde licenciado a Microsoft, ha ido paulatinamente comiendo terreno a los PS. Actualmente es una de las tipografías tradicionales que más se usan.
Ganada la batalla Apple, la empresa licenció a la competencia su obra, que acabó por dar su fruto en una nueva versión de TrueType llamada OpenType, que como principal ventaja tiene el hecho de ofrecer más información y flexibilidad que las TrueType.
Por tanto, hoy en día podemos considerar que existen dos tipos de tipografía distinta, TrueType (.ttf) y OpenType (.otf), que los usuarios tienen instaladas en sus sistemas operativos, con alguna que otra diferencia según el SO y la versión, pero que a fin de cuentas podemos considerar estándar.
Fuentes Web
Con la irrupción de internet en nuestra vida, los diseñadores se encontraron con un gran problema. Las webs debían marcar pautas de consumo de contenido, pero en última instancia, eran las herramientas del usuario (navegador, fuentes instaladas, sistema operativo,..) quien permitían una experiencia más o menos cercanas a la decidida por el desarrollador.
Se solucionó en parte con la declaración en las hojas de cascada de una jerarquía de fuentes, siendo la última definición la familia a la que pertenecían, de tal manera que si un tipo de fuente no se encontraba en el sistema, se recurriría al siguiente, y así hasta el final, que en caso de no encontrarse ninguna, mostraría por pantalla otra que al menos perteneciese a la misma familia.
Hablamos de solución a medias por el simple hecho de que sí, ahora al menos mostraba una fuente de la familia de fuentes deseada, pero con la inmensa variedad de fuentes que puede haber dentro de una misma familia, el visionado de las webs distaba mucho de ser el correcto.
Es entonces cuando empiezan a surgir las Web Open Fonts (.woff), de las que ya hicimos un tutorial sobre su uso hace tiempo, y que afortunadamente la W3C ha estandarizado. A grandes rasgos, una tipografía WOFF no es más que una tipografía TTF u OTF comprimida y empaquetada para subirla directamente a un servidor, de tal forma que abstraemos la dependencia del cliente ofreciendo nosotros mismos desde el servidor la tipografía elegida.
Queda un último paso a tener en cuenta, y es que cada navegador cuenta con su propio motor de renderizado, y éste aplica sus propios algoritmos para generar la continuidad del trazo, por lo que si bien ahora ya tenemos en nuestro haber la decisión de la tipografía mostrada, aún queda en manos del usuario el visionado final (que puede variar ligeramente dependiendo del navegador, el tamaño de letra y la resolución de la pantalla).
De todas formas, hay que tener en cuenta que esta situación puede ser usada en nuestro favor, definiendo diferentes experiencias de usuario en relación al dispositivo en el que se encuentre (no podemos esperar que las webs se vean exactamente igual en cualquier herramienta, ya que es el usuario quien ha elegido esa herramienta, y seguramente lo ha hecho porque se identifica más con ese tipo de renderizado).
Respondiendo por tanto a la pregunta de +Manuel Ángel García, la W3C acepta como animal de compañía aquellas tipografías adscritas al tipo WOFF, y por supuesto las tradicionales OTT y TTF (a sabiendas de que dejas en manos del cliente el visionado). Fuera de la estandarización, existen alternativas, como la de Adobe y la de Google, aunque antes de usarlas, un servidor recomendaría echarle un ojo a las WOFF, o directamente usar una tipografía Sans Serif que sabemos que es bien tratada en cualquier navegador, como es la Verdana, o bien la sempiterna y adaptable Times New Roman de serifa.
Como ya sabéis, podéis proponer nuevos temas sobre los que hablar en los canales de comunicación siguientes:
- Hashtag #AskToPablo en Twitter, o directamente mencionándome (@PYDotCom).
- Mensaje privado o mención a mi cuenta de Google Plus.
- Email desde la página de Contacto.
- Mensaje privado en la página de Facebook.
Intentad dejar esta entrada para consultas de la propia entrada. Muchas gracias, ¡y seguimos en contacto!
Muchas gracias, Pablo.
Muy ilustrativa la explicación. Me ha aclarado algunos conceptos que ya conocía, pero que no siempre domina uno con la suficiente precisión.
Por lo tanto, entiendo que las Google Fonts son Web Open Fonts (.woff) sin más, ¿verdad?
En la práctica sí Manuel Ángel. Aunque las que ofrece Google o Adobe subidas a la nube tienen un gran pero, y es de optimización.
Si tu tienes en tu servidor el fichero WOFF, la petición del paquete debería ser más rápida que tener que recurrir a uno externo, como ocurre con los dos anteriores. Por eso en la medida de lo posible, si vas a usar web fonts, que sean tuyas, que así las subes a tu servidor y el cliente las descarga al cargar la página en la misma consulta.
Mmm… Que tu servido va a ser mas rapido en cargar que el de google o adobe? No se yo, no se yo.
Por cierto que fuentes usas para la versión movil?
Un saludo y a seguir así!
Hombre, piensa que si lo tienes en tu servidor, debería cargar ligeramente más rápido, ya que en una sola consulta accede al contenido, mientras que la otra son dos consultas.
Pero sí, por supuesto depende de nuestro servidor, y está claro que es peor que el de estas empresas, así que andará ahí ahí.
En esta página uso una Droid Sans abierta. De hecho la cargo desde las APIs de Google (más que nada porque venía así en el tema que usé de base). Para que luego digan: en casa del herrero… xD.