Tipografía variable en producción

Las fuentes variables llevan años “listas para producción”, pero la mayoría de los sitios sigue cargando seis archivos estáticos. La razón rara vez es la fuente: es la cadena de subset, hosting, fallback y CSS la que no se ha terminado de calibrar.

Qué se gana

Un solo archivo cubre todos los pesos y, si la fuente lo expone, también la opsz (tamaño óptico). Pasas de cinco o seis WOFF2 a un único activo y, sobre todo, dejas de pelearte con los saltos de peso entre cabecera y cuerpo: el navegador puede interpolar.

Qué se paga

El archivo único pesa más que un solo estático. Si tu sitio solo necesita dos pesos sin oblicua ni opsz, el variable puede ser peor trato. La regla práctica: tres pesos o más, variable; uno o dos, estáticos.

Dónde se rompe

• Falta de subset. Subir el archivo entero con todos los glifos es la causa principal de webs lentas con tipografía variable. pyftsubset con cobertura latín extendido suele bastar.
• font-display: swap mal entendido. En cabeceras XL, el salto del fallback al variable es muy visible. Mejor optional o un size-adjust afinado.
• Animaciones de eje. Animar font-variation-settings es legal pero caro en CPU. Si lo haces, sólo durante la transición y con will-change: font-variation-settings.

Setup mínimo razonable

1. Una variable subsetada por idioma principal.
2. Fallback nombrado con size-adjust para minimizar CLS.
3. font-display: swap para cuerpo, optional para titulares grandes.
4. Preload únicamente del archivo que necesitas en la primera pantalla.

Si haces estas cuatro cosas, una variable bien elegida se siente mejor que un sistema clásico de estáticos y pesa menos.