Desde hace años, Google Fonts se ha erigido en la plataforma más usada por diseñadores de interfaz y desarrolladores web que buscan soluciones tipográficas versátiles, funcionales y gratuitas para sus proyectos.
Se trata no obstante de una herramienta en constante evolución, siempre al cabo de la calle de todas las novedades que se producen en el ámbito del diseño de productos digitales. De este modo, su papel nunca ha dejado de ser sumamente relevante y las últimas incorporaciones a su extenso catálogo tipográfico son la mejor muestra de esta clara vocación por estar al día y ofrecer los mejores productos para un mercado altamente exigente.
Google Fonts no es sólo una biblioteca de web-safe fonts, sino un rico y variado ecosistema en el que las tipografías deben cumplir las exigencias más rigurosas en cuanto a experiencia de usuario y rendimiento técnico.
Más allá de las web-safe fonts
El término web-safe fonts hace referencia a ese grupo de tipografías —como por ejemplo Arial, Times New Roman o Verdana— que se encontraban preinstaladas en la mayoría de los sistemas operativos y que, por lo tanto, garantizaban una visualización óptima en la web. Eran, y son, fuentes seguras, pero con sus limitaciones.
A medida que la tecnología evoluciona y por consiguiente se amplían las posibilidades de ofrecer más y mejores funcionalidades, Google Fonts detectó que ya no era suficiente con estas fuentes preinstaladas, por muy efectivas que fueran. Había que ofrecer más alternativas, dar más libertad a los profesionales del diseño y a los usuarios en general, es decir, había que ofrecer un catálogo adaptado a la nueva web.
Un cambio de esta envergadura necesita tiempo para desarrollarse por completo. Durante el periodo de transición, el catálogo de Google Fonts se nutrió, como es lógico, de las tipografías que estaban disponibles en ese momento, mientras se iban desarrollando nuevas tipografías diseñadas y producidas según los nuevos paradigmas, y es ahora cuando se está comenzando a percibir el resultado de esta novedosa perspectiva: está empezando a hablarse de web-optimized fonts.
Web-optimized fonts
Las web-optimized fonts son fuentes tipográficas diseñadas y producidas para ofrecer el mejor rendimiento posible en los actuales entornos web. Para ello deben cumplir tres requisitos fundamentales: rapidez de carga, legibilidad en pantallas y compatibilidad entre navegadores y dispositivos.
Las principales características de estas tipografías plenamente adaptadas para web consisten en que son archivos del menor peso posible para que ocupen cuanto menos espacio mejor, lo que mejora sustancialmente la velocidad de carga de la web. Además, deben estar en los formatos adecuados para la web, como por ejemplo .woff y .woff2, que son formatos comprimidos, estables, seguros y compatibles con todos los navegadores actuales.
A su vez, su diseño debe tener muy, muy en cuenta su visualización en entornos muy dispares y contextos diversos, como por ejemplo, diferentes extensiones de párrafos, en los menús o en los botones de CTA, sobre diferentes colores y, por supuesto, en las reducidas dimensiones de las pantallas de los smartphones.
El poder de la versatilidad
Por otro lado, la versatilidad es una cualidad fundamental de las tipografías digitales contemporáneas. Deben ofrecer una amplia variedad de pesos y estilos, además de un amplio catálogo de caracteres especiales y alternativas estilísticas para poder adaptarse a la mayor cantidad de proyectos diferentes. Y no sólo dar soporte al alfabeto latino, como enseguida veremos. Las nuevas posibilidades técnicas facilitan que fuentes tipográficas muy amplias se almacenen en archivos ligeros gracias a recursos como el subsetting, que consiste, grosso modo, en eliminar del archivo de una fuente todos los caracteres que no vas a usar, por ejemplo, si vas a diseñar con alfabeto latino y árabe, puedes eliminar del archivo los demás alfabetos que nos vayas a necesitar; o la carga condicional, una técnica donde sólo se cargan ciertas versiones de una fuente según lo que necesite el usuario o dispositivo. Por ejemplo, puedes cargar sólo la versión light en el móvil y toda la familia al completo (light, medium, regular, bold, italic, etc.) en el ordenador.
Por último, una característica fundamental de las web-optimized fonts es el hinting. ¿Y qué es el hinting? Expresado de manera muy básica, consiste en traducir los vectores de los caracteres a píxeles para que su reproducción sea lo más fiel posible en cualquier tamaño, sistema operativo y toda clase de dispositivos, incluso en pantallas de baja resolución.
Estos nuevos requerimientos altamente técnicos han dado lugar a un nuevo perfil profesional, el de los y las ingenieras de fuentes, que son quienes llevan a cabo la producción tipográfica, es decir, convierten un conjunto de letras en una fuente tipográfica digital perfectamente funcional. Aunque bien es verdad que la ingeniería siempre ha estado presente en el diseño tipográfico, es ahora cuando está ganando más relevancia.
Tipografías variables para un rendimiento óptimo
Se trata quizá del avance técnico más relevante de los últimos años en el entorno de la tipografía. Gracias a la tecnología de las fuentes variables, las letras dejaron de ser estáticas y cobraron movimiento. Las posibilidades técnicas actuales permiten albergar múltiples estilos y pesos en un solo archivo, como acabamos de ver. Esto no sólo reduce el número de archivos a cargar, lo que mejora el rendimiento de las web, sino que ofrece a diseñadores y desarrolladores un amplísimo abanico de posibilidades para sus proyectos de diseño.
Estas nuevas variable fonts están pensadas desde su origen para el entorno digital, por lo que ofrecen funcionalidades impensadas hace tan sólo un par de décadas. Por ejemplo, los ejes de variación van más allá del peso o la anchura y permiten ajustar la altura de las mayúsculas, el contraste o el grado de inclinación de las itálicas y cursivas, por lo que proporcionan un asombroso grado de adaptabilidad a todo el amplio abanico de dispositivos. A su vez, las color fonts son un avance más a partir de la tecnología variable, aunque mantienen sus diferencias técnicas con la fuentes variables, parten de principios similares. Ambas fuentes se basan en extensiones del formato OpenType, lo que permite una amplia adaptabilidad, por lo que resultan herramientas imprescincibles y altamente funcionales en el ámbito UI/UX.
Legibilidad y adaptabilidad
El catálogo actual de Google Fonts incluye muchas familias tipográficas en cuyo diseño se ha priorizado la legibilidad para que sean eficientes en cualquier entorno, diseños responsive, modos oscuros o incluso en condiciones de baja visibilidad o tamaños significativamente pequeños. Se trata de diseños con un enfoque UI-first o User Interface First que sigue una metodología de desarrollo que sitúa en primer lugar, desde el inicio del proceso, la experiencia del usuario, antes incluso de que exista una arquitectura de backend o una lógica funcional completamente definida.
A eso se suma que muchas de estas fuentes más recientes no solo cumplen con rigurosos estándares de legibilidad y adaptabilidad, sino que ofrecen diferentes sistemas de escritura (latino, árabe, griego, hebreo, cirílico, devanagari…). Son las conocidas como multiscript fonts y son fundamentales en proyectos internacionales.
Mucho más que un catálogo de tipografías
Aunque pudiera parecer contraintuitivo en un entorno eminentemente audiovisual, la tipografía es una de las grandes protagonistas de la red. Google Fonts, sin ir más lejos, es prueba de ello. Por eso se ha acabado transformando en mucho más que un mero catálogo de fuentes tipográficas y actualmente es una plataforma de análisis que proporciona pensamiento tipográfico de última generación. Permite comparar fuentes, ajustar pesos o simular modos de visualización y, desde hace un tiempo, ofrece artículos y recursos en Google Fonts Knowledge, una iniciativa para educar a diseñadores sobre buenas prácticas tipográficas, accesibilidad y rendimiento web.
Consejos rápidos para elegir tipografías en el contexto UI/UX
Para escoger la o las tipografías adecuadas para diseñar un producto digital hay que comenzar acotando la búsqueda y no perder tiempo en rebuscar entre las decenas o centenares de fuentes que se suelen tener almacenadas en los gestores de fuentes o las que hay disponibles en fundiciones digitales y distribuidoras. El tema de la elección tipográfica es crucial, no sólo para UI/UX, y merece un post aparte donde poder desarrollar debidamente los diversos aspectos de la cuestión. A continuación te ofrecemos una serie de consejos o tips rápidos para realizar una criba productiva y eficaz.
- Determina la clase de producto que vas a diseñar, los objetivos que tiene dicho producto y el público al que va dirigido. Esto es fundamental para la elección adecuada de la tipografía.
- Prioriza la legibilidad por encima del estilo: una interfaz efectiva no necesita tipografías llamativas, sino funcionales. En el contexto UI/UX se hace muy patente que la belleza surge de la funcionalidad.
- Aprovecha las variable fonts para construir jerarquías visuales sin que la velocidad de carga se vea afectada.
- Las pruebas que realices que sean siempre en contextos reales y con el texto real. Los expertos en diseño UI/UX desaconsejan el uso del «lorem ipsum».
- Ten siempre presente los requisitos técnicos del texto a la hora de escoger tipografía. Por ejemplo, si el producto que vas a diseñar requerirá símbolos matemáticos o si vas a necesitar negritas y cursivas asegúrate de que la tipografía los ofrece.
Puedes extraer buenas ideas de las múltiples enseñanzas y recomendaciones que propone Google Fonts.
Novedades en Google Fonts que marcan diferencias
Además de reforzar y consolidar su catálogo con un amplio y variado plantel de fuentes variables plenamente optimizadas para web y productos digitales, Google Fonts ha sumado algunas tipografías que no sólo resultan técnicamente solventes, sino que se sustentan en sólidos conceptos de diseño y están concebidas para ser inclusivas, expresivas y, sobre todo, para resolver problemas específicos de lectura. Vamos a repasar algunas de ellas, que, más allá de estilos o conceptos, son versátiles y potentes herramientas de comunicación visual.
Boldonse (Universetype)
Una sans que oscila entre lo geométrico y lo expresivo gracias a sus expresivas trampas de tinta y a la inclusión de caracteres condensados («a», «u») en un entorno de amplitud generalizada. Es un buen ejemplo de equilibrio entre expresividad, personalidad y claridad.
Azeret Mono (Displaay Type Foundry)
Monoespaciada y monolineal, esto es, sin contraste, Azeret Mono, aspira a aportar personalidad sin perder funcionalidad y precisión. Ideal para productos que busquen ofrecer un aspecto muy profesional con cierta distinción.
Gabarito (Naipe Foundry, Leandro Assis, Álvaro Franca, Felipe Casaprima)
Diseñada originalmente para una plataforma brasileña de enseñanza en línea, Garabito es una sans geométrica de carácter luminoso y extrovertido. Procura una experiencia de lectura agradable, sin sobresaltos, y debido a su origen, presenta una amplia gama de símbolos comúnmente usados en el entorno de la enseñanza secundaria.
Special Gothic Expanded One (Alistair McCready)
Su nombre lo dice todo: se trata de una tipografía que recrea, con los estándares técnicos de la actualidad y en versión extendida, las gothic que surgieron a finales del siglo XIX y que marcaron tipográficamente la primera mitad del siglo XX. Tiene, además, dos hermanas: Special Gothic, la versión regular, y Special Gothic Condensed One, la versión condensada. Una familia, por tanto, de ancho múltiple que ofrece posibilidades visuales muy variadas.
Recursive (Arrow Type, Stephen Nixon)
Recursive es una tipografía variable de cinco ejes, lo que permite elegir entre un amplio abanico de estilos predefinidos y controlar lo que se necesita exactamente de cada eje: monoespaciado, grosor, trazo casual, inclinación y cursiva. Una poderosa herramienta de comunicación visual, ideal para diseñadores que necesitan una tipografía muy versátil capaz de adoptar múltiples voces dentro de una misma interfaz.
Atkinson Hyperlegible (Braille Institute)
Atkinson Hyperlegible es una decidida apuesta por la inclusividad, ya que sus letras están diseñadas para ser legibles por lectores con visión reducida. Funciona especialmente bien en tamaños pequeños o en productos especialmente delicados como webs y aplicaciones sanitarias, educativas o las destinadas a las personas mayores.
Noto Sans & Noto Serif (Google, Monotype)
Por su envergadura y su vocación de universalidad, aunque no sea estrictamente una novedad (recientemente ha sido objeto de una sustancial actualización), Noto merece una mención como colofón de este artículo. Se trata de una superfamilia «para escribir en todos los idiomas modernos y antiguos», para lo cual da soporte a más de 100 sistemas de escritura, 800 lenguas y ofrece cientos de miles de caracteres, por lo que su valor para diseñar productos multilingües y globales es incalculable.
Imágenes: Google Fonts