# Fuentes variables explicadas para diseñadores

[Canonical HTML page](https://gradiently.design/es/guide/variable-fonts)

Un solo archivo, todos los pesos intermedios y una tipografía que se adapta al tamaño al que la pones. Las fuentes variables cambian lo que puede hacer un sistema tipográfico, si sabes a qué ejes recurrir.

## The short version

- Una fuente variable es un único archivo de fuente que contiene un rango continuo de estilos, como todos los pesos de fina a black, en lugar de un archivo por estilo.
- Cada rango se llama eje; los cinco ejes estándar son peso, anchura, cursiva, inclinación y tamaño óptico.
- Las fuentes variables te dejan elegir valores intermedios, como un peso de 450 o 650, y ajustar la tipografía con precisión para cada tamaño y fondo.
- Todos los navegadores principales actuales admiten fuentes variables, y muchas familias de Google Fonts están disponibles como archivos variables.
- Un archivo variable puede pesar más que un solo estilo estático, así que el ahorro llega cuando usas varios pesos o anchuras de la misma familia.

Las **fuentes variables** son archivos de fuente que contienen un rango continuo de estilos en lugar de un conjunto fijo. En vez de archivos separados para Regular, Medium, Semibold y Bold, un solo archivo variable contiene todos los pesos entre el más ligero y el más grueso, y a menudo otros rangos también, como la anchura o el tamaño óptico. Eliges cualquier punto de cada rango, llamado eje, así que un titular puede ir a peso 680 y un pie de foto a 430 si es lo que mejor se lee.

El formato llegó como parte de la especificación OpenType en 2016 y hoy lo admiten todos los navegadores principales actuales y las principales herramientas de diseño. Esta guía cubre qué hacen los ejes, cuándo merece la pena usar fuentes variables y cómo configurarlas en CSS. Para la visión general de cómo elegir tipografía, mira [fundamentos de tipografía](https://gradiently.design/es/guide/typography-basics) y [fuentes de marca](https://gradiently.design/es/guide/brand-fonts).

## Ejes de las fuentes variables y qué hace cada uno

Un eje es una dimensión del diseño que el diseñador tipográfico ha dibujado en sus extremos; la fuente interpola todo lo que hay entre ellos. La especificación OpenType registra cinco ejes, con etiquetas estándar de cuatro letras. Los diseñadores tipográficos pueden añadir sus propios ejes personalizados, que se escriben en mayúsculas.

| Eje | Etiqueta | Qué cambia | Propiedad CSS |
| --- | --- | --- | --- |
| Peso | `wght` | El grosor del trazo, de fina a black | `font-weight` |
| Anchura | `wdth` | Anchos de letra de condensada a expandida | `font-stretch` |
| Tamaño óptico | `opsz` | Detalle, contraste y espaciado ajustados al tamaño | `font-optical-sizing` |
| Inclinación | `slnt` | Un ángulo oblicuo sin cambiar la forma de las letras | `font-style: oblique` |
| Cursiva | `ital` | Cambia a las formas de letra de una cursiva real | `font-style: italic` |
| Personalizado | p. ej. `GRAD`, `SOFT` | Lo que defina el diseñador | `font-variation-settings` |

Los cinco ejes registrados, más los personalizados. No todas las fuentes variables tienen todos los ejes: comprueba cuáles incluye la tuya.

Los ejes personalizados son donde las fuentes cobran personalidad. Roboto Flex tiene un eje de grado (`GRAD`) que cambia el grosor del trazo sin cambiar el ancho de las letras. Fraunces tiene `SOFT` para remates más redondeados y `WONK` para sus formas de letra más peculiares. Recursive tiene los ejes `MONO` y `CASL`, que la llevan de sans a monoespaciada y de lineal a informal. Puedes explorarlos todos en [Google Fonts](https://fonts.google.com/variablefonts), que te deja filtrar por familias variables.

## Por qué el tamaño óptico es lo que más importa

El peso se lleva la atención, pero el tamaño óptico suele ser el eje más útil. Los tipos de metal se tallaban por separado para cada tamaño: los tamaños pequeños tenían trazos más robustos, alturas de x mayores y un espaciado más holgado; los grandes eran más finos, con más contraste y un espaciado más apretado. Las fuentes digitales perdieron eso cuando un solo contorno pasó a escalarse a todos los tamaños. Un eje `opsz` lo recupera.

Un diseño vertical con una sola palabra compuesta a gran tamaño sobre un fondo degradado

Tamaños de titular: un eje de tamaño óptico afina el contraste y cierra el espaciado a medida que crece el texto.

Un diseño vertical con un titular y un texto de apoyo pequeño en la misma familia tipográfica

Tamaños de lectura: la misma familia abre y refuerza el texto pequeño para que sobreviva a la pantalla de un móvil.

Con `font-optical-sizing: auto` (el valor por defecto en los navegadores), una fuente con eje `opsz` se ajusta sola al tamaño de fuente que definas. No tienes que hacer nada salvo elegir una fuente que tenga el eje. Esto ayuda sobre todo en diseños con un titular grande y un texto de apoyo pequeño de la misma familia, que es el caso de casi todas las publicaciones para redes y las landing pages.

## Cuándo merece la pena usar fuentes variables

### Merece la pena

- Usas tres o más pesos o anchuras de una misma familia
- Quieres pesos intermedios para equilibrar el texto sobre distintos fondos
- Los titulares y el texto pequeño comparten una familia con eje de tamaño óptico
- Quieres animar el peso o la anchura en trabajos de movimiento

### Probablemente no

- Solo usas uno o dos pesos
- El corte estático pesa menos y nunca necesitas otros estilos
- Tu herramienta o plataforma no permite elegir valores de eje
- La versión variable no tiene un estilo o un idioma que necesitas

El tamaño del archivo es la contrapartida honesta. Un archivo variable lleva los datos de todos los estilos, así que suele pesar más que un solo peso estático pero menos que varios. Si una web carga solo Regular y Bold, es muy posible que dos archivos estáticos pesen menos. Si carga cuatro pesos y una cursiva, un solo archivo variable suele ganar, y obtienes gratis todos los pesos intermedios.

Los pesos intermedios son más útiles de lo que parece. El texto claro sobre un fondo oscuro o de color se ve más grueso que el mismo peso sobre blanco, así que podrías poner el texto blanco sobre un degradado a 460 en lugar de 500 para igualar ópticamente una versión oscura sobre claro. El efecto es sutil, pero es lo que hace que un sistema tipográfico se sienta afinado. [Texto sobre un degradado](https://gradiently.design/es/guide/text-on-gradient) explica el problema de legibilidad más amplio.

## Cómo usar fuentes variables en CSS

Declara la fuente una vez con un rango para cada eje y luego usa propiedades normales como `font-weight` y `font-stretch`. Recurre a `font-variation-settings` solo para los ejes personalizados, porque sobrescribe todos los ejes a la vez y no se hereda de forma amable. La [guía de fuentes variables](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) de MDN cubre los detalles.

```css
@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-variable.woff2") format("woff2");
  font-weight: 100 900;   /* the wght range in the file */
  font-stretch: 75% 125%; /* the wdth range, if it has one */
  font-display: swap;
}

body {
  font-family: "Brand Sans", system-ui, sans-serif;
  font-weight: 420;
  font-optical-sizing: auto;
}

h1 {
  font-weight: 720;
  font-stretch: 90%;
}

.on-dark {
  font-weight: 390; /* light on dark reads heavier */
}

/* Custom axes go through font-variation-settings. */
.soft {
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
```

Los ejes estándar mediante propiedades estándar; los personalizados mediante `font-variation-settings`. Los rangos de `@font-face` deben coincidir con lo que contiene el archivo.

> **Animar el peso mueve el texto** En la mayoría de las fuentes, las letras más gruesas también son más anchas, así que animar el peso al pasar el cursor desplaza el texto de alrededor. Usa una fuente con eje de grado, o reserva la animación de peso para palabras sueltas y titulares.

## Cómo montar un sistema tipográfico variable

1. **Revisa los ejes** Abre la página de muestra de la fuente y anota cada eje y su rango. Confirma que la versión variable incluye los idiomas y caracteres que necesitas.
2. **Define funciones, no pesos** Decide los pesos por función: texto de lectura, énfasis, subtítulo, titular, etiqueta. Un sistema de cinco valores afinados supera a nueve estándar usados al azar.
3. **Ajusta para cada fondo** Crea un peso algo más ligero para el texto claro sobre oscuro y compara ambos a tamaño real.
4. **Deja trabajar al tamaño óptico** Mantén `font-optical-sizing: auto` salvo que tengas un motivo para fijarlo, y revisa titulares y pies de foto uno al lado del otro.
5. **Déjalo por escrito** Anota el archivo de fuente, los rangos de los ejes y los valores de cada función en tu [guía de estilo de marca](https://gradiently.design/es/guide/brand-style-guide), para que nadie los reconstruya de memoria.

Las fuentes variables premian la contención. No se trata de usar todos los valores, sino de elegir los pocos exactos que hacen que tu tipografía se lea bien allí donde aparezca, desde un párrafo de 16 px hasta un [titular de exhibición](https://gradiently.design/es/guide/display-fonts) de 200 px.

## FAQ

### ¿Qué es una fuente variable?

Una fuente variable es un solo archivo de fuente que contiene un rango continuo de estilos a lo largo de uno o más ejes, como el peso o la anchura, para que puedas elegir cualquier valor intermedio en lugar de unos pocos estilos fijos.

### ¿Todos los navegadores admiten fuentes variables?

Todos los navegadores principales actuales las admiten. Consulta [caniuse](https://caniuse.com/variable-fonts) si necesitas dar soporte a navegadores muy antiguos, e incluye una pila de fuentes de respaldo.

### ¿Las fuentes variables pesan menos que las estáticas?

No siempre. Un archivo variable suele pesar más que un solo estilo estático pero menos que varios. El ahorro llega cuando, de otro modo, cargarías tres estilos o más.

### ¿Qué es el tamaño óptico de una fuente?

El tamaño óptico es un eje que ajusta el detalle, el contraste y el espaciado al tamaño al que se compone el texto, haciendo más robusto el texto pequeño y más fino el grande. Los navegadores lo aplican automáticamente con `font-optical-sizing: auto`.