En este artículo hablaremos sobre las fuentes variables — una herramienta interesante y útil, aunque a menudo subestimada. También mencionaremos sus inconvenientes y los matices que hay que tener en cuenta al trabajar con ellas.
En el artículo trataremos los siguientes puntos:
- Historia de su aparición;
- Características técnicas;
- Ventajas y desventajas;
- Particularidades de uso;
- Ejemplos de uso creativo.
Historia de su aparición
Para empezar, y ponerte en contexto, hablemos de la historia del desarrollo de las tecnologías tipográficas.
En la segunda mitad de los años 80 del siglo XX se presentaron los formatos PostScript, desarrollado por Adobe, y TrueType, creado por Apple, para la elaboración de archivos tipográficos. Ambos utilizaban curvas de Bézier para construir los signos. Estos formatos, en versiones actualizadas, siguen siendo los que usamos hoy en día para trabajar con archivos de fuentes.
En 1991, Adobe presentó la tecnología Multiple Master como una extensión del formato PostScript, que permitía almacenar en un solo archivo tipográfico varias versiones del contorno para un mismo glifo. Estas versiones eran puntos extremos en un eje, entre los cuales se podían generar valores intermedios, por ejemplo, modificando el peso o el ancho.
Para utilizar una fuente de este tipo, primero era necesario generar un estilo estático mediante un programa especial (Adobe Type Manager) y luego cargarlo en el sistema para poder usarlo en un editor gráfico. Debido a su complejidad de uso, este formato nunca llegó a ser popular, y los diseñadores tipográficos siguieron publicando estilos estáticos.
En 1997, Adobe y Microsoft presentaron conjuntamente la tecnología OpenType. Basada en el formato TrueType, permitía integrar una cantidad considerablemente mayor de caracteres (65 000, frente al límite anterior de 256), así como funciones OpenType, sin las cuales hoy no concebimos una fuente moderna. Nos referimos, por ejemplo, a la compatibilidad con versalitas, cifras tabulares, superíndices, juegos estilísticos, alternativas contextuales, etc. El formato OpenType sigue siendo el más utilizado en la actualidad.
Finalmente, en 2016, Adobe, Apple, Google y Microsoft anunciaron una nueva versión del formato OpenType: OpenType Font Variables. Desde ese momento, los diseñadores tipográficos tienen la posibilidad de incluir información sobre varios estilos de una familia tipográfica en un solo archivo. El concepto de este formato se asemeja al Multiple Master, con una diferencia fundamental: ya no es necesario generar de antemano los estilos estáticos. Los parámetros pueden ajustarse directamente en el editor gráfico.
Características técnicas
Detengámonos con más detalle en qué diferencia este formato del OpenType clásico.
Cuando un diseñador adquiere una familia tipográfica, por ejemplo, una grotesca compuesta por 9 grosores, obtiene 9 archivos tipográficos individuales. Estos estilos fueron preparados de antemano por el diseñador tipográfico, y la distribución de pesos fue calculada para que las transiciones fueran uniformes desde el más fino hasta el más grueso.
Una fuente variable, en cambio, es un único archivo, y el rango de estilos está limitado únicamente por el grosor más fino y el más grueso. El diseñador puede seleccionar libremente cualquier punto intermedio que desee dentro de ese rango.
Si observamos el interior de la fuente, veremos que cada glifo tiene puntos de control sobre los cuales se construye. Si el número de esos puntos coincide en los estilos más fino y más grueso, el programa puede conectar esos puntos y calcular posiciones intermedias. Por supuesto, el desarrollo de una fuente no es tan simple ni lineal, y muchas veces necesitamos definir más de dos estilos base, pero esto no afecta en nada la experiencia del usuario final.
El rango entre los dos estilos extremos se denomina eje. En los editores gráficos, como los de Adobe, aparece como una línea con un control deslizante que se puede mover para ajustar el valor deseado.
Ejes de variabilidad disponibles:
El primer eje — es el ya mencionado eje de peso. En la mayoría de las familias tipográficas existen varios estilos según el grosor, y en teoría todos ellos podrían ser variables.
Imaginemos que compraste una familia tipográfica tradicional y planeas usarla para maquetar un libro o un sitio web con mucho texto. Sabes cuál debería ser el grosor del texto principal para que la lectura sea cómoda, pero te enfrentas a un problema: el estilo Regular te parece demasiado ligero, y el siguiente, por ejemplo Medium, demasiado grueso. La opción ideal sería un grosor intermedio, pero no existe. Si esta fuente fuera variable, bastaría con mover el control deslizante en el editor gráfico o definir un valor intermedio en CSS para obtener exactamente el peso deseado.
El siguiente eje bastante común es el de ancho. En familias estáticas sueles tener varias opciones de anchura, como Normal, Condensed o Extended. En una fuente variable puedes ajustar manualmente la anchura entre el estilo más estrecho y el más ancho.
Esta opción puede ser útil, por ejemplo, al maquetar texto en columnas estrechas, donde necesitas encajar la mayor cantidad de contenido posible. El ancho normal puede ser demasiado grande para esa función, pero el estrecho puede dificultar la lectura de bloques largos. Una fuente variable te permite hacer el estilo un poco más estrecho sin perder legibilidad.
El tercer eje es el de inclinación. Este se aplica cuando las letras en estilo cursivo tienen la misma estructura que las rectas. Este tipo de aplicación suele encontrarse sobre todo en fuentes grotescas.
Puedes ajustar tú mismo el ángulo de inclinación de la fuente, lo que permite controlar cuánto destaca el estilo dentro de un bloque de texto. Esta opción es útil cuando necesitas utilizar cursiva en grandes volúmenes de texto sin comprometer la comodidad de lectura.
Y por último, otro eje menos común pero también contemplado en el formato OTF Var: el eje de tamaño óptico.
Quizás hayas visto subfamilias como Display y Text en algunas fuentes variables. Las Display suelen tener mayor contraste, detalles más finos y un espaciado más estrecho. Se utilizan para títulos, carteles y cualquier aplicación en la que el texto aparezca en gran tamaño.
La subfamilia Text, en cambio, tiene menos contraste y detalles más robustos. Está pensada para mantener la legibilidad en tamaños pequeños y en bloques extensos de texto.
En una fuente variable, puedes generar un estilo intermedio que siga siendo legible a tamaños reducidos, pero que resulte más refinado que una versión estándar de texto. Este punto intermedio es ideal, por ejemplo, para subtítulos pequeños.
Hemos descrito los ejes que ya han sido definidos por los desarrolladores del formato. Cada uno de ellos cuenta con una abreviatura específica:
- wght — peso
- wdth — anchura
- slnt — ángulo de inclinación
- ital — cursividad
- opsz — tamaño óptico
Sin embargo, los diseñadores tipográficos pueden idear e implementar sus propios ejes de variabilidad.
Existen ejemplos ya desarrollados donde pueden modificarse la longitud de las serifas, la altura de las minúsculas o mayúsculas, la altura de los rasgos ascendentes o descendentes, el contraste, etc.
Y por supuesto, una fuente también puede transformarse con fines decorativos. Aquí, el único límite es la imaginación del autor.
Ahora imagina esto: un solo eje puede ofrecer miles de variantes de una misma fuente. Si hay dos ejes, ya hablamos de un millón. Y con ejes personalizados, las posibilidades se vuelven prácticamente infinitas.
En resumen, con las fuentes variables es posible resolver prácticamente cualquier tarea tipográfica.
Ventajas y desventajas de las fuentes variables
Ahora hablemos de algunos problemas que encontramos al usar fuentes variables y de formas interesantes de aprovecharlas.
Cabe señalar que la tecnología de fuentes variables existe desde hace muchos años. Aunque las herramientas de edición tipográfica han avanzado considerablemente y hoy es cada vez más fácil crear este tipo de fuentes, aún no han ganado popularidad ni uso masivo. Esto puede indicar que: no existe aún un campo de aplicación suficientemente claro, el producto todavía no responde a las exigencias del mercado, o bien que las herramientas no permiten utilizarlas cómodamente. Actualmente, no todos los editores gráficos ni navegadores web admiten fuentes variables. Por ejemplo, no todos los navegadores son compatibles con aplicaciones de diseño.
La mayor desventaja de las fuentes variables es su baja calidad. La gran mayoría se produce de forma mediocre y, como resultado, pueden comportarse de manera impredecible en el momento menos oportuno.
Otro ejemplo. Si tu sitio web recibe 1 000 000 de visitas al día y usas toda la familia Norms Pro con todos sus estilos, el total de archivos ocupa 5306 kilobytes. Si en su lugar utilizas una versión variable de esta misma familia, solo ocupará 1875 kilobytes. Observa la tabla a continuación: podemos ver que con tal volumen de visitas, se genera una diferencia de 3272 GB en datos transferidos desde el servidor. Es evidente que, para una sola visita, la diferencia es insignificante, pero en conjunto adquiere relevancia.
También es importante señalar que la mayoría de las fuentes variables no están “hintingeadas” (no tienen hinting). Este es un proceso complejo que requiere formación, y como resultado, las fuentes variables no siempre se renderizan correctamente en tamaños pequeños.
Cómo usar fuentes variables
Ahora te explicamos cómo utilizar fuentes variables en tu trabajo.
Empecemos con Adobe Illustrator. Por ejemplo, escribes un texto y deseas aplicarle una fuente variable que ya tengas instalada. En la lista general, estas fuentes están marcadas con una etiqueta especial: “var”. Por cierto, Adobe incluye sus propias fuentes variables en las versiones más recientes de sus programas, así que puedes empezar a experimentar con ellas.
Cuando eliges una fuente variable, en el panel Character aparece un botón adicional llamado Variable Font. Ahí se encuentran todos los ejes de variabilidad que tenga la fuente, y sus valores se pueden ajustar con controles deslizantes. El resultado se ve de inmediato. El resto de opciones del panel permanecen iguales.
También puedes seleccionar uno de los estilos predefinidos de la lista y usar la familia como si fuera estática.
En Sketch el principio es exactamente el mismo, solo que estas fuentes no llevan ninguna indicación especial.
También puedes integrar fuentes variables en la web mediante CSS. No entraremos en detalles aquí. Pero puedes ver ejemplos de cómo se integran las fuentes variables en sitios web:
Puedes profundizar en el uso de fuentes variables en la web con los artículos de Richard Rutter en medium.com:
Get started with variable fonts — una introducción breve pero muy útil
How to use variable fonts in the real world — una descripción de los posibles problemas y cómo resolverlos.
Ejemplos creativos de uso
Aquí te mostramos algunos ejemplos creativos que demuestran cómo se pueden utilizar las fuentes variables con un poco de imaginación.
Ejemplos donde el texto se estira dinámicamente según los bordes del contenedor
Ejemplo interesante de uso de fuentes variables en realidad aumentada
Ejemplo de una fuente que cambia dependiendo de la distancia desde la que se visualiza
Ejemplos de cómo ajustar el peso de la fuente en función de las condiciones de lectura, por ejemplo la iluminación
Incluso se puede ir más allá y crear imágenes en movimiento a partir de una fuente, como propone el sitio axis-praxis. Es posible, además, darles color superponiendo varias letras, como se muestra en los experimentos de Toshi Omagari. Aunque claro, esto ya no sería un uso tipográfico en el sentido tradicional.
Recursos útiles
Queremos recomendarte algunos recursos donde puedes probar y experimentar con fuentes variables.
En primer lugar, está axis-praxis.org, donde se reúne una gran cantidad de fuentes variables. También puedes subir tus propias fuentes y probarlas allí.
En segundo lugar, v-fonts.com, donde igualmente puedes experimentar con distintas fuentes en una versión simplificada.
Y por último, un sitio excelente que usamos activamente en nuestro trabajo para probar fuentes variables: dinamodarkroom.com, del estudio Dinamo. En este sitio no solo puedes testear los ejes de variabilidad, sino también las funciones OpenType, e incluso exportar versiones estáticas con parámetros personalizados.
Conclusiones
Las fuentes variables tienen el potencial de convertirse en una parte fundamental del mundo tipográfico. En los últimos años, se ha hablado mucho de ellas, aunque todavía no se han masificado. Hoy en día ya son una herramienta eficaz para resolver una serie de tareas específicas.
Cabe destacar que el número de fuentes variables sigue creciendo, y cada vez más editores gráficos y de vídeo comienzan a ofrecer compatibilidad con este formato. ¡Las fuentes variables conquistarán el mundo! ¡Es solo cuestión de tiempo!
