Variable Fonts
Variable Fonts
6 reglasUn archivo reemplaza cuatro (cuando 3+ pesos)
Una fuente variable (.woff2) contiene todos los pesos en un solo archivo, elimina las 4+ peticiones HTTP de fuentes estaticas (Regular, Medium, SemiBold, Bold). El ahorro en peso total varia: Inter Variable son ~320KB vs ~580KB para las 4 variantes estaticas. El umbral de conveniencia es 3 o más pesos usados: con 2 pesos, la fuente estática puede ser más ligera.
google fonts . mdn . web typographyDeclaración CSS correcta y fallback
La declaración @font-face de una fuente variable requiere font-weight: 100 900 (rango) y opcionalmente font-style: oblique 0deg 10deg para el eje de inclinación. Siempre incluir un fallback de fuente del sistema en font-family que sea metricamente similar para minimizar el layout shift durante la carga. Usar font-display: swap para mostrar el fallback inmediatamente.
font-family: 'Inter';
src: url('Inter.woff2') format('woff2');
font-weight: 100 900;
font-display: swap;
}
/* Fallback para browsers sin soporte */
@supports font-variation-settings: normal {
body {
font-family: 'Inter', system-ui, sans-serif;
}
}
font-family: 'Inter';
src: url('Inter.woff2');
font-weight: 400; /* solo un peso */
}
/* CSS ignora los pesos 500-900 */
/* El browser simula bold, feo */
Animación de peso en hover/focus
Con fuentes variables se puede animar font-variation-settings: 'wght' 400 a 'wght' 700 con transition. El efecto es más sutil que un cambio de color y más expresivo que ningun cambio. Ideal para botones, navegación y labels de formulario. Precaución: la animación de peso puede causar layout shift si el elemento no tiene ancho fijo. Usar anchos basados en ch para absorber la expansión del texto sin saltos.
Eje wdth para tipografía responsiva
El eje wdth (width, condensado/expandido) permite reducir el ancho del texto en móvil sin cambiar el tamaño de fuente. En pantallas pequeñas usar font-variation-settings: 'wdth' 85 (condensado) para que más texto entre sin sacrificar legibilidad. En pantallas grandes usar 'wdth' 100 (normal) para titulares de impacto. Combinar con clamp() o media queries para transiciones fluidas entre breakpoints.
Optical sizing automático
El eje opsz (optical size) ajusta los detalles tipograficos según el tamaño en pantalla. A 12px, las serifas se vuelven más gruesas y el espaciado interno más amplio para mantener legibilidad. A 72px, los trazos son más delicados y elegantes. Activar con font-optical-sizing: auto (CSS moderno) o manualmente con font-variation-settings: 'opsz' 14 donde 14 es el tamaño en pt.
Grade axis para dark mode sin layout shift
El eje GRAD (grade) ajusta el peso visual de la fuente sin cambiar el ancho del texto, a diferencia de wght. En dark mode, el texto blanco sobre fondo oscuro parece más grueso por un efecto optico llamado halation. Compensar con font-weight mueve el layout porque cambia las metricas del glifo. En cambio, font-variation-settings: 'GRAD' 50 incrementa el peso visual sin alterar el advance width: cero layout shift, misma apariencia optica que en light mode.
body {
font-variation-settings: 'GRAD' 50;
}
}