Qué es una fuente variable

Una fuente variable no contiene varias fuentes: contiene una y las instrucciones para deformarla. El formato guarda un juego de contornos maestro y tablas de desplazamiento por cada eje, y el rasterizador construye la instancia concreta que pidas interpolando entre ellas. Entender esa mecánica explica por qué el archivo pesa lo que pesa, por qué los pesos extremos se ven mejor que los intermedios, y qué está haciendo el navegador cuando escribes font-weight: 437.

Un espacio de diseño, no una lista de archivos

El formato OpenType incorporó las variaciones en su versión 1.8, en 2016. La idea es antigua —las fuentes multiple master de los noventa hacían algo parecido— y el mecanismo es este:

El archivo guarda un juego de contornos por defecto y, por cada eje de variación, una tabla de deltas: para cada punto de cada contorno, cuánto se mueve al recorrer ese eje. Instanciar un peso concreto es evaluar esas interpolaciones y obtener un contorno nuevo.

Los ejes definen un espacio de diseño. Con un solo eje es un segmento; con dos, un rectángulo; con tres, un volumen. Cualquier punto de ese espacio es una fuente válida, y de ahí sale la frase de marketing de “infinitos pesos”.

Lo que la frase omite es lo interesante: el tipógrafo no dibuja infinitos pesos, dibuja unos pocos másters en posiciones concretas del espacio y ajusta los deltas para que la interpolación entre ellos sea aceptable. Las posiciones donde hay máster están dibujadas; el resto están calculadas. En una fuente bien hecha la diferencia no se ve, pero explica por qué las familias variables buenas traen instancias nombradas: son las posiciones que el diseñador ha revisado.

Cómo lo declara CSS

Del lado de CSS, una fuente variable se declara igual que una estática salvo por un detalle: los descriptores de emparejamiento aceptan rangos.

@font-face {
  font-family: 'Texto';
  src: url('/f/texto-var.woff2') format('woff2') tech(variations);
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

font-weight: 100 900 es lo que conecta la propiedad font-weight con el eje wght del archivo. Sin ese rango, la cara empareja como si fuera un peso único y el eje no se usa: la fuente variable se comporta como una estática, cargando además todos los deltas que no vas a usar. Es un error frecuente y silencioso.

tech(variations) en el src hace que un navegador sin soporte de variaciones descarte esa entrada y pase a la siguiente, con lo que puedes ofrecer estáticas de reserva sin ninguna at-rule condicional. En 2026 el soporte de variaciones es universal, así que en la práctica esa reserva ya no hace falta.

Instancias nombradas y puntos arbitrarios

El archivo incluye una tabla de instancias nombradas: combinaciones de valores de eje con un nombre, del estilo “Regular”, “Medium”, “SemiBold Condensed”. Son las que aparecen en el menú de fuentes de un programa de diseño.

CSS no tiene forma de pedir una instancia nombrada por su nombre. Lo que hace es traducir tus propiedades de alto nivel a valores de eje y pedir ese punto del espacio. Si el punto coincide con una instancia nombrada, perfecto; si no, se interpola.

.texto  { font-weight: 400; }   /* wght 400 */
.enfasis { font-weight: 520; }  /* wght 520, probablemente entre masters */

Y aquí conviene una recomendación práctica que se da poco: usa los valores que el diseñador nombró. No porque los intermedios se vean mal, sino porque son los que se han revisado, los que tienen kerning comprobado y los que se corresponden con lo que el equipo de diseño ve en su herramienta. La libertad de elegir 437 es real y casi nunca aporta nada.

Qué pasa en el rasterizador

Cuando pides una instancia, el motor de fuentes evalúa los deltas y genera los contornos, y después los rasteriza al tamaño concreto. El resultado se cachea por combinación de instancia y tamaño, así que un texto largo con un peso fijo no paga nada extra respecto a una fuente estática.

Lo que sí cuesta es cambiar de instancia. Cada valor nuevo del eje es un juego de contornos nuevo, con su rasterización y su caché. Eso tiene dos consecuencias prácticas:

Animar un eje es caro. No prohibitivo, pero cada fotograma genera una instancia distinta de cada glifo visible. En un titular de cinco palabras es irrelevante; en un párrafo entero se nota, y en una lista larga se nota mucho.

Cambiar el peso cambia los anchos. Los avances horizontales de los glifos forman parte de lo que se interpola, así que al engordar el texto las palabras ocupan más y la línea se recompone. Animar font-weight no es una animación de composición: es una animación que dispara layout en cada fotograma. Hay un eje pensado precisamente para evitar esto, y lo verás al repasar los ejes registrados.