¿Qué son las fuentes variables?

Una fuente variable es un único archivo de fuente que contiene un espacio de diseño continuo en lugar de un conjunto de cortes fijos. Donde una familia estática entrega Regular, Medium y Bold como archivos separados, una fuente variable almacena los extremos del diseño y puede renderizar cualquier punto entre ellos —peso 400, 457 o 610— desde el mismo archivo.

Los pesos con nombre sobreviven como puntos de referencia: 400 sigue significando regular, 700 sigue significando negrita, y ambos se renderizan exactamente como lo harían desde archivos estáticos. Lo que cambia es que el espacio entre los puntos de referencia se abre —las paradas dejan de ser las únicas opciones. Este artículo forma parte de nuestra guía de tipografía.

¿En qué se diferencia una fuente variable de los pesos estáticos?

Una familia estática es un conjunto de dibujos discretos: cada peso se exportó como su propio archivo, y cualquier cosa entre dos pesos no existe. Pídele a un navegador el peso 500 cuando solo hay instalados el 400 y el 700, y o bien salta al vecino más cercano o sintetiza uno falso —engrosando los contornos para simular la negrita, con resultados que hacen estremecer a los diseñadores de tipos.

Una fuente variable traslada la interpolación al archivo. Esto no es tanto una idea nueva como una reubicada: los diseñadores de tipos llevan mucho tiempo dibujando los extremos de una familia e interpolando los pesos intermedios entre ellos —así es como se producían las familias grandes. Una fuente variable entrega los extremos (los másteres) y deja que el motor de renderizado interpole en vivo, de modo que el peso 457 no es un falso sino un punto legítimo dentro del espacio diseñado.

¿Qué ejes puede tener una fuente variable?

El peso es el eje que encontrarás en todas partes, pero el formato es general. Una convención de ejes registrados nombra los más comunes con etiquetas de cuatro letras: wght (peso), wdth (ancho), slnt (inclinación) y opsz (tamaño óptico —el diseño adaptándose al tamaño al que se compone). Las fuentes también pueden definir ejes personalizados: grados, suavidad, lo que sea que el diseñador haya parametrizado. La introducción a las fuentes variables de web.dev recorre los ejes en detalle.

La mayoría de las fuentes variables en la práctica exponen uno o dos ejes —el peso por sí solo es común— y eso no es una carencia. Un eje bien dibujado cubre la gran mayoría de lo que necesitan las interfaces.

¿Cargan más rápido las fuentes variables?

A veces, y vale la pena ser preciso sobre cuándo. Un archivo variable es más grande que cualquiera de sus pesos estáticos por separado —carga todo el espacio de diseño. La comparación honesta: un peso de texto estático con subconjunto latino suele situarse en torno a 15–40 KB en WOFF2, mientras que el equivalente variable a menudo pesa de dos a cuatro veces un solo corte. Así que:

• Un peso en uso → el archivo estático gana en bytes.
• Dos pesos → más o menos empate, según la familia.
• Tres o más pesos → el archivo variable normalmente gana en bytes, y siempre gana en peticiones: un archivo reemplaza al conjunto.

Un equipo que usa 400, 500, 600 y 700 de la misma familia es el caso de manual — cuatro peticiones se colapsan en una, el total de bytes normalmente baja, y todos los valores intermedios vienen gratis. Los números exactos varían con la cobertura de glifos y el subconjunto, así que mide tus propios archivos en lugar de citar la tabla de nadie, incluida esta.

Mira una jerarquía de pesos completa en una familia —pesos por estilo desde caption hasta display, previsualizados a los tamaños de una escala real. Con archivos estáticos esta jerarquía son cuatro peticiones; una fuente variable entrega el mismo rango en una sola.

¿Cómo se usa una fuente variable en CSS?

Declara el rango que cubre el archivo, luego usa propiedades corrientes:

@font-face {
  font-family: "Inter Variable";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;   /* el rango, no un único valor */
}

h1 { font-weight: 650; }
p  { font-weight: 440; }

font-weight: 457 simplemente funciona cuando la fuente es variable —sin sintaxis especial. Los ejes registrados se mapean sobre CSS normal: el peso a font-weight, el ancho a font-stretch, la inclinación a font-style, el tamaño óptico a font-optical-sizing. La escotilla de escape de bajo nivel, font-variation-settings: "XXXX" value, existe para los ejes personalizados; prefiere las propiedades de alto nivel siempre que apliquen, ya que se componen mejor con el resto de la cascada.

¿Por qué importa la precisión del peso en una jerarquía real?

Porque 400 y 600 no siempre quedan bien, y con fuentes estáticas tu única opción era resignarte. Dos situaciones surgen constantemente. El texto claro sobre un fondo oscuro tiende a leerse más delgado que el mismo peso sobre blanco —un cuerpo de texto compuesto a 400 puede derivar hacia lo frágil, y 440 lo corrige discretamente. Y un estilo display a 700 puede sentirse más pesado de lo previsto en tamaños grandes, donde 640 mantiene la presencia sin el grito. Un ajuste plausible:

Que el caption vaya más pesado que el cuerpo es deliberado —los tamaños pequeños se adelgazan ópticamente, y un toque de peso añadido lo compensa. Las fuentes variables también permiten el peso animado o responsivo; es una capacidad genuina, y rara vez indispensable.

¿Qué fuentes son variables — y cómo encaja esto en un flujo de trabajo con tokens?

Muchas de las principales fuentes de UI entregan versiones variables —Inter, Roboto Flex, Source Sans 3 y Fraunces son ejemplos— pero la mayoría de las familias de fuentes todavía no lo hacen, así que el soporte variable es una propiedad a comprobar por familia, no una suposición. Todos los motores de navegador actuales las manejan.

En un flujo de trabajo con tokens la división del trabajo es limpia: el sistema tipográfico define los pesos por estilo, y el formato del archivo determina qué valores son renderizables. Los controles de peso por estilo de Scale Composer establecen esa jerarquía, y los tokens exportados —DTCG, CSS, Tailwind, Figma Variables— llevan cualquier valor en el que aterrices: paradas con nombre si tu familia es estática, cualquier valor si es variable. El papel de la herramienta es el sistema, no el archivo; la fuente que licencies decide con cuánta finura puedes ajustarla.

Ajusta los pesos en lugar de aceptar las paradas

La forma práctica de entender el peso variable es moverlo y observar cómo la jerarquía se reequilibra. Ajusta el peso de cada estilo en vivo — empuja el cuerpo de 400 hacia 440, tira del display de vuelta de 700 a 650, y juzga el resultado en texto de muestra en marcha en lugar de en los números de un deslizador de peso. Cuando un valor entre las paradas se lee mejor, esa es la capacidad para la que existe el formato —y los tokens exportados la llevarán.