Las variable fonts han pasado de experimento a infraestructura básica del diseño web. En 2026, cargar siete archivos WOFF2 distintos para una misma familia es tirar rendimiento a la basura. Si todavía lo haces, este post es para ti.
Te explico qué son de verdad, cómo funcionan sus ejes, cómo cargarlas y animarlas con CSS, qué fuentes vale la pena seguir en 2026 y cuándo migrar tu proyecto actual. Sin marketing de fundiciones: solo lo accionable.
Qué es una variable font (de verdad)
Una variable font es un archivo único que contiene múltiples variantes interpolables a lo largo de uno o varios ejes. En lugar de cargar ocho archivos (uno por peso) tienes uno solo, y le pides al navegador que renderice la variante exacta que necesitas en cada momento.
La consecuencia práctica: menos peso descargado, menos peticiones HTTP, transiciones suaves entre estilos y un control tipográfico que con archivos estáticos era inviable.
Los 5 ejes principales que debes conocer
| Eje | Código | Qué hace | Rango típico |
|---|---|---|---|
| Peso | wght | De Thin a Black | 100-900 |
| Ancho | wdth | Condensada a expandida | 50-200 |
| Oblicuidad | slnt | Inclinación en grados | -15 a 0 |
| Tamaño óptico | opsz | Ajustes para cuerpos pequeños o grandes | 8-144 |
| Itálica | ital | Activar cursiva (binario) | 0 o 1 |
Algunas fuentes añaden ejes custom (GRAD, YOPQ, MONO). Son específicos del diseño de cada fuente y no están registrados como estándar. Cuando los uses, comprueba siempre la documentación de la fuente concreta.
Cómo cargar una variable font en tu web
La declaración correcta usa font-weight: 100 900 (un rango) en lugar de un valor fijo. Así le dices al navegador que la fuente acepta cualquier peso dentro de ese rango.
@font-face {
font-family: 'Inter';
src: url('inter-var.woff2') format('woff2-variations');
font-weight: 100 900;
font-display: swap;
}Luego, en cualquier elemento, pides el peso que quieras (entero o decimal) y el navegador interpola:
h1 { font-weight: 850; }
p { font-weight: 380; }Animar una variable font con CSS
Animar peso y ancho es trivial con font-variation-settings. Lo combinas con transition o animation y obtienes efectos imposibles con tipografías estáticas.
h1 {
font-variation-settings: 'wght' 400, 'wdth' 100;
transition: font-variation-settings 0.4s ease;
}
h1:hover {
font-variation-settings: 'wght' 800, 'wdth' 120;
}Si lo combinas con animation-timeline: scroll(), puedes hacer que el peso de un titular cambie a medida que el usuario baja por la página. Cero JavaScript y sin penalizar el rendimiento. Es la misma lógica de las animaciones con CSS llevada a la tipografía.
10 variable fonts destacadas en 2026
He escogido fuentes con licencia clara (la mayoría gratis para uso comercial vía Google Fonts u OFL), buen soporte de ejes y uso real probado.
1. Inter
El estándar de facto para interfaces. Nueve pesos interpolables, tamaño óptico opcional e itálica. Si dudas, empieza por aquí.
2. Manrope
Sans serif moderna con personalidad, de Mikhail Sharanda, con eje de peso completo. Buena alternativa a Inter cuando buscas algo con más carácter.
3. Plus Jakarta Sans
Variable con ejes de peso e itálica. Aire más cálido que Inter, ideal para webs con tono cercano y branding humano.
4. Bricolage Grotesque
Variable con cuatro ejes (wght, wdth, opsz, ital). Diseñada por Mathieu Triay, con una personalidad editorial muy de 2026. Excelente para titulares.
5. Recursive
Una de las variables más versátiles que existen. Cinco ejes, incluyendo casual y monospace. Sirve para texto, código y display en un solo archivo.
6. Roboto Flex
La evolución variable de Roboto. Más de una docena de ejes (incluyendo GRAD, YOPQ, XTRA) para un control extremo. Para proyectos que necesitan flexibilidad tipográfica industrial.
7. Mona Sans (GitHub)
Sans serif variable con ejes de peso y ancho. Pensada para interfaces densas tipo dashboard. Open source bajo licencia OFL.
8. DM Sans
Sans serif geométrica con eje de peso 100-1000 e itálica. Muy usada en SaaS modernos. Excelente legibilidad en cuerpo pequeño.
9. Fraunces
Serif variable con ejes de display y mood (SOFT, WONK). Personalidad fuerte, especialmente buena para marcas con tono editorial.
10. JetBrains Mono
La monoespaciada variable de referencia. Eje de peso completo y excelente para bloques de código en la web. Combínala con una buena pareja tipográfica para el cuerpo.
Tip: Si necesitas variable fonts premium con licencia comercial garantizada para clientes, Adobe Fonts ya incluye centenares de variables en su catálogo Creative Cloud.
Cómo migrar un proyecto de fuentes estáticas a variables
- Inventaría las fuentes y pesos que cargas hoy.
- Comprueba en Google Fonts o en la fundición si existe la versión variable.
- Sustituye los
@font-faceestáticos por uno solo con rango de pesos. - Elimina las cargas duplicadas del
link rel="preload"y deja solo la variable. - Audita el rendimiento con Lighthouse antes y después.
En mis proyectos he visto reducciones de 200-300 KB en el total de fuentes y mejoras de 0,3-0,5 s en LCP solo con esta migración. El retorno es enorme. Si quieres exprimir más el rendimiento, combínalo con estos ajustes de CSS para móvil.
Errores comunes que conviene evitar
- Cargar la versión variable y mantener las estáticas en paralelo: doble peso por error.
- Olvidar
font-display: swap: tu texto queda invisible durante la carga. - Animar
font-variation-settingssobre cuerpos enormes de texto: repaint costoso. - Usar ejes custom sin fallback: si la fuente falla, el estilo queda raro.
Más recursos de tipografía
- Tipografía exagerada en diseño web: cómo aplicarla sin romper la UX
- Convertir tipografía a otro formato con herramientas online
- Cómo instalar fuentes en Figma
- Toda la sección de tipografía del blog
Preguntas frecuentes sobre variable fonts
¿Qué es una variable font?
Es un archivo de fuente único que contiene múltiples variantes interpolables a lo largo de uno o varios ejes (peso, ancho, oblicuidad, tamaño óptico, itálica). En lugar de cargar ocho archivos, cargas uno y el navegador renderiza el estilo exacto que pidas.
¿Pesa menos una variable font que sus variantes estáticas?
Casi siempre. Una variable con nueve pesos suele ocupar entre 30 KB y 80 KB; las nueve estáticas equivalentes suman fácilmente 250-400 KB. Mejora directa de LCP y Core Web Vitals sin tocar nada más.
¿Cómo se llaman los ejes como «wght»?
Los ejes registrados son wght (peso, 100-900), wdth (ancho), slnt (oblicuidad en grados), opsz (tamaño óptico) e ital (itálica, 0 o 1). Algunas fuentes añaden ejes custom como GRAD o YOPQ para usos específicos.
¿Tienen soporte cross-browser en 2026?
Sí. Las variable fonts tienen soporte en Chrome, Safari, Firefox y Edge desde hace años. En 2026 son infraestructura, no una novedad experimental. No necesitas fallback para usuarios actuales.
¿Animar el peso afecta al rendimiento?
Mínimo si lo haces con transiciones o animation sobre font-variation-settings. Lo costoso es el repaint, no el cálculo de la variación; en proyectos de tamaño medio el coste es despreciable.
¿Las variable fonts son accesibles?
Sí, incluso mejor que muchas estáticas: puedes ajustar el tamaño óptico para la legibilidad en cuerpos pequeños y respetar las preferencias del sistema del usuario. Cumplen WCAG sin problema.
¿Dónde encuentro variable fonts gratis?
Google Fonts tiene un filtro específico para variables; también Fontshare y repositorios de GitHub. Adobe Fonts y MyFonts ofrecen las premium con licencia comercial clara para proyectos de cliente.
¿Vale la pena migrar mi proyecto actual?
Si tu sitio carga seis o más variantes estáticas de la misma familia, sí. Ahorro de peso, mejora de rendimiento y flexibilidad para animar son retorno inmediato. La migración suele ser cuestión de una tarde.
Tienes tres caminos según tu situación
- Proyecto nuevo: usa Inter o Bricolage Grotesque variable desde el primer día. Empieza correcto.
- Sitio existente: dedica una tarde a migrar la familia principal. Ganas peso, rendimiento y flexibilidad.
- Te apasiona la tipografía: explora Recursive y Roboto Flex con sus ejes custom. Abren posibilidades expresivas imposibles con estáticas.
¿Cuál es tu variable font favorita? Cuéntamelo en los comentarios y comparte el enlace a tu proyecto si aplicas alguna. Que las disfrutes.
