La tipografía puede cambiar por completo la personalidad de una página web. Una misma palabra puede transmitir algo elegante, deportivo, tecnológico o divertido simplemente cambiando la fuente, su peso o su ancho. El problema aparece cuando necesitamos muchos estilos diferentes: tradicionalmente, cada variante podía implicar un archivo de fuente adicional.
Aquí es donde entran las fuentes variables.
Las fuentes variables, también conocidas como variable fonts, permiten trabajar con múltiples variaciones de una familia tipográfica desde un mismo archivo. En lugar de tener que descargar una fuente independiente para cada peso, ancho o estilo, una única fuente puede contener un rango de posibilidades que podemos ajustar según nuestras necesidades.
Esto no solo resulta interesante para quienes nos dedicamos al diseño. También puede ser especialmente útil en desarrollo web, donde cada recurso que añadimos a una página puede tener consecuencias sobre su carga y rendimiento.
De hecho, yo descubrí las fuentes variables bastante tarde. Mientras investigaba para escribir este artículo, me di cuenta de que podrían haberme ahorrado bastante trabajo en uno de mis últimos proyectos: una página que diseñé relacionada con el Mundial de fútbol. Allí utilicé muchos estilos de tipografía porque quería que el sitio resultara visualmente interesante. En ese momento no conocía esta posibilidad.
Y después de descubrirla, pensé inmediatamente: esto me habría ahorrado bastante tiempo de diseño y de código.
¿Qué son las fuentes variables?
Para entender las fuentes variables, primero hay que pensar en cómo funcionaban tradicionalmente las familias tipográficas.
Una familia podía tener diferentes estilos: regular, negrita, cursiva, seminegrita, condensada, etc. Cada uno de esos estilos podía estar representado mediante un archivo de fuente diferente. Así, si queríamos utilizar cuatro pesos y sus versiones en cursiva, terminábamos gestionando varios archivos.
Las fuentes variables cambian este planteamiento. En lugar de almacenar cada estilo como un archivo independiente, pueden reunir diferentes variaciones dentro de un único archivo y permitirnos desplazarnos por determinados ejes de variación.
Una forma sencilla de imaginarlo es pensar en un control deslizante.
En una fuente tradicional podríamos tener:
- Regular.
- Medium.
- Semibold.
- Bold.
Son cuatro opciones concretas.
En una fuente variable, dependiendo de cómo haya sido diseñada, podemos tener un eje de peso que nos permita desplazarnos por un rango mucho más amplio. No estamos limitados necesariamente a escoger entre cuatro archivos predeterminados: podemos seleccionar valores dentro del rango que ofrece la tipografía. Esto proporciona un nivel de control mucho mayor.
Y aquí conviene hacer una pequeña distinción. Una tipografía es el diseño visual que vemos, mientras que una fuente es una implementación digital de ese diseño. Además, una familia tipográfica puede contener múltiples estilos. Esta diferencia puede parecer demasiado técnica al principio, pero ayuda a entender por qué una fuente variable puede contener diferentes instancias de una misma familia.
En términos prácticos, lo importante es esto: una fuente variable permite modificar determinadas características de la tipografía sin tener que cargar necesariamente un archivo diferente para cada variación.
¿Cómo funcionan las fuentes variables?
La clave está en los llamados ejes de variación.
Una fuente variable parte de determinados diseños y permite interpolar entre ellos. El ejemplo más fácil de entender es el peso. Imagina una tipografía que tiene un diseño ligero y otro mucho más grueso. El eje de peso permite desplazarnos entre esos extremos y obtener diferentes instancias intermedias.
Por eso una fuente variable no debería entenderse simplemente como una colección de fuentes tradicionales empaquetadas. Su funcionamiento permite trabajar con un espacio de diseño en el que diferentes características pueden combinarse.
Una misma fuente puede tener, por ejemplo, un eje para el peso y otro para el ancho. Podemos modificar ambos y obtener una combinación concreta. Esto abre muchas posibilidades para el diseño.
Los ejes de variación de una fuente
Existen cinco ejes registrados habituales:
- Peso (wght): controla el grosor de los caracteres.
- Ancho (wdth): permite hacer la tipografía más estrecha o más ancha.
- Inclinación (slnt): modifica la inclinación.
- Tamaño óptico (opsz): permite adaptar el diseño de los caracteres al tamaño al que se muestran.
- Cursiva (ital): permite alternar entre versiones normales y cursivas cuando la fuente incorpora este eje.
Además, una fuente variable puede incluir ejes personalizados creados por el diseñador tipográfico para controlar características específicas.
No todas las fuentes variables tienen los mismos ejes ni los mismos rangos. Por eso, antes de descargar una fuente, conviene comprobar qué posibilidades ofrece.
Esta es precisamente una de las partes que más me llamaron la atención cuando empecé a experimentar con ellas. Puedes modificar características como el peso o el ancho y ver inmediatamente cómo cambia la apariencia de la tipografía.
Para alguien que disfruta del diseño tipográfico, puede convertirse fácilmente en un pequeño agujero negro de productividad.
En mi caso, pasé literalmente horas jugando con estas tipografías en mis proyectos.
Fuentes variables frente a fuentes estáticas
La diferencia fundamental es la flexibilidad. Con una fuente estática, cada estilo disponible está definido previamente. Si una familia tiene Regular, Medium, Bold y Black, utilizamos esas variantes concretas.
Con una fuente variable, podemos disponer de un rango continuo para determinados ejes.
Esto no significa que las fuentes variables sean siempre la mejor opción. Si un proyecto solamente necesita un único estilo de una fuente, utilizar una variable puede no producir una ventaja de tamaño. De hecho, Google señala que una fuente variable con muchos ejes no necesariamente será más pequeña que una fuente estática si solo necesitamos una variante.
La ventaja aparece especialmente cuando necesitamos varias variaciones de una misma familia.
¿Para qué sirven las fuentes variables?
La respuesta corta sería: para tener un mayor control sobre la tipografía utilizando menos archivos y más posibilidades de variación. Pero sus aplicaciones son bastante más interesantes.
Podemos utilizar fuentes variables para crear títulos con diferentes pesos y anchos, adaptar la tipografía a diferentes espacios, diseñar interfaces con una jerarquía tipográfica más precisa o incluso crear efectos y animaciones.
También son especialmente interesantes cuando el diseño necesita muchos estilos. Esto fue precisamente lo que me hizo pensar en mi proyecto del Mundial.
En aquella página quería utilizar diferentes estilos tipográficos para conseguir una apariencia más interesante. El resultado requería bastante trabajo porque había que pensar en las diferentes variantes y en cómo implementarlas.
Si hubiera conocido entonces las fuentes variables, probablemente habría podido experimentar mucho más rápidamente con los estilos y simplificar parte del trabajo.
Crear más estilos tipográficos con mayor libertad
Una de las principales ventajas de las fuentes variables es que permiten salir de la lógica de “regular, negrita y poco más”.
Podemos ajustar una tipografía para que encaje mejor en un espacio determinado. Un título puede necesitar una versión más estrecha para evitar que ocupe demasiado espacio. Otro elemento puede funcionar mejor con un peso intermedio.
En lugar de cambiar de fuente o buscar otra variante ya diseñada, podemos modificar el eje correspondiente, siempre dentro de las posibilidades que ofrece la tipografía.
Esto resulta especialmente atractivo en proyectos donde la identidad visual depende mucho de la tipografía.
Una página relacionada con deportes, por ejemplo, puede beneficiarse de titulares contundentes y compactos, mientras que el cuerpo de texto puede necesitar una configuración mucho más cómoda para la lectura.
Las fuentes variables permiten experimentar con esas diferencias sin tener que crear una familia completamente distinta para cada necesidad.
También pueden utilizarse con fines más creativos. Algunas fuentes incluyen ejes que permiten modificar aspectos mucho más particulares de sus formas, e incluso existen ejemplos de fuentes variables utilizadas para animación y experimentación tipográfica.
Eso sí, hay una regla que no conviene olvidar: que podamos modificar una tipografía no significa que debamos hacerlo sin límite. Una configuración demasiado experimental puede afectar a la legibilidad, especialmente en textos largos.
Ventajas de utilizar fuentes variables
Las fuentes variables tienen varias ventajas, aunque conviene evitar la idea de que son automáticamente mejores en cualquier situación.
Mayor control sobre la tipografía
La primera ventaja es evidente: tenemos más control.
Podemos modificar el peso, el ancho, la inclinación u otros parámetros disponibles en la fuente. Esto permite ajustar una tipografía con mayor precisión a las necesidades de un diseño.
Para alguien que trabaja en diseño, esto puede resultar mucho más cómodo que estar descargando y probando diferentes archivos.
En mi caso, precisamente esa posibilidad de cambiar el peso y el ancho antes de descargar la tipografía fue una de las cosas que más me gustó. Puedes experimentar, comparar y decidir qué configuración encaja mejor con tu proyecto.
Menos archivos tipográficos que gestionar
Otra ventaja importante aparece cuando necesitamos muchos estilos. En una implementación tradicional, cada estilo puede requerir un archivo independiente. Con las fuentes variables, diferentes estilos pueden estar contenidos en un solo archivo.
Eso simplifica la gestión de recursos y puede facilitar el trabajo tanto para diseñadores como para desarrolladores.
No significa que siempre vayamos a utilizar menos datos. El tamaño final depende de la fuente concreta, de los ejes que contenga y de las variantes que necesitemos. Pero cuando un proyecto utiliza muchas variantes de una familia, el ahorro potencial puede ser considerable.
Posibles beneficios para el rendimiento web
Este punto es especialmente interesante para cualquier persona que diseñe páginas web.
Cada fuente que descargamos representa recursos que el navegador tiene que obtener y procesar. Con las fuentes web tradicionales, utilizar numerosos estilos puede aumentar la cantidad de archivos y datos necesarios. El artículo de Google explica que las fuentes variables pueden reducir significativamente el tamaño cuando sustituyen múltiples fuentes estáticas. En un experimento citado por web.dev, combinar 48 fuentes individuales en un archivo variable produjo una reducción del 88 % en el tamaño del archivo.
Pero hay que quedarse con una idea importante: no debemos asumir que una fuente variable siempre hará que nuestra web pese menos.
Si solo necesitamos una fuente regular, por ejemplo, cambiarla por una fuente variable con muchos ejes puede no representar ninguna ventaja neta de tamaño. El beneficio depende del caso de uso.
Aun así, cuando necesitamos diferentes pesos, anchos y estilos, la posibilidad de concentrarlos en un recurso puede ser muy interesante.
Y para mí este punto tiene todavía más sentido después de haber trabajado en proyectos web. Hoy una página no solo tiene que verse bien: también tiene que ofrecer una buena experiencia de usuario. Una web que tarda demasiado en cargar puede terminar frustrando al visitante.
Por eso, cuando descubrí que las fuentes variables también podían ayudar a gestionar mejor los recursos tipográficos, pensé en cuánto trabajo me podrían haber ahorrado en aquel proyecto del Mundial.
¿Cómo utilizar fuentes variables en una página web?
Utilizar una fuente variable no significa que tengamos que reconstruir nuestra página desde cero.
Las fuentes variables se cargan mediante @font-face, igual que las fuentes web tradicionales, aunque podemos especificar rangos para determinados ejes. Por ejemplo, CSS permite indicar un rango de pesos o de anchos que admite una fuente.
Un ejemplo sencillo sería:
@font-face {
font-family: "MiFuenteVariable";
src: url("mi-fuente-variable.woff2") format("woff2");
font-weight: 100 900;
}En este caso, estamos indicando que la fuente puede trabajar con pesos comprendidos entre 100 y 900.
Después podemos utilizar valores concretos:
.titulo {
font-family: "MiFuenteVariable", sans-serif;
font-weight: 650;
}La diferencia respecto a una fuente tradicional es que no estamos necesariamente limitados a los valores habituales de 400 o 700. Podemos seleccionar un valor dentro del rango que proporcione la fuente.
Para el ancho podemos utilizar font-stretch cuando la fuente lo permita:
.subtitulo {
font-stretch: 80%;
}Los valores disponibles dependerán siempre de la fuente que hayas elegido.
Elegir y descargar una fuente variable
Aquí es donde el proceso puede resultar especialmente divertido.
Existen catálogos como Google Fonts donde podemos encontrar fuentes variables y consultar las variaciones disponibles. Google Fonts ofrece fuentes variables y permite consultar los ejes y valores de las familias que los incorporan.
Antes de descargar una tipografía, conviene revisar:
- Qué ejes tiene disponibles.
- Qué rango ofrece cada eje.
- Qué caracteres incluye.
- Qué licencia tiene.
- Para qué tipo de proyecto vamos a utilizarla.
- Si realmente necesitamos todas las variaciones.
Mi recomendación es no descargar una fuente simplemente porque tenga muchísimas opciones. Primero hay que pensar en el proyecto.
En mi caso, si hubiera tenido esta herramienta durante el diseño de la página del Mundial, habría empezado probando diferentes pesos y anchos para los títulos y elementos destacados. Poder modificar esos parámetros y previsualizar el resultado permite tomar decisiones de diseño mucho más rápido.
Y aquí aparece una de las partes que más me gustan de las fuentes variables: la experimentación.
Si eres de los que disfrutan probando tipografías, puedes pasar mucho tiempo viendo cómo cambia una misma palabra cuando modificas ligeramente su peso, su anchura o su inclinación.
Yo lo hice. Y durante bastante tiempo.
Utilizar una fuente variable con CSS
Además de font-weight y font-stretch, existen otras posibilidades.
Para determinados ejes y configuraciones podemos utilizar font-variation-settings. Esta propiedad permite establecer directamente valores para los ejes de una fuente variable.
Por ejemplo:
.titulo {
font-variation-settings: "wght" 650;
}También podemos combinar diferentes ejes:
.titulo {
font-variation-settings:
"wght" 700,
"wdth" 85;
}La disponibilidad exacta depende de la fuente.
Por eso es importante revisar la documentación de cada familia tipográfica antes de escribir CSS. No todas las fuentes tienen los mismos ejes y los valores permitidos pueden variar considerablemente.
Si vas a utilizar una fuente variable en un proyecto real, conviene probarla en diferentes navegadores y tamaños de pantalla y comprobar que la legibilidad se mantiene.
¿Cómo elegir una fuente variable para un proyecto?
Tener muchas opciones puede ser fantástico, pero también puede complicar una decisión que debería ser relativamente sencilla. Mi primer consejo es empezar por el objetivo del diseño.
¿Necesitas una tipografía para leer artículos durante mucho tiempo? ¿Para titulares? ¿Para una interfaz? ¿Para una identidad visual? ¿Para un proyecto experimental?
La respuesta cambiará completamente la fuente que te conviene utilizar. También revisaría los ejes disponibles.
Una fuente con peso y ancho puede ser suficiente para un proyecto. Otra puede ofrecer además inclinación, tamaño óptico y diferentes ejes personalizados. Más opciones no significan necesariamente una mejor fuente.
La legibilidad debería seguir siendo una prioridad. El propio funcionamiento de las fuentes variables permite crear configuraciones muy llamativas, pero los diseños excesivamente artísticos pueden resultar contraproducentes cuando se utilizan en bloques largos de texto.
También hay que comprobar la licencia. Que puedas descargar una fuente gratuitamente no significa necesariamente que cualquier uso comercial esté permitido bajo las mismas condiciones. Y, por supuesto, hay que mirar el rendimiento.
Si la página solamente necesita una variante concreta, quizá una fuente estática sea suficiente. Si, en cambio, necesitas numerosos pesos y anchos de una misma familia, una fuente variable puede ser mucho más interesante.
¿Merece la pena utilizar fuentes variables?
Después de conocerlas, mi respuesta sería: sí, al menos merece la pena conocerlas y probarlas. No creo que haya que convertir todas las fuentes de nuestros proyectos en fuentes variables simplemente porque sean una tecnología más moderna. Pero sí creo que pueden ser una herramienta fantástica cuando el diseño necesita flexibilidad.
En mi caso, la conclusión llegó un poco tarde. Durante el proyecto que hice para el Mundial utilicé muchos estilos tipográficos para darle personalidad al sitio. Si hubiera conocido entonces las fuentes variables, probablemente habría podido ahorrar tiempo de diseño y también parte del trabajo de implementación. Además, me parece especialmente interesante su relación con el rendimiento.
Cuando diseñamos una web, es fácil concentrarnos únicamente en cómo se ve. Queremos el título perfecto, el peso perfecto, el ancho perfecto y la combinación de tipografías que haga que la página destaque. Pero todo eso tiene que convivir con una página que cargue rápidamente.
Las fuentes variables no son una solución mágica para el rendimiento, pero pueden reducir recursos cuando sustituyen múltiples archivos estáticos y, al mismo tiempo, ofrecen una enorme libertad tipográfica. Para mí, esa combinación es lo realmente interesante.
Y si además disfrutas del diseño de fuentes, probablemente te pase lo mismo que a mí: empiezas probando un par de pesos y terminas pasando horas jugando con todas las posibilidades.
Las fuentes variables cambian la manera en la que podemos trabajar con una familia tipográfica.
En lugar de pensar únicamente en estilos independientes como Regular, Bold o Italic, podemos trabajar con ejes y rangos que nos permiten ajustar características como el peso y el ancho, siempre dentro de las posibilidades que haya definido el diseñador de la fuente.
Para diseño web, esto resulta especialmente interesante porque combina flexibilidad tipográfica, control creativo y una posible mejora en la gestión de recursos.
Y después de haberlas descubierto mientras investigaba para este artículo, tengo bastante claro que las habría aprovechado en mi proyecto del Mundial. En aquella página pasé bastante tiempo buscando y combinando estilos para conseguir el aspecto que quería. Ahora sé que una fuente variable podría haberme dado muchas de esas posibilidades desde un mismo recurso.
Así que mi recomendación es sencilla: pruébalas.
Busca una fuente variable, juega con el peso, modifica el ancho, cambia sus diferentes ejes y mira cómo responde. Si te gusta el diseño tipográfico, probablemente vas a descubrir una herramienta con muchísimo potencial.
Y quizá, como me pasó a mí, termines diciendo: “¿por qué no conocía esto antes?”
