Tradicionalmente las familias tipográficas han venido en varios ficheros para instalar según su peso (Por ejemplo: bold, light…) por lo que la instalación de una familia tipográfica venía marcada por la necesidad de instalar todo el paquete tipográfico. Con la llegada de las llamadas variable fonts, cada vez más se está produciendo una tendencia al uso de las mismas, en la que toda la familia está en un mismo fichero. En este insight vamos a explorar los beneficios y cómo nos va a afectar (de manera positiva) para nuestro trabajo en diseño, porque han venido para quedarse.

 

En el mundo digital en el que vivimos nos encontramos rodeados de pantallas, de distintos tamaños y con diferente visibilidad, es por ello que en era necesario y muy reclamado por los profesionales dedicados a diseño que la tipografía (uno de los pilares en diseño) se pudiese adaptar con solvencia, agilidad y buen resultado. Ahí es donde han aparecido las llamadas Variable fonts, que han llegado para cambiar el juego de la tipografía en diseño de interfaces.

¿Qué es una variable font?

Una variable font acumula y agrupa toda la familia tipográfica en un solo fichero, un sólo fichero que actuará como una familia completa. Es decir, si anteriormente para instalar una tipografía teníamos una cantidad variable de ficheros (Por ejemplo: Roboto tiene 15 ficheros) cada uno con su peso, con este nuevo tipo de archivos sólo tendríamos que descargar e instalar un archivo. Actualmente ya está soportado por la gran mayoría de navegadores (excepto IE 11) y los principales softwares de diseño lo han integrado ya entre sus herramientas para poder hacer uso de este tipo de tipografías.

1
Variable fonts: Qué son y qué beneficios nos traen

¿En qué nos beneficia este cambio?

Agilidad y rendimiento

Además de mejorar la logística para la comunicación entre diseñadores y desarrolladores, en la que siempre es una odisea el intercambiar tantos ficheros con nombres parecidos, es en el rendimiento de las interfaces donde más notaremos este salto. Donde antes el servidor debía de reclamar cinco ficheros (por lo que había que hacer cinco peticiones al servidor) ahora solo deberá hacer una petición y reclamar un fichero. mejorando la performance de rendimiento web, tanto en peticiones como en peso de archivos.

2
Variable fonts: Qué son y qué beneficios nos traen

Más posibilidades de combinación

Como diseñador, uno de los puntos claves a desarrollar en tu carrera es el llamado ‘font-pairing, o cómo utilizas las diferentes tipografías o pesos de las mismas para que combinandolos puedas darle un sentido jerárquico, semántico o estético.

Antes, como diseñadores, nos veíamos limitados a unos pesos tipográficos específicos, y muchas veces… pobres. Algunas tipografías sólo incluían pesos como bold, regular y light, por lo que muchas veces la limitación para combinar era evidente. Con esta ‘no-limitacion’, una de las principales bazas para un diseñador y su habilidad para trabajar con tipografias es la posibilidad infinita de combinaciones entre pesos u otras tipografias para preparar jerarquias, contrastes y darle un significado a la eleccion tipografica.

Anteriormente podía ocurrirnos que quizá el peso bold de una tipografía era demasiado grueso pero el regular se nos quedaba corto, ahora con las variable fonts podemos ponerle solución a esa limitación anterior.

Animación y transiciones

Con este tipo de font, se nos hace mas sencillo la posibilidad de animar tipografías y hacer transiciones entre las mismas con más facilidad. Un nuevo campo de experimentación y recursos se pone a nuestra disposición y sin necesidad de hacer un trabajo laborioso, ya que no tenemos la exigencia de realizarla mediante videos o ficheros pesados.

Con este nuevo tipo de fuente ya todas las animaciones o transiciones las podemos realizar desde el código.

 

3
Variable fonts: Qué son y qué beneficios nos traen

Adaptacion a pantallas

Ante la diversidad y necesidad de diseñar para tanto dispositivos y pantallas, con resoluciones y tamaños diferentes, se antojaba necesario esta "flexibilidad" en las tipografías, para poder adaptarlas según dispositivo, ya que no es lo mismo la facilidad de lectura y contraste si nos encontramos leyendo informacion en un dispositivo cercano a los ojos que si vemos una pantalla digital en una carretera.

El poder adaptar todo nuestro contenido y todo desde una única fuente nos permitirá ser mas eficiente y poder dar un mejor soporte a todas las pantallas y dispositivos.

Conclusiones

En los próximos meses vamos a vivir una transformación en términos tipográficos. Veremos muchísimas más transiciones tipográficas, mejor rendimiento y más poder de customización, por lo que estaremos atentos para estar a la vanguardia y aprovecharnos de este nuevo paradigma.

Por ahora las únicas consecuencias negativas serán que habrán muchas fundiciones tipográficas que tendrán que actualizar sus tipografías, ya que muchas seguirán teniendo el formato antiguo, y la incompatibilidad con navegadores específicos desactualizados, como es el caso de IE 11.

Os dejamos con un enlace donde puedes experimentar, encontrar y probar desde el navegador diferentes variable fonts: https://v-fonts.com/