Fuentes variables en producción: cómo publicarlas sin destrozar el rendimiento
Guía práctica de fuentes variables en producción. Los cuatro ejes que vale la pena publicar, la estrategia de subsetting que reduce el tamaño del archivo a la mitad y la receta de carga que evita que la página salte.
Fuentes variables en producción: cómo publicarlas sin destrozar el rendimiento
Una fuente variable es un solo archivo con pesos infinitos, y los equipos que las publican bien ahorran bytes y desbloquean expresividad. Los equipos que las publican mal cargan fuentes de 800 kilobytes y bloquean el primer renderizado por animaciones que nadie va a ver. La diferencia no es la elección de la fuente. Es la estrategia de producción.
Una fuente variable es un solo archivo con pesos infinitos
Una fuente variable incluye cada peso, inclinación y anchura dentro de un único archivo con ejes entre los que se puede interpolar. Ese es todo el argumento de venta y también todo el compromiso. Una sola petición de red reemplaza entre cuatro y siete peticiones de fuentes estáticas. El archivo es más grande que cualquier peso estático individual, pero más pequeño que el conjunto completo de pesos estáticos combinados. Ese es el trato.
El formato es OpenType con datos de variación incrustados. El navegador interpola entre los extremos de cada eje en el momento del renderizado, lo que significa que obtienes font-weight: 350 o font-weight: 723 gratis, y no solo los enteros que la fundición decidió publicar. Eso es lo que hace posible la animación de peso al pasar el cursor, y lo que hace que una implementación descuidada cargue un archivo de 600 kilobytes para un sitio que solo usa dos pesos.
Los cuatro ejes que vale la pena publicar
Peso, inclinación, tamaño óptico, anchura. La mayoría de los sitios en producción necesitan dos o tres de estos, y publicar más ejes de los que usas son bytes desperdiciados.
La especificación OpenType define cinco ejes registrados: peso (wght), anchura (wdth), inclinación (slnt), cursiva (ital) y tamaño óptico (opsz). Más allá de esos, las fundiciones pueden definir ejes personalizados para cualquier cosa, desde el grado hasta la expresividad. Los ejes personalizados son divertidos en un espécimen tipográfico. Casi nunca valen el tamaño de archivo en producción. Quédate con los cuatro registrados a menos que tu diseño exija explícitamente otra cosa.
| Eje | Propiedad CSS | Rango típico | Cuándo usarlo |
|---|---|---|---|
Peso (wght) | font-weight | 100–900 | Casi siempre |
Anchura (wdth) | font-stretch | 75%–125% | Editorial, titulares responsivos |
Inclinación (slnt) | font-style: oblique Xdeg | -15deg a 0deg | Reemplazo de cursiva real o animación |
Tamaño óptico (opsz) | font-optical-sizing | 6–144 | Display y cuerpo desde un solo archivo |
El peso es el caballo de batalla
El eje de peso reemplaza los cuatro a siete archivos de peso estático que publica la mayoría de los sitios, y es el eje que por sí solo justifica las fuentes variables. Un sitio que publica Regular, Medium, SemiBold, Bold y ExtraBold como archivos estáticos hace cinco peticiones de fuente. Una fuente variable con eje de peso hace una, y entrega gratis cada valor intermedio.
El CSS es font-weight: 300 hasta font-weight: 900 en cualquier elemento. Los valores intermedios como font-weight: 450 son válidos y se renderizan correctamente. Revisa la documentación del rango de ejes de la fundición antes de asumir que una fuente variable cubre todo el rango de 100 a 900. Algunas publican un rango más estrecho y lo recortan en silencio, lo que produce saltos sutiles pero feos en lugar de transiciones suaves.
La inclinación desbloquea cursivas reales
Un eje de inclinación real te permite pasar de vertical a cursiva en cualquier valor, algo que la mayoría de los pares de fuentes estáticas no pueden hacer sin un segundo archivo. La distinción entre slnt (inclinación) e ital (cursiva) importa: la inclinación es un rango continuo de vertical a oblicua, mientras que la cursiva es un interruptor binario que cambia a un diseño cursivo separado y corregido ópticamente.
Para texto de cuerpo, el eje de cursiva con una cursiva óptica adecuada es casi siempre la elección correcta. Para titulares que planeas animar, la inclinación es el eje que quieres. El CSS es font-style: oblique -10deg, con el valor en grados correspondiendo al rango del eje. Prueba la inclinación en el tamaño real de tu titular antes de comprometerte con un valor. Los ángulos extremos se ven peor en tamaños pequeños de lo que sugiere el espécimen de la fundición.
El tamaño óptico mantiene viva la tipografía display
El tamaño óptico ajusta el contraste, la altura de la x y el detalle según el tamaño renderizado, que es la diferencia entre una cara display y una cara de cuerpo integradas en una sola fuente. Una tipografía diseñada para texto de cuerpo de 12px tiene detalles simplificados, contraformas abiertas y espaciado generoso. Un corte display a 80px tiene contraste más marcado, espaciado más ajustado y detalles más refinados. El tamaño óptico te da ambos desde un solo archivo.
La propiedad CSS es font-optical-sizing: auto, que permite al navegador aplicar los ajustes ópticos correctos según el font-size declarado. También puedes configurarlo manualmente con font-variation-settings: 'opsz' 72 para un titular de 72px. Las fuentes que soportan este eje correctamente, con Inter Display frente a Inter Text como ejemplo canónico, fueron diseñadas con el tamaño óptico como característica de primera clase. Las fuentes que añaden un eje opsz como ocurrencia tardía rara vez entregan una diferencia visual significativa. Sabe cuál estás comprando.
La anchura es el eje editorial
Un eje de anchura te permite comprimir titulares y expandir citas destacadas sin cambiar de fuente, que es el movimiento que hace cantar a los diseños editoriales. La propiedad CSS es font-stretch, y acepta valores porcentuales: font-stretch: 75% para condensada, font-stretch: 125% para expandida.
Este eje se gana su tamaño de archivo en sitios con diseños editoriales responsivos. Un titular de 120px en escritorio puede necesitar condensarse para caber en la columna en un móvil de 375px, y un eje de anchura lo resuelve con una sola consulta @media en lugar de una segunda carga de fuente. Roboto Flex publica uno de los rangos de eje de anchura más amplios en una fuente variable lista para producción, y vale la pena estudiarla si planeas usar este eje en serio. Para sitios de marketing con titulares de ancho fijo, sáltatelo por completo.
Variable frente a estática, el árbol de decisión
Las fuentes variables ganan cuando usas tres o más pesos, animas la tipografía o necesitas tamaño óptico. De lo contrario, quédate con estáticas. El punto de equilibrio suele estar entre dos y tres pesos, y las cuentas cambian según tus requisitos de cobertura de idiomas.
| Escenario | Mejor opción | Razón |
|---|---|---|
| 1–2 pesos, sin animación | Estática | Menos bytes totales |
| 3+ pesos | Variable | Un archivo le gana a tres |
| Animación de peso o inclinación | Variable | Solo es posible con variable |
| Se necesita tamaño óptico | Variable | Ahorra una segunda carga de fuente |
| Solo latín estrecho, un peso | Estática | La variable no aporta nada |
| Multi-idioma, muchos lenguajes | Variable con subsetting | Un archivo base, extensiones por idioma |
Un sitio que publica Regular y Bold probablemente está mejor con dos archivos estáticos que suman de 40 a 60 kilobytes que con una fuente variable de 120 a 200 kilobytes. Las cuentas se inclinan de forma decisiva hacia la variable cuando cruzas los tres pesos o añades animación a los requisitos.
El subsetting reduce el archivo a la mitad
El subsetting elimina los glifos que no usas, y en un sitio de marketing eso significa que una fuente variable de 600 kilobytes pasa a 200 kilobytes sin un cambio visible. Una fuente variable completa incluye cada glifo que diseñó la fundición: latín, latín extendido, cirílico, griego, operadores matemáticos, símbolos de moneda y ligaduras que nunca vas a usar. Una fuente variable con subsetting incluye solo lo que tu contenido necesita.
La herramienta para esto es pyftsubset de la biblioteca fonttools. Un comando básico de subconjunto latino:
pyftsubset font.woff2 \
--output-file=font-subset.woff2 \
--flavor=woff2 \
--unicodes=U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD \
--layout-features="kern,liga,calt,rlig"
Conserva las características de maquetación kern, liga, calt y rlig. Elimina todo lo demás a menos que el diseño lo use explícitamente. Pasa el resultado por un compresor WOFF2 si la herramienta no gestionó la compresión automáticamente.
Latín, latín extendido y rangos de idiomas
La estrategia de subsetting correcta es un archivo latino más un archivo de extensión de idioma por locale, cargado solo cuando hace falta. La mayoría de los sitios de marketing y producto sirven principalmente contenido latino. Publica el subconjunto latino como predeterminado y carga los conjuntos de caracteres extendidos mediante el descriptor unicode-range en @font-face, que le dice al navegador que descargue un archivo solo cuando encuentra caracteres coincidentes en la página.
@font-face {
font-family: 'YourFont';
src: url('/fonts/yourfont-latin.woff2') format('woff2');
font-weight: 100 900;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
@font-face {
font-family: 'YourFont';
src: url('/fonts/yourfont-latin-ext.woff2') format('woff2');
font-weight: 100 900;
font-display: swap;
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020,
U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F,
U+A720-A7FF;
}
El navegador descarga solo los archivos que coinciden con los caracteres de la página actual. Una página en francés carga el archivo de latín extendido. Una página en inglés no. Así es como Google Fonts opera a escala, y es el patrón correcto para copiar en tus propias fuentes variables.
Carga sin saltos
Una fuente variable que carga después del primer renderizado desplazará el diseño, y la receta de carga es preload más font-display swap más una fuente de respaldo con métricas ajustadas. Esto no es opcional. Una fuente variable es más grande que un solo peso estático, lo que significa que tarda más en llegar, lo que significa que la ventana para el desplazamiento de diseño es más ancha.
El enlace de preload va en el <head>, antes de cualquier hoja de estilos:
<link
rel="preload"
href="/fonts/yourfont-latin.woff2"
as="font"
type="font/woff2"
crossorigin
>
La declaración font-display: swap en tu @font-face le dice al navegador que renderice de inmediato con la fuente de respaldo y cambie a la fuente variable cuando llegue. Una fuente variable es un solo archivo con pesos infinitos, y una mala estrategia de carga la cargará dos veces para nada si mezclas declaraciones con y sin preload entre hojas de estilo. Un preload por archivo de subconjunto. Esa es toda la regla.
¿Quieres fuentes variables que se publiquen con la mitad de los bytes y nunca hagan saltar la página? Contrata a Brainy y publicaremos tu pila tipográfica de producción con los ejes correctos, los subconjuntos correctos y la receta de carga que mantiene Lighthouse en verde.
Fuentes de respaldo con métricas ajustadas
Una fuente de sistema de respaldo con métricas ajustadas usa size-adjust, ascent-override y descent-override para que el respaldo se renderice con el mismo ritmo que la fuente variable. Sin esto, font-display: swap cambia el texto invisible por un desplazamiento de diseño cuando llega la fuente variable. Con el ajuste de métricas, el cambio es visualmente imperceptible.
@font-face {
font-family: 'YourFont Fallback';
src: local('Arial');
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
size-adjust: 107%;
}
Los valores exactos dependen de tu fuente variable. Herramientas como Fontaine y next/font generan estos valores automáticamente. Si construyes sobre Next.js, next/font se encarga de toda la cadena de respaldo. Si no, Fontaine es el camino más rápido hacia valores de override correctos sin calcularlos a mano.
Cuatro patrones de animación que desbloquean las fuentes variables
Peso al pasar el cursor, peso al hacer scroll, inclinación al pasar el cursor y anchura de revelado. Estas cuatro animaciones solo son posibles con fuentes variables, y se ganan el tamaño de archivo cuando se usan con moderación. Pon las cuatro en una página y parecerá una demo técnica, no un diseño.
Hover-weight (peso al pasar el cursor) transiciona font-weight de 400 a 700 al pasar el cursor. La interpolación es suave porque los datos del eje están en la fuente. transition: font-weight 0.15s ease en el elemento es todo el CSS. Funciona en enlaces de navegación, texto de llamada a la acción y etiquetas interactivas.
Scroll-weight (peso al hacer scroll) controla font-weight según la posición del scroll usando un listener de JavaScript que mapea scrollY a un valor dentro del rango del eje. Mantén el rango acotado: de 300 a 700 parece intencional, de 100 a 900 parece un bug. Pertenece a secciones hero donde la tipografía se vuelve más pesada a medida que el usuario entra en el contenido.
Hover-slant (inclinación al pasar el cursor) transiciona font-style: oblique 0deg a font-style: oblique -10deg al pasar el cursor. Es la alternativa más sutil al hover-weight y se lee más refinada en enlaces de navegación y elementos interactivos en línea. Combínala con hover-weight solo si la tipografía fue diseñada para soportar ambos a la vez.
Reveal-width (anchura de revelado) anima font-stretch como parte de una animación de entrada. El texto entra con font-stretch: 75% y se expande a font-stretch: 100% en 400ms. Combinado con un fade-in, es uno de los patrones de revelado tipográfico más limpios disponibles. Evítalo en texto de cuerpo. Pertenece solo a tipografía display y titulares hero.
Siete sitios que publican fuentes variables a escala
GitHub, Stripe Press, Vercel, Linear, The New York Times, Apple Music y Figma publican fuentes variables en producción, y los patrones que comparten son los que vale la pena copiar.
GitHub publica Mona Sans y Hubot Sans, ambas fuentes variables personalizadas creadas para la marca GitHub. Solo eje de peso en la mayoría de los contextos de UI. Sin animación salvo en alguna sección de marketing ocasional. Los tamaños de archivo son ajustados porque hacen subsetting agresivo por grupo de idiomas.
Stripe Press usa una fuente variable display personalizada para titulares editoriales. Empujan el eje de peso con fuerza, con titulares display en pesos altos y pies de foto en pesos ligeros desde un solo archivo. El tamaño óptico se nota en los titulares más grandes. Es el uso de fuente variable más ambicioso editorialmente de esta lista.
Vercel publica Geist, su propia fuente variable, en Geist Sans y Geist Mono. El eje de peso cubre todo el rango. La fuente es de código abierto, el subsetting latino es limpio y carga lo bastante rápido como para servir de referencia de cómo se ve una fuente variable bien publicada en una app Next.js de producción.
Linear publica Inter como fuente variable. El eje de peso recorre los pesos de UI, manteniéndose en el rango óptico más estrecho apropiado para una interfaz densa. Es el uso más conservador de esta lista y también uno de los más correctos para una interfaz de producto cargada de datos donde la animación sería ruido.
The New York Times usa una serif variable personalizada para tipografía display. Los ejes de peso y de tamaño óptico están activos, y las transiciones entre display y cuerpo usan el eje de tamaño óptico para cambiar el carácter del renderizado. Es tan sofisticado como llega el uso de fuentes variables en producción a escala editorial.
Apple Music publica San Francisco en su forma variable con los ejes de peso y tamaño óptico activos. Las transiciones de eje entre tipografía grande y pequeña son tan suaves que la mayoría de los usuarios no nota que la fuente es variable, que es el objetivo correcto. La fuente debería desaparecer dentro de la experiencia de lectura.
Figma publica Inter Display como fuente variable en toda la aplicación. Si estás haciendo selección de tipografía display para una UI de producto, estudia cómo Figma equilibra Inter en pesos pequeños de UI frente a Inter Display en tamaños grandes de encabezado. La disciplina en el rango de pesos vale la pena copiarla tal cual.
La checklist de fuentes variables antes del deploy
Ejecuta esto antes de publicar una fuente variable y atraparás los bugs que muerden en producción.
- Subsetting verificado. Ejecuta
pyftsubsetcon tus rangos unicode objetivo. Confirma que el archivo del subconjunto latino pesa menos de 200KB. Comprueba por muestreo que los caracteres que usa tu contenido están presentes en el resultado. - Ejes documentados. Sabe qué ejes incluye la fuente y el rango mínimo y máximo de cada uno. No declares
font-weight: 800si el eje llega solo a 700. Se recortará en silencio y tu diseño será incorrecto. - Preload configurado. Un
<link rel="preload">por archivo de subconjunto, en el<head>, con el atributocrossorigin, apuntando solo al archivo latino principal. Hacer preload de un archivo que no usas desperdicia ancho de banda. - font-display configurado. Cada bloque
@font-facetienefont-display: swap. Confirma en la pestaña Network de DevTools que las fuentes no bloquean el renderizado de recursos críticos. - Métricas del respaldo ajustadas. Un bloque
@font-facepara el respaldo del sistema consize-adjust,ascent-overrideydescent-overridecalculados. Verifica limitando a Slow 3G en DevTools y revisando el desplazamiento de diseño al cargar. El CLS debería ser 0 o casi 0. - Ejes usados por el diseño confirmados. Cada eje declarado en CSS se usa realmente en el diseño final. Los ejes que están en el archivo de fuente pero no en el CSS igual añaden bytes. Si no usas anchura, considera hacer subsetting de rango de ejes para recortar esos bytes.
- Puntuación de Lighthouse revisada. Ejecuta Lighthouse en la URL de producción con la fuente en su lugar. El LCP y el CLS relacionados con la fuente deberían estar en verde. Si no, las métricas del respaldo están mal o falta el preload.
- Cabeceras CORS confirmadas. Las fuentes variables cargadas desde un CDN u origen externo necesitan cabeceras
Access-Control-Allow-Origin. Revisa la pestaña Network en busca de errores CORS. Un fallo de CORS produce un respaldo de fuente silencioso difícil de diagnosticar en producción.
FAQ
¿Qué es una fuente variable y en qué se diferencia de una fuente estática?
Una fuente variable es un único archivo de fuente que contiene todo el rango de diseño de una tipografía, controlado por ejes como peso, anchura, inclinación y tamaño óptico. Una fuente estática es una instantánea única en un peso y estilo. La diferencia práctica es que una fuente variable te permite usar font-weight: 350 o animar el peso suavemente en CSS, mientras que las fuentes estáticas solo permiten los valores específicos que la fundición eligió publicar como archivos separados.
¿Las fuentes variables realmente mejoran el rendimiento?
Depende de cuántos pesos estés cargando. Si publicas dos pesos estáticos que suman 60KB, cambiar a una fuente variable de 180KB es una regresión de rendimiento. Si publicas cinco pesos que suman 300KB, cambiar a una fuente variable con subsetting de 120KB es una victoria clara. El argumento de rendimiento de las fuentes variables es real, pero solo aplica cuando cruzas el umbral de tres pesos y haces el subsetting correctamente.
¿Cuál es la mejor fuente variable para diseño de UI?
Inter es la fuente variable más extendida en diseño de UI. Su eje de peso está bien calibrado para pantalla, hace subsetting limpiamente y Figma la publica como referencia de producción. Roboto Flex es la elección correcta cuando necesitas un rango de ejes amplio para diseños editoriales responsivos. Vale la pena estudiar Recursive si quieres una sans variable y una mono variable de la misma familia tipográfica. Para principios de diseño web que piden una cara display expresiva, Fraunces y Playfair Display publican ejes de tamaño óptico y peso sólidos.
¿Cómo uso font-variation-settings en CSS?
font-variation-settings es la propiedad de bajo nivel para configurar directamente los ejes de una fuente variable usando la etiqueta de eje de cuatro letras y un valor numérico: font-variation-settings: 'wght' 450, 'wdth' 85. Para ejes registrados como peso y anchura, prefiere las propiedades CSS de alto nivel (font-weight, font-stretch) porque heredan y se componen correctamente. Usa font-variation-settings solo para ejes personalizados que no tengan una propiedad CSS de alto nivel.
¿Pueden las fuentes variables causar desplazamiento de diseño?
Sí, y es más probable que lo causen que las fuentes estáticas porque el archivo es más grande y tarda más en cargar. La solución es font-display: swap combinado con un respaldo de métricas ajustadas. Esta combinación hace que el cambio sea visualmente imperceptible. Sin el respaldo de métricas ajustadas, font-display: swap cambia el texto invisible por un salto de diseño visible cuando llega la fuente. Ambos problemas se resuelven juntos o no se resuelven.
¿Las fuentes variables son compatibles con todos los navegadores?
Las fuentes variables son compatibles con todos los navegadores modernos: Chrome, Firefox, Safari y Edge. La base es lo bastante sólida como para que no necesites un respaldo de fuente estática por compatibilidad. El porcentaje de usuarios con un navegador que no soporta fuentes variables es inferior al uno por ciento en la mayoría de los sitios en producción. Ofrece un respaldo de fuente del sistema para ese caso límite, no una pila de fuentes estáticas.
¿Cómo funciona el subsetting de fuentes variables?
El subsetting elimina del archivo de fuente los glifos que tu contenido nunca renderizará, usando una herramienta como pyftsubset de la biblioteca Python fonttools. Especificas los rangos de caracteres unicode que necesitas y la herramienta elimina todo lo demás. Una fuente variable completa puede incluir 3.000 glifos. Un subconjunto solo latino conserva alrededor de 250. El resultado es una salida visual idéntica para contenido latino con aproximadamente un tercio del tamaño de archivo. Consulta la entrada del glosario sobre subsetting para la referencia completa de comandos.
El cambio que las fuentes variables realmente desbloquean
Las fuentes variables no son una curiosidad tipográfica. Son una forma de publicar más expresión con menos bytes, y los equipos que las tratan como herramienta de producción son los que hacen mejor tipografía con menos costo de red.
La arquitectura de variables de Figma que impulsa los sistemas de diseño modernos se corresponde de forma natural con los ejes de las fuentes variables. Un token font-weight en Figma es un valor de eje en la fuente. Combina un sistema de tokens bien estructurado con una fuente variable correctamente subsetada y obtendrás decisiones de diseño que se propagan del archivo de diseño a producción sin ambigüedad. Súmale un sistema de color OKLCH en los estados hover y construirás interacciones de producto que se sienten pensadas en lugar de ensambladas.
El listón para las fuentes variables en producción no es "¿publicamos una fuente variable?". El listón es: subsetting correcto, preload bien hecho, métricas de respaldo ajustadas y solo los ejes que usa el diseño. Ese es el estándar que separa a los equipos que hacen tipografía de producción de los que hacen teatro tipográfico.
¿Quieres fuentes variables que se publiquen con la mitad de los bytes y nunca hagan saltar la página? Contrata a Brainy y publicaremos tu pila tipográfica de producción con los ejes correctos, los subconjuntos correctos y la receta de carga que mantiene Lighthouse en verde.
Want variable fonts that ship at half the bytes and never jank the page? Brainy ships production typography stacks with the right axes, the right subsets, and the loading recipe that keeps Lighthouse green.
Get Started
