Las fuentes variables son ya el estándar en diseño web en 2026. Un solo archivo trae todos los pesos, y a veces también el ancho o el tamaño óptico. Asà cargas menos ficheros y puedes animar la tipografÃa con CSS. He recopilado las 12 mejores fuentes variables gratis que estoy usando este año, todas con licencia comercial.
De cada una tienes sus ejes reales, el rango de peso y lo que pesa de verdad el archivo: lo he medido fuente a fuente en Google Fonts. Las 12 están ahà con licencia SIL OFL, asà que puedes usarlas en webs de clientes sin pagar nada.
Respuesta rápida: para texto e interfaces, Inter o Plus Jakarta Sans. Para titulares con carácter, Fraunces o Bricolage Grotesque. Y si quieres jugar con muchos ejes en una sola familia, Google Sans Flex.
¿Es la primera vez que usas una? En mi guÃa práctica de variable fonts te explico cada eje y cómo animarlos con código.
Por qué usar fuentes variables en 2026
Las ventajas que más se notan son tres. Descargas menos archivos, animas la letra con uno solo y usas el peso exacto que necesitas: un 450 o un 650, no solo 400 o 700. En proyectos donde la tipografÃa es protagonista (editorial, branding fuerte) las variables son ya la única opción razonable.
Un dato que lo resume. Pide a Google Fonts cuatro pesos de Inter (400, 500, 600 y 700) y te servirá un único archivo de 47 KB. Lo comprobé en octubre de 2026: cuatro reglas @font-face y una sola descarga.
Las 12 fuentes variables gratis recomendadas
Los KB son del archivo woff2 con los caracteres latinos, tal como lo sirve Google Fonts pidiendo solo el eje de peso. Si activas más ejes, el archivo crece: te lo indico entre paréntesis.
1
Inter
Sans serif neutra pensada para pantallas, de Rasmus Andersson. La mejor opción para interfaces: limpia, legible y reconocida. Su eje de tamaño óptico ajusta el dibujo cuando el texto es pequeño.
Ejes: peso 100–900 · tamaño óptico 14–32 · Archivo: 47 KB (71 KB con tamaño óptico)
Google Fonts · SIL OFL · Uso comercial gratis · Descargar
2
Bricolage Grotesque
Grotesca con carácter editorial, de Mathieu Triay, perfecta para titulares con alma. Con el tamaño óptico alto gana contraste y personalidad.
Ejes: peso 200–800 · ancho 75–100 · tamaño óptico 12–96 · Archivo: 40 KB (128 KB con los tres ejes)
Google Fonts · SIL OFL · Uso comercial gratis · Descargar
3
Plus Jakarta Sans
Sans geométrica de Tokotype: limpia, profesional y con personalidad. Encaja en SaaS y branding moderno.
Ejes: peso 200–800 · Archivo: 27 KB
Google Fonts · SIL OFL · Uso comercial gratis · Descargar
4
Manrope
Sans moderna de Mikhail Sharanda. Un reemplazo sólido de Helvetica para interfaces tech, y de las más ligeras de la lista.
Ejes: peso 200–800 · Archivo: 24 KB
Google Fonts · SIL OFL · Uso comercial gratis · Descargar
5
Fraunces
Serif de Undercase Type y una de las más versátiles. Tiene dos ejes propios: SOFT redondea las terminaciones y WONK activa letras con una inclinación caprichosa que le da un carácter único.
Ejes: peso 100–900 · tamaño óptico 9–144 · SOFT 0–100 · WONK 0–1 · Archivo: 36 KB (118 KB con todos)
Google Fonts · SIL OFL · Uso comercial gratis · Descargar
6
Playfair
Serif display de alto contraste, la evolución de la clásica Playfair Display del mismo diseñador, Claus Eggers Sørensen. Perfecta para titulares editoriales con elegancia clásica. Ojo: «Playfair Display» solo varÃa el peso; «Playfair» añade ancho y tamaño óptico.
Ejes: peso 300–900 · ancho 87,5–112,5 · tamaño óptico 5–1200 · Archivo: 55 KB (180 KB con todos)
Google Fonts · SIL OFL · Uso comercial gratis · Descargar
7
Anybody
Display geométrica de Tyler Finck con un eje de ancho enorme: de ultracondensada (50) a ultraexpandida (150). Muy versátil por esa interpolación completa entre ancho y peso.
Ejes: peso 100–900 · ancho 50–150 · Archivo: 23 KB (56 KB con ancho)
Google Fonts · SIL OFL · Uso comercial gratis · Descargar
8
Mona Sans
Sans corporativa diseñada por GitHub junto a Degarism Studio. Excelente para producto tech serio. Su hermana Hubot Sans comparte ejes y tiene un aire más técnico.
Ejes: peso 200–900 · ancho 75–125 · Archivo: 39 KB (96 KB con ancho)
Google Fonts · SIL OFL · Uso comercial gratis · Descargar
9
Google Sans Flex
La tipografÃa de marca de Google, liberada como código abierto en noviembre de 2025. Tiene cinco ejes, entre ellos ROND, que redondea las esquinas de las letras. Ojo con el peso: con solo el eje de peso son 50 KB; con los cinco, casi 1 MB.
Ejes: peso 1–1000 · ancho 25–151 · tamaño óptico 1–144 · inclinación −10–0 · redondez 0–100 · Archivo: 50 KB (117 KB con ancho, 1.009 KB con todos)
Google Fonts · SIL OFL · Uso comercial gratis · Descargar
10
Space Grotesk
Sans de Florian Karsten derivada de la Space Mono: toque cyber sin perder legibilidad. Ideal para marcas tech con actitud, y la más ligera de las 12.
Ejes: peso 300–700 · Archivo: 22 KB
Google Fonts · SIL OFL · Uso comercial gratis · Descargar
11
Outfit
Sans geométrica suave, con un rango de peso completo de 100 a 900. Excelente para interfaces minimalistas con calidez.
Ejes: peso 100–900 · Archivo: 32 KB
Google Fonts · SIL OFL · Uso comercial gratis · Descargar
12
Big Shoulders
Display alta y condensada de Patric King, perfecta para hero sections con impacto. La antigua Big Shoulders Display ya no existe como familia aparte en Google Fonts: ahora es Big Shoulders, con eje de tamaño óptico.
Ejes: peso 100–900 · tamaño óptico 10–72 · Archivo: 36 KB (57 KB con tamaño óptico)
Google Fonts · SIL OFL · Uso comercial gratis · Descargar
¿Necesitas más? Si buscas familias con más personalidad y licencia comercial sin revisarlas una a una, en Envato Elements tienes miles de fuentes con una sola suscripción. No todas son variables: revisa los formatos en la ficha de cada una.
Tabla resumen
| Fuente | Estilo | Ejes | KB (solo peso) | Mejor para |
|---|---|---|---|---|
| Inter | Sans neutra | wght, opsz | 47 | UI tech |
| Bricolage Grotesque | Grotesca editorial | wght, wdth, opsz | 40 | Editorial moderna |
| Plus Jakarta Sans | Sans geométrica | wght | 27 | SaaS, branding |
| Manrope | Sans moderna | wght | 24 | Interfaces serias |
| Fraunces | Serif con SOFT y WONK | wght, opsz, SOFT, WONK | 36 | Editorial creativa |
| Playfair | Serif display | wght, wdth, opsz | 55 | Titulares elegantes |
| Anybody | Display | wght, wdth | 23 | Branding fuerte |
| Mona Sans | Sans tech | wght, wdth | 39 | Producto B2B |
| Google Sans Flex | Sans multieje | wght, wdth, opsz, slnt, ROND | 50 | Sistemas de diseño |
| Space Grotesk | Sans cyber | wght | 22 | Tech con actitud |
| Outfit | Sans suave | wght | 32 | Minimal cálido |
| Big Shoulders | Display condensada | wght, opsz | 36 | Hero impactantes |
Pide solo los ejes que vas a usar
Es el error que más peso añade sin que te des cuenta. Cada eje extra mete más datos en el archivo, y la diferencia puede ser enorme:
| Fuente | Solo peso | Todos los ejes | Diferencia |
|---|---|---|---|
| Inter | 47 KB | 71 KB | ×1,5 |
| Bricolage Grotesque | 40 KB | 128 KB | ×3,2 |
| Fraunces | 36 KB | 118 KB | ×3,3 |
| Playfair | 55 KB | 180 KB | ×3,3 |
| Google Sans Flex | 50 KB | 1.009 KB | ×20 |
Si solo vas a usar el peso, pide solo el peso. En la URL de Google Fonts se ve muy claro:
<!-- Solo el peso: 36 KB -->
<link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@100..900&display=swap" rel="stylesheet">
<!-- Los cuatro ejes: 118 KB -->
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,100..900,0..100,0..1&display=swap" rel="stylesheet">Lo mismo vale si las alojas tú: descarga la versión con solo el eje de peso. Unos KB menos en la fuente se notan en el LCP, como te cuento en la guÃa de Core Web Vitals en WordPress.
Cómo cargarlas sin penalizar performance
Tres reglas básicas: aloja las fuentes en tu propio servidor, usa font-display: swap para no bloquear el render y haz preload solo de la fuente que se ve sin hacer scroll.
Alojarlas tú tiene otra ventaja en Europa. Cargarlas desde los servidores de Google envÃa la IP del visitante a Google, y un tribunal de Múnich lo consideró contrario al RGPD en 2022.
La clave en el @font-face es declarar el rango de pesos. Si pones un solo valor, el navegador no sabe que el archivo es variable y puede inventarse la negrita:
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-latin-wght.woff2') format('woff2');
font-weight: 100 900; /* el rango completo del archivo */
font-display: swap;
}
h1 { font-family: 'Inter', sans-serif; font-weight: 750; }Para descargarlas listas para web, Fontsource tiene todas las de esta lista en versión variable, con el CSS hecho. Si quieres ir más allá, en la guÃa de variable fonts tienes cómo migrar un proyecto entero.
¿Estás montando la tipografÃa de tu web?
Elegida la fuente, toca darle estilo. Mi pack CSS gratis trae más de 40 estilos listos para copiar, entre ellos 8 sombras de texto para titulares y varios botones. Apúntate y te lo envÃo al correo.
Preguntas frecuentes
¿Funcionan en todos los navegadores?
SÃ. Chrome las soporta desde la versión 66, Firefox desde la 62 y Safari desde la 11, versiones de 2017 y 2018. Según Can I use, llegan a más del 97 % de los usuarios.
¿Pesan más que las estáticas?
Una variable pesa más que un único peso estático, pero menos que varios. Y desde Google Fonts ya te llega la variable aunque pidas pesos sueltos: los cuatro pesos de Inter son un solo archivo de 47 KB. Lo que sà dispara el peso son los ejes extra.
¿Tienen licencia comercial gratis?
SÃ. Las 12 están en Google Fonts bajo SIL OFL: puedes usarlas en webs de clientes y en productos comerciales. Lo único que no puedes es vender la fuente tal cual. Si tienes dudas, repasa mi guÃa de licencias de fuentes.
¿Cómo animo el peso al hacer scroll?
Con las animaciones vinculadas al scroll de CSS (animation-timeline: scroll()), animando font-weight o font-variation-settings. Funcionan en Chrome, Edge y Safari 26. En Firefox estable siguen detrás de una opción, asà que envuélvelas en @supports. Tienes el código en tipografÃa cinética con CSS.
¿Hay variables para tipografÃas icónicas?
Gratis, lo más parecido a Helvetica en variable son Inter y Manrope. Para una serif de alto contraste estilo revista, Playfair cubre ese papel.
¿Dónde encuentro más fuentes variables gratis?
En Google Fonts, con el filtro de fuentes variables. En octubre de 2026 son 561 familias de 1.950, y 150 tienen más de un eje.
¿Qué es el tamaño óptico (opsz)?
Un eje que adapta el dibujo de la letra a su tamaño. En pequeño abre espacios y engrosa trazos para que se lea bien; en grande afina detalles y sube el contraste. El navegador lo aplica solo según el font-size.
Conclusión: prueba dos en tu próximo proyecto
Las fuentes variables son uno de los cambios más prácticos en tipografÃa web de los últimos años. Mejoran performance y abren posibilidades creativas a coste cero, siempre que cargues solo los ejes que usas.
Mi consejo: en tu próximo proyecto combina una variable sans para texto (Inter, Plus Jakarta) y una variable display para titulares (Fraunces, Bricolage). Para elegir la pareja, mira mis combinaciones de tipografÃas para web, y para los tamaños, la escala tipográfica con CSS. Espero que te gusten.
