Ejemplo de fuente variable.
Pero, ¿qué pasa con las fuentes y tipografías? ¿Pueden tener también esa flexibilidad y adaptabilidad? La respuesta es que sí, gracias a las tipografías variables que ofrecen un nuevo mundo de posibilidades. Aquí te lo contamos.
¿Qué son las fuentes variables?
Las fuentes variables (o variable fonts) son unas fuentes que incorporan una tecnología diferente a las fuentes tradicionales (tipografía variable OpenType). Estas fuentes contienen mucha más información que las fuentes tradicionales, lo que permite una gran variabilidad en grosor, ancho, inclinación, etc. dentro de la misma fuente.
Dicho de otra forma, una tipografía variable permite que con solo una fuente tengas una variedad infinita de combinaciones, lo que aporta un gran dinamismo y oportunidades de diseño.
Estas fuentes se desarrollaron entre 4 gigantes como son Google, Apple, Microsoft y Adobe.
La tecnología detrás de las fuentes variables
Este tipo de fuentes son la evolución natural de la tipografía.
El diseño ha ido avanzando para que las webs puedan adaptarse de forma responsive a cualquier tamaño de pantalla, ¿por qué no debería adaptarse también la fuente?
Hasta hace unos años esto estaba limitado por la tecnología, pero hoy esto se ha solucionado y muchos programas de edición tienen controles deslizantes que permiten modificar de forma dinámica varios ejes de la fuente como:
- El peso o grosor: para hacer la fuente más delgada o negrita, en el grado que quieras.
- La anchura: para que el texto aparezca más condensado (estrecho) o más estirado.
- La inclinación: permitiendo obtener cursivas con inclinación al gusto.
- Etc.
Del mismo modo los navegadores web ya están preparados para admitir este tipo de fuentes. No en vano, la web es el entorno natural para desarrollar el potencial de las fuentes variables, aunque también tienen sus aplicaciones en soporte físico.
Beneficios de las fuentes variables
Mejores resultados en menos tiempo.
Las fuentes variables son la evolución natural de las fuentes hacia un modelo responsive que permite a los diseñadores adaptar los textos de forma mucho más eficiente y ágil, y sobre todo ofreciendo un buen resultado.
Además permiten ajustar la tipografía en tiempo real, lo que puede ser muy útil cuando se está revisando el trabajo junto a un cliente.
Instalación más sencilla.
Las fuentes tradicionales tienen diferentes ficheros en función del peso de la fuente (bold, light, y todas sus combinaciones), lo que implica que para poder usar la fuente de forma flexible necesitas instalar todos los ficheros correspondientes.
En el caso de las tipografías variables, todas las variaciones posibles de la misma están en un único fichero, por lo que su instalación es más sencilla y además ofrece más posibilidades.
Mejora el rendimiento en web.
Una consecuencia de lo anterior es el mejor rendimiento en interfaces web, ya que el servidor solo deberá reclamar un fichero mediante una petición, y no mediante 5 o 10 (o tantos ficheros como variaciones de peso de la fuente se hayan utilizado).
Por lo tanto se mejora el rendimiento web, reduciendo el peso de los archivos y el número de peticiones.
Adaptación para mejorar la lectura y los resultados.
La adaptación de la fuente a diferentes dispositivos y pantallas desde el punto de vista del diseño es ya algo maravilloso, pero además poder adaptar los parámetros de la fuente para que sea más legible en cada dispositivo es otro nivel. Imagina que la fuente pueda adaptase en función del nivel de luminosidad para hacerse más legible.
De esta forma se mejora no solo la imagen sino otras métricas como el tiempo de lectura o las conversiones gracias a una mejor legibilidad de los textos, y todo desde una única fuente.
Mayor facilidad para crear animaciones.
Las fuentes variables permiten crear animaciones y transiciones de forma muy sencilla, ya que la propia fuente lo permite. Por lo tanto no es necesario acudir a vídeos u otras estrategias que suelen implicar ficheros de mucho peso para lograrlo.
Con este tipo de fuentes es posible realizar cambios y animaciones desde el propio código.
Mayores posibilidades de diseño.
Por último pero no menos importante, las posibilidades que ofrecen en cuanto a diseño no tienen nada que ver con las fuentes tradicionales.
Antes los diseñadores estaban limitados a los pesos disponibles, que en algunos casos podría ser blod, regular y light. Esto suponía un problema porque limita mucho las opciones a la hora de crear jerarquías en los textos de forma armónica.
Ahora esa limitación simplemente no existe, ya que puedes crear infinitas combinaciones para crear las jerarquías, diseños o contrastes que quieras.
Ejemplos de fuentes variables
La tipografía “Inter” es una fuente desarrollada por Rasmus Andersson y es utilizada por grandes marcas como Unity, Pixar, GitHub, Mozilla, Figma entre muchos otros por sus características y buena legibilidad en pantallas.
La tipografía Inter es un ejemplo de tipografía variable.
Y como lo mejor es que experimentes en con tus propios ojos lo que ofrecen las fuentes variables, te invitamos a que visites Dinamo Pipeline, web creada por el estudio suizo Dinamo donde puedes experimentar con varias fuentes variables creadas por ellos mismos.
El futuro de las fuentes variables
Parece que el futuro tipográfico va a pasar por este tipo de fuentes, que como hemos visto ofrecen mucha más versatilidad y rendimiento.
Quizá lleguemos a un punto en el que tengamos que decir adiós a esa sensación de reconocer una fuente nada más verla, debido a las grandes posibilidades y dinamismo que ofrecen las fuentes variables, y que sin duda muchos diseñadores aprovecharán.
Estas fuentes se pueden adaptar de formas que todavía no hemos visto. Imagina una fuente que gracias a un sistema de reconocimiento facial pueda adaptar su tamaño dependiendo si acercas o alejas la pantalla, o si detecta que el lector es una persona de edad avanzada o que está forzando la vista.
¿Ciencia ficción? No, es el futuro de la tipografía.
