Gracias a la reciente compatibilidad con Google Chrome, en las últimas semanas se está hablando con bastante frecuencia de las Variable Fonts, aunque realmente pocos las están usando. O están sacando un partido real de ellas. Pero casi todos los que la conocen están de acuerdo en algo: es el futuro de la tipografía. tanto en el mundo del diseño gráfico como del diseño web.
En Octubre de 2016, se lanzó la versión 1.8 de OpenType. Con ella se presenta una nueva tecnología: OpenType Font Variations. Poco meses después, se empieza a hablar de ella aún más en la TypoLabs de Berlin. Y es en esta edición del evento cuando las Variable Fonts ocupan un lugar central. Y no es para menos, ya que es un nuevo paso en la evolución de las tipografías. O más bien, es una revolución, tal como fueron en su día el TrueType o el PostScript.
Pero, ¿realmente es para tanto?. ¿De que forma va a cambiar la manera que entendemos y trabajamos en la actualidad con las tipografías? Mediante un par de artículos, desde Silo Creativo queremos enseñaros que son las Fuentes Variables, y como usarlas tanto si somos diseñadores gráficos, como si queremos añadirlas a nuestros proyectos en la web.
¿Qué son las Variable Fonts?
Las Variable Fonts fueron desarrolladas gracias al esfuerzo de cuatro grandes compañías tecnológicas: Apple, Google, Microsoft y Adobe. Y como sugiere su nombre, las Variable Fonts, o Fuentes Variables, nos permite crear un número ilimitado de variaciones de una misma fuente, partiendo de un mismo archivo de fuente.
Esto nos permite modificar grosor, anchura o inclinación de la tipografía a nuestro gusto. Sin vernos ceñidos a los clásicos y conocidos estilos Bold, Italic o Thin, por ejemplo. Con las Fuentes Variables, esto se acaba.
Como ya sabéis, en Silo Creativo somos amantes de la tipografías. Y en muchas ocasiones os hemos recomendado algunas combinaciones de fuentes para usar en vuestro proyectos. Imaginaos las nuevas posibilidades que las Fuentes Variables nos ofrecen.
Como siempre, tendremos que andar con cuidado, ya que en el momento que tenemos libertad absoluto para crear, la posibilidad de que nazca una aberración está presente. Pero también está la otra cara de la moneda. Seguro que gracias a esta nueva herramienta, surgirán creaciones asombrosas que nunca hubiésemos imaginado.
Compatibilidad de las variable Fonts
Ya sabéis que siempre me gusta comprobar la compatibilidad que tienen las nuevas herramientas con los navegadores web actuales. Y para eso, me gustar tomar como referencia la web Can I Use. Veamos los resultados que nos da al respecto de las Fuentes Variables:
Como vemos al entrar en Can I Use, en las últimas semanas se está hablando tanto de las Fuentes Variables gracias a que es completamente compatible con la última versión de Google Chrome de escritorio. Además de con Microsoft Edge y Safari. Pero por desgracia, aún no está implementado en Mozilla Firefox, ni se prevé que lo haga a corto plazo. Aunque los usuarios de la Firefox Developer Edition pueden activarla.
Por cierto, si sois desarrolladores, os recomiendo encarecidamente el uso de Firefox Developer Edition, ya que trae multitud de herramientas que seguro que os son de utilidad. Sobre todo si actualmente estáis trabajando con CSS Grid.
¿Por qué usar Variable Fonts?
El primer motivo es que, con las Fuentes Variables podemos reducir de forma considerables el número de archivos a usar cuando estemos diseñando. Por ejemplo, imaginemos que vamos a usar Roboto, una de las fuentes que solemos recomendar para hacer combinaciones. Si nos vamos a Google Fonts, nos encontramos con esto:
Si, tal como lo veis. Tenemos que descargar doce archivos si queremos usar todos los estilos que Roboto tiene disponibles. Roboto Light, Roboto Italic, Robot Bold… Esto es espacio que estamos ocupando de forma local en nuestro equipo. Y si estamos creando un web, espacio en el servidor. O nuevas líneas de código CSS. Es decir, estamos siendo mucho más eficientes, tanto en cuestiones de espacio de archivo, como en carga para la web. Ya sabemos como de importante es optimizar estos tiempos de carga para que nuestra web se comporte de forma correcta, y no sea penalizado por los buscadores.
Con las Variable Fonts ya solo tenemos un archivo de fuente. No tenemos que elegir que estilo de fuente queremos en cada momento. El estilo de fuente lo vamos a crear según nuestras necesidades. Nunca vamos a tener una fuente con dos estilos iguales.
Variable Fonts en el Diseño Gráfico
Desde finales del año pasado, tanto Adobe Photoshop CC como Adobe Illustrator CC se actualizó para poder usar de forma nativa Variable Fonts. Como ya sabemos, ambos programas son dos de de las herramientas más usadas por los diseñadores web para crear prototipos y diseños previos de websites. Aunque, como ya hemos visto, existen en el mercado otras alternativas si eres diseñador web.
Como vemos en la imagen, se ha añadido un nuevo panel lateral con nuevas opciones que aparecerán activas en el momento que tengamos seleccionada una Fuente Variable. Esto es lo que podremos realizar al modificar cada una de ellas:
- Weight – podemos variar el grosor de la fuente. Este valor va desde 1 a 999.
- Width – cambiamos el ancho individual de cada letra, sin modificar su grosor, o el espacio entre letra y letra.
- Slant – varía la inclinación que tiene la fuente, por lo que podemos crear que una cursiva se tumbe según nuestras necesidades.
Por ahora, estas son las únicas opciones disponibles en Illustrator para modificar las fuentes. Pero no descartamos que añadan opciones nuevas en el futuro para que las personalización vaya a más.
En el siguiente artículo, veremos como usar las Variable Fonts en un diseño web mediante algunos ejemplos. Ya que mediante el uso de diferentes propiedades CSS veremos realmente el potencial que tiene este nuevo.
Y como vamos a hacer uso de CSS, como siempre, os recomendamos echar un vistazo a nuestro artículo de introducción a CSS. Seguramente hagamos uso de algunas propiedades que vimos en aquel texto. Por lo que si no lo habéis visto, es un buen momento para hacerlo.
Esperemos que os haya gustado, y os esperamos en la continuación de este artículo dentro de unos días que, como hemos dicho, se centrará completamente en el campo del diseño web. Tenéis disponible los comentarios para cualquier duda, sugerencia o añadido que queráis realizar!
Exelente artículo. Saludos
Muchas gracias Jor!