Fuentes variables en diseño web: qué son y cómo usarlas
Qué son las fuentes variables, cómo funcionan sus ejes y cómo usarlas con CSS para ganar flexibilidad sin cargar decenas de archivos.
En este artículo vamos a ver qué es una fuente variable, qué significan sus ejes y cómo utilizarla en CSS. También veremos cuándo realmente aporta una ventaja y cuándo una familia estática sigue siendo una solución más sencilla.
Una fuente variable contiene muchas posibilidades
En una familia estática solemos descargar archivos separados: regular, medium, bold, quizá una versión condensada y otra cursiva. Una fuente variable puede guardar dentro de un mismo archivo un rango continuo de variaciones.
La tecnología se incorporó a OpenType 1.8 en 2016 con el nombre OpenType Font Variations. Tim Brown la describía poco después como una fuente capaz de comportarse como muchas fuentes. Esa definición sigue siendo muy útil, pero la parte interesante está en cómo se organiza ese comportamiento.
Una fuente variable define uno o varios ejes. Cada eje representa una dimensión que puede cambiar: peso, ancho, inclinación, tamaño óptico o cualquier característica que el diseñador de la tipografía haya decidido parametrizar.
Los cinco ejes registrados
OpenType define etiquetas estándar de cuatro letras para los ejes estándar:
wght: peso.wdth: ancho.ital: cursiva.slnt: inclinación.opsz: tamaño óptico.
Además exite la posibilidad de crear ejes personalizados. Una fundición puede crear un eje para contraste, altura de x, longitud de ascendentes, forma de los remates o cualquier otra parte del diseño. Por convención, los ejes registrados se escriben en minúsculas y los personalizados suelen usar mayúsculas.
Declara el rango real de la fuente en @font-face
Si una variable cubre pesos de 100 a 900, no la declares como si solo fuera regular. El navegador necesita conocer el rango:
@font-face {
font-family: "Mi Variable";
src: url("mi-variable.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}Si también incluye un eje de ancho compatible con font-stretch, puedes declarar su rango en la misma regla.
h1 {
font-family: "Mi Variable", system-ui, sans-serif;
font-weight: 720;
}No estamos limitados a 700 u 800. Podemos elegir un valor intermedio que encaje mejor con el tamaño, el color tipográfico y la jerarquía.
Usa propiedades CSS normales antes que font-variation-settings
font-variation-settings permite controlar directamente los ejes, pero es una API de bajo nivel. Para los ejes registrados conviene utilizar primero las propiedades creadas para ellos:
font-weightparawght.font-stretchparawdth.font-styleparaitalyslnt.font-optical-sizingparaopsz.
Reserva font-variation-settings para ejes personalizados o casos en los que necesites un control que las propiedades estándar no expresan:
.logo {
font-variation-settings: "GRAD" 50;
}Esto hace el CSS más legible y permite que el navegador gestione mejor la cascada y las capacidades de la fuente.
El tamaño óptico es uno de los usos más interesantes
El eje opsz recupera una práctica tipográfica anterior a la composición digital. Cuando una tipografía se dibujaba para tamaños pequeños, los trazos se reforzaban, el espaciado podía abrirse y algunos detalles se simplificaban. Para tamaños grandes se permitían más contraste y detalles finos.
Una fuente variable con tamaño óptico puede hacer esas correcciones dentro del mismo archivo. En la mayoría de los casos basta con:
body {
font-optical-sizing: auto;
}El navegador relacionará el tamaño óptico con font-size si la fuente incorpora ese eje. MDN recomienda utilizar el control numérico de opsz solo cuando exista una razón concreta para separarlo del tamaño real.
Las variables permiten una jerarquía más fina
Una de las ventajas prácticas es dejar de pensar en una escala de cuatro pesos cerrados. Un texto pequeño puede necesitar algo menos de peso para mantener claridad, mientras que un titular enorme puede sostenerse con un peso mayor.
También podemos ajustar ligeramente el ancho en componentes que tienen restricciones reales. Un título de tarjeta puede utilizar una instancia algo más condensada en un rango estrecho sin saltar a una familia completamente diferente.
La clave está en que el ajuste responda a una necesidad tipográfica. Si cambiamos peso, ancho y contraste en cada punto de ruptura solo porque podemos, el sistema se vuelve difícil de mantener y la identidad empieza a complicarse más de lo que ayuda.
Una fuente variable también puede animarse
Una fuente variable no cambia automáticamente cuando cambia el tamaño de la pantalla. Pero sus ejes continuos nos permiten hacer algo que una familia basada en archivos estáticos no puede resolver de la misma forma: recorrer todos los valores intermedios de un eje.
Podemos verlo mejor con un ejemplo. En este titular vamos a combinar dos cosas distintas: clamp() hará que el tamaño de la letra se adapte al espacio disponible y una animación modificará progresivamente el peso y la anchura de la fuente.
<p class="variable-title">Fuentes variables</p>
.variable-title {
font-family: "Archivo", sans-serif;
font-size: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
font-variation-settings:
"wght" 400,
"wdth" 100;
animation: variable-type 4s ease-in-out infinite alternate;
}
@keyframes variable-type {
to {
font-variation-settings:
"wght" 750,
"wdth" 75;
}
}
@media (prefers-reduced-motion: reduce) {
.variable-title {
animation: none;
}
}En este ejemplo ocurren dos transformaciones independientes.
El tamaño cambia de forma fluida gracias a clamp(): será más contenido cuando haya poco espacio y crecerá progresivamente hasta alcanzar el máximo que hemos definido.
Al mismo tiempo, la fuente recorre los ejes wght y wdth. No pasa de golpe de Regular a Bold ni de una versión normal a otra condensada. El navegador puede representar todos los valores intermedios que la fuente admita.
Esta continuidad es una de las características más interesantes de las tipografías variables. Podemos utilizarla para encontrar exactamente el peso o la anchura que necesita un diseño, para adaptar determinados valores según el contexto o, como en este ejemplo, para crear una animación tipográfica.
Eso no significa que debamos poner textos moviéndose continuamente en una web. Aquí la animación nos sirve para hacer visible cómo funciona una fuente variable. En una interfaz real, cualquier movimiento debería responder a una intención concreta y respetar además la preferencia prefers-reduced-motion de las personas que han pedido reducir las animaciones.
Cuidado con animar los ejes
Los ejes variables son animables y permiten efectos visuales muy atractivos. En una demo tipográfica pueden ser estupendos. En una interfaz de negocio conviene separar expresividad de ruido.
Una animación continua de peso o ancho puede alterar la legibilidad y distraer de una tarea. Si el movimiento comunica un estado o forma parte de una interacción, respeta prefers-reduced-motion y asegúrate de que el texto sigue siendo legible en todos los puntos de la animación.
¿Una fuente variable pesa menos?
Puede pesar menos que varias fuentes estáticas equivalentes, pero la comparación correcta es con los archivos que realmente necesitarías.
Si tu diseño carga regular, medium, bold y sus cursivas, una fuente variable bien optimizada puede reducir peticiones y bytes. Si solo necesitas regular y bold de un alfabeto reducido, dos WOFF2 estáticas pueden ser más pequeñas que una variable que contenga un espacio de diseño muy grande.
Por eso la optimización no se decide por tecnología. Se mide el archivo variable, se compara con el conjunto estático, se revisa el subsetting y se elige la opción que mejor equilibra flexibilidad y coste.
Lo importante es que no limites tu creatividad o la optimización de la experiencia de usuario por usar fuentes limitadas y que tengas en cuenta que puedes optar por una fuente variable.
Cómo encajan en WordPress
WordPress puede registrar una variable font en theme.json declarando un rango de fontWeight dentro de fontFace. La familia queda disponible como preset y los pesos estándar pueden aplicarse desde el sistema de estilos.
Los ejes personalizados siguen necesitando CSS específico (o propiedades de bajo nivel en theme.json cuando corresponda), así que no conviene diseñar un sistema cuyo funcionamiento dependa de controles que el editor no expone claramente a quien va a mantener la web.
Cuándo la elegiría
Una fuente variable me parece especialmente interesante cuando una misma familia tiene que resolver muchos niveles tipográficos, cuando necesitamos varios pesos o anchos, cuando dispone de un buen eje óptico o cuando queremos construir un sistema flexible sin usar demasiados archivos.
Si el proyecto solo necesita dos estilos y la familia estática ya funciona perfectamente, no hay ninguna obligación de complicarlo.
La mejor ventaja de las fuentes variables es poder hacer ajustes tipográficos y coherentes para mejorar la expresión de la marca del negocio y la experiencia de usuario sin que sea en detrimento de la velocidad de carga de la web.
Te lo ha contado
Ana Cirujano
Soy diseñadora y ayudo a negocios online a fortalecer su marca, mejorar la experiencia de usuario y obtener mejores resultados.
