Web Fonts. La revolución de las tipografías predefinidas

Durante años, el diseño web se ha visto obligado a usar únicamente un pequeño ramillete de fuentes instaladas en (casi) todos los ordenadores. ¿Por qué? Porque si la fuente que usa la web no está instalada en el dispositivo del usuario, el sistema la sustituye por otra y es muy probable que afecte a la maquetación original y rompa el diseño. Tras un largo camino, las web fonts han terminado con la dependencia de las fuentes seguras, abriendo un amplio catálogo de posibilidades.

El diseño web es una disciplina aún en pañales pero evoluciona cada día hacia una mayor expresividad y originalidad. Tras millones de páginas generadas con el selecto grupo de fuentes seguras, es hora de romper con la homogeneidad y abrir nuevas puertas. Durante algún tiempo se probaron soluciones extremas como convertir el texto en imagen. Un truco poco recomendable porque aumenta el peso de la web, reduce la legibilidad del texto, afecta al SEO, ensucia el código y complica las tareas de gestión de los contenidos. Por no hablar de cómo adaptar un texto en imagen a un diseño responsive…

La revolución de las web fonts

La verdadera revolución ha venido de la mano de las web fonts. En vez de depender de las fuentes instaladas en el ordenador del usuario, las web font se almacenan en el propio servidor y se descargan junto con las imágenes y el resto de recursos. Las web fonts, además, funcionan como cualquier otra fuente, son formateables, escalables y visibles para los buscadores, algo fundamental ahora que el SEO es clave en la vida de una web. A todo esto le sumamos el hecho de que cualquier fuente puede convertirse en una web font con generadores como Font Squirrell. Así, ahora tenemos un vasto catálogo de opciones y la seguridad de que el diseño de la web mantendrá su apariencia original en casi cualquier ordenador o dispositivo.

No obstante, hay que mantener el entusiasmo a raya y no caer en el error de hacer una macedonia tipográfica en nuestros proyectos. La contención sigue siendo el mantra del diseño: una tipo base y otra de contraste deberían ser más que suficiente para crear una web coherente. Tampoco es recomendable a nivel técnico ya que, cuantas más fuentes se incluyan mayor será el tiempo de descarga. Existen cuatro tipos de archivo de webfont (TTF, WOFF, WOFF2, EOT) y es recomendable insertarlos todos para asegurar que en todos los navegadores se visualizan correctamente.

El uso de web fonts se ha generalizado a raíz de que el todopoderoso Google lanzara Google Fonts, su catálogo de fuentes web libres de derechos. Aunque existen otros catálogos, Google nos lo ha puesto fácil. El catálogo es muy intuitivo y visual, repleto de filtros de búsqueda y opciones de prueba. Los diseñadores pueden descargar las fuentes para trabajar con ellas, escoger el lenguaje que necesitamos y hacer sus propias selecciones. Incluso Google Fonts cuenta con un apartado de colecciones temáticas que sirven de inspiración. Para los desarrolladores, la propia web genera la línea de código necesaria para insertar la fuente en el proyecto.

Consejos a la hora de escoger y usar web fonts

La elección de una familia tipográfica es una de las más relevantes a la hora de empezar un proyecto (expresividad, variables disponibles, compresión, interlineado…) Al usar una web font se suman variables nuevas:

• Elegir una paleta limitada y coherente: al concebir un proyecto de larga duración, los diseñadores debemos pensar más allá de tendencias y gustos. Como se ha comentado más arriba, se recomienda usar un máximo de dos familias armónicas entre sí y que cubran todas las necesidades tipográficas del proyecto
• Establecer una fuente de respaldo: aunque la principal ventaja de las web font es que su visualización está casi asegurada, no está de más establecer una fuente secundaria o de respaldo lo más parecida posible a la primaria por si ésta fallara.
• Hacer pruebas y examinar la fuente: existen cientos de web fonts, algunas están bien construidas, otras no. Antes de tomar una decisión es importante hacer pruebas y valorar los resultados. Para un proyecto web hay que observar, por ejemplo, cómo se comporta en diferentes cuerpos de texto y su funcionamiento en dispositivos y resoluciones. También ahorrará futuros problemas comprobar que la fuente tiene todos los caracteres que vamos a necesitar (comillas, apóstrofes, tildes, letras como la ñ, la ç…)
• Pensar en proyectos integrales: la tipografía marca el carácter de todo un proyecto o empresa. Por ello, al pensar en una tipografía para la web de una empresa, pensemos si puede usarse en sus comunicaciones offline para mantener una misma línea visual. O, al menos, si existen fuentes alternativas para el material impreso que mantengan la identidad corporativa.
• Comprobar la licencia de la fuente: atención, no todas las webfont son de uso libre, algunas requieren de un permiso explícito del autor o son de pago. Cualquier fuente puede convertirse en una webfont con sitios como Fontsquirrel pero es fundamental asegurarse de sus condiciones de uso antes.

Extra: una mirada al futuro

Las web fonts son ya la penúltima revolución en diseño web. Lo que está por venir son las Variable Fonts, un concepto desarrollado en conjunto nada menos que por Microsoft, Google, Apple y Adobe. Una fuente variable incluye en un único archivo todos los pesos y variantes. Esto no es demasiado novedoso pero este archivo alberga una verdadera revolución en su interior. Al trabajar con una fuente variable el diseñador podrá establecer una serie de condiciones que transformarán diferentes aspectos de la tipografía.

No sólo se trata de modificar el cuerpo de texto para diferentes dispositivos. Una fuente variable puede, por ejemplo, variar el grosor del trazo a medida que disminuye el tamaño, variar el contraste en función de la luz ambiente, modificar su color según el fondo, variar la compresión, el peso, el kerning y, en definitiva, cualquier aspecto de su apariencia según los deseos del diseñador. Aunque aún no están del todo desarrolladas y hay varias incógnitas a su alrededor, la llegada de las fuentes variables augura una nueva concepción de la tipografía.