Antes de las fuentes variables, cada combinación de peso, ancho e inclinación de una fuente era un archivo separado. Cuatro pesos × dos estilos (regular + itálico) = ocho archivos de fuente. Con las fuentes variables, toda esa variación puede vivir en un único archivo con ejes de variación continua entre los extremos.
El origen del formato
Las fuentes variables fueron anunciadas en septiembre de 2016 en la conferencia de la ATypI en Warsaw, por un grupo de trabajo de Microsoft, Apple, Google y Adobe. La especificación técnica quedó incorporada en OpenType 1.8 ese mismo año, y el soporte en navegadores web llegó progresivamente entre 2017 y 2018. Desde 2019, la mayoría de los navegadores modernos tienen soporte completo para fuentes variables en CSS.
La propuesta surgió de la confluencia de necesidades diferentes pero convergentes: los diseñadores querían mayor flexibilidad creativa sin la explosión exponencial de archivos de fuente; los ingenieros de plataformas necesitaban reducir el peso total de fuentes cargadas en dispositivos con recursos limitados; los diseñadores de tipo querían poder expresar la variación continua que siempre había existido en el espacio de diseño entre los extremos de peso o ancho.
Los ejes de variación
Un eje de variación es una dimensión del espacio de diseño de una fuente que puede modificarse continuamente entre dos valores extremos. Los ejes están definidos por una etiqueta de cuatro caracteres y un rango de valores numéricos.
Ejes registrados (estándar)
El consorcio OpenType ha registrado cinco ejes estándar que tienen nombres de CSS dedicados:
- wght (Weight / font-weight): peso de la fuente, desde ultralight (100) hasta ultrablack (900). El eje más común en fuentes variables.
- wdth (Width / font-stretch): ancho de los caracteres, de condensado a expandido (generalmente de 50 a 200, representando el porcentaje del ancho normal).
- ital (Italic): alternancia entre romano e itálico; valores 0 (roman) y 1 (italic).
- slnt (Slant / font-style: oblique): inclinación del trazo, medida en grados; permite oblicuas continuas sin cambiar las formas de las letras.
- opsz (Optical Size / font-optical-sizing): ajuste óptico según el tamaño de uso; modifica el grosor del trazo, el espaciado y otros parámetros según el tamaño al que se renderiza la fuente.
Ejes personalizados
Los diseñadores de fuentes pueden definir ejes propios, identificados por etiquetas de cuatro letras en mayúscula (para distinguirlos de los ejes registrados en minúscula). Ejemplos de ejes personalizados incluyen: contraste visual (CONT), expresividad (XPRN), densidad (DENS), altura x (YTAS, YTLC), o parámetros específicos de un diseño como la "liquidez" de los trazos en algunas fuentes experimentales.
Implementación en CSS
Las fuentes variables se implementan en CSS mediante la propiedad font-variation-settings, que acepta pares de nombre de eje y valor. Los ejes estándar también pueden controlarse mediante sus propiedades CSS dedicadas.
Para controlar los ejes estándar con propiedades CSS nativas:
font-weight: 350— cualquier valor entre 1 y 999, no solo múltiplos de 100font-stretch: 75%— porcentaje de anchofont-style: oblique 12deg— inclinación en gradosfont-optical-sizing: auto— activar ajuste óptico automático según tamaño
Para ejes personalizados, o para controlar múltiples ejes simultáneamente con mayor precisión:
font-variation-settings: 'wght' 375, 'wdth' 87.5, 'CONT' 0.66;
Una consideración importante: font-variation-settings no hereda de manera acumulativa. Cada instancia de la propiedad reemplaza completamente los valores anteriores. Para evitar problemas con herencia en sistemas de componentes, es mejor usar las propiedades CSS nativas cuando sea posible y reservar font-variation-settings solo para ejes personalizados.
Impacto en rendimiento web
El impacto de las fuentes variables en el rendimiento depende del caso de uso específico. Para proyectos que solo usan un único peso de una fuente, una fuente estática puede ser más pequeña que la variable. El beneficio real aparece cuando se usan múltiples pesos o variantes: un sitio que carga regular, medium, semibold, bold y sus itálicas en una fuente estática puede cargar 5-8 archivos de 40-80 KB cada uno; la fuente variable equivalente puede ser un único archivo de 150-200 KB, representando una reducción real del tamaño total transferido.
Más allá del peso del archivo, las fuentes variables eliminan múltiples solicitudes HTTP (aunque HTTP/2 mitiga este problema con multiplexación), simplifican la gestión del caché de fuentes y reducen la complejidad de la declaración @font-face en CSS.
Fuentes variables de referencia en 2025
| Fuente | Ejes disponibles | Categoría | Acceso |
|---|---|---|---|
| Recursive | wght, slnt, MONO, CASL, CRSV | Sans-serif / Monoespaciada | Gratuita (Google Fonts) |
| Amstelvar | wght, wdth, opsz, XOPQ, YOPQ, XTRA | Serif de texto | Gratuita (Google Fonts) |
| Fraunces | wght, opsz, SOFT, WONK | Serif display | Gratuita (Google Fonts) |
| Roboto Flex | wght, wdth, opsz, slnt, GRAD, + más | Sans-serif humanística | Gratuita (Google Fonts) |
| Acumin Variable | wght, wdth | Sans-serif neogrotesca | Adobe Fonts |