# Tracking, kerning e interlineado: el trío del espaciado

[Canonical HTML page](https://gradiently.design/es/guide/tracking-vs-kerning)

Tres palabras para tres huecos distintos. Si las mezclas, acabas arreglando el equivocado. Esto es lo que controla cada una, por cuál empezar y los números que sirven de punto de partida.

## The short version

- El tracking cambia el espacio entre todas las letras de una línea o bloque de texto a la vez.
- El kerning cambia el espacio entre un par concreto de letras, como A y V.
- El interlineado es la distancia vertical entre líneas de texto, que en CSS y en la mayoría de las apps se llama altura de línea.
- Fija primero el interlineado y el tracking de un estilo entero, y kernea pares sueltos solo en texto grande.
- Los titulares grandes suelen pedir un tracking y un interlineado algo más cerrados, mientras que las mayúsculas y el texto pequeño piden más tracking.

En **tracking vs kerning**, la diferencia es el alcance. El tracking ajusta el espacio entre todas las letras de una selección, de modo que un titular entero se abre o se cierra de forma uniforme. El kerning ajusta el espacio entre un par concreto, como la A y la V de WAVE, para arreglar un hueco que la tipografía dejó. El interlineado, el tercero del trío, no tiene nada que ver con letras una al lado de otra: es el espacio vertical de una línea de texto a la siguiente.

| Término | Qué cambia | Alcance | Nombre en CSS |
| --- | --- | --- | --- |
| Tracking | Espacio entre todas las letras | Una palabra, línea o párrafo | `letter-spacing` |
| Kerning | Espacio entre un par de letras | Dos caracteres | `font-kerning` (solo activado o desactivado) |
| Interlineado | Espacio entre líneas | Un párrafo o cuadro de texto | `line-height` |

El trío del espaciado de un vistazo. Dos actúan en horizontal, uno en vertical, y solo uno funciona sobre un único par.

## Qué es el tracking en tipografía

El tracking es un cambio uniforme. Seleccionas una línea, añades tracking y cada hueco crece en la misma cantidad. Es la herramienta para cambiar la *textura* del texto: ligero y formal, o denso y contundente. En las apps de diseño se mide en milésimas de em (Adobe) o como porcentaje del tamaño de letra (Figma), y en CSS como `letter-spacing`, mejor escrito en em para que escale con el texto.

Hay tres situaciones que lo piden. Los titulares grandes suelen verse sueltos con su espaciado por defecto, así que un poco de tracking negativo los junta. Las mayúsculas se ven apretadas, porque se diseñaron para ir junto a minúsculas, así que necesitan tracking positivo. Y el texto muy pequeño, como etiquetas y líneas legales, se lee mejor con un poco más de aire. [El espaciado entre letras](https://gradiently.design/es/guide/letter-spacing) trata cada caso en detalle.

## Qué es el kerning

El kerning es una reparación local. Algunos pares de letras dejan un hueco visible o chocan incluso en una tipografía bien espaciada: AV, To, LT, Yo, P seguida de un punto. Las tipografías incluyen una tabla de estos pares y los ajustan automáticamente, así que en el texto de cuerpo puedes dejar el kerning en paz. En titulares, logos y logotipos quizá aún tengas que ajustar un par o dos a mano. [Kerning](https://gradiently.design/es/guide/kerning) tiene la lista completa de pares problemáticos y un método para arreglarlos a ojo.

## Qué es el interlineado en tipografía

El interlineado en inglés, leading, toma su nombre de las tiras de plomo que los impresores colocaban entre líneas de tipos metálicos. Hoy es la altura de línea: la distancia de una línea base a la siguiente. Si es poca, los ascendentes chocan con los descendentes; si es mucha, las líneas se separan en ideas distintas. Por norma, cuanto más larga la línea y más pequeño el texto, más interlineado necesita. [Altura y longitud de línea](https://gradiently.design/es/guide/line-height-and-line-length) explica por qué.

Una publicación vertical con un antetítulo en mayúsculas espaciadas que dice NUEVA TEMPORADA sobre un titular muy compacto que dice Ya llega la colección de primavera

Dónde va cada ajuste: tracking abierto en la antetítulo en mayúsculas, tracking e interlineado cerrados en el titular, espaciado normal en la línea de detalle.

Una publicación vertical editorial con una pequeña etiqueta espaciada que dice NÚMERO 04 y un título que dice Notas desde el estudio

Una maquetación editorial. Su texto pequeño, la etiqueta y el subtítulo, se lee con más calma con un interlineado generoso y un tracking algo abierto.

## Qué cambiar primero: tracking, kerning o interlineado

Trabaja de la decisión más grande a la más pequeña. El interlineado y el tracking definen el estilo; el kerning ordena lo que queda. Si los cambias en el orden equivocado, deshaces tu propio trabajo.

1. **Elige tamaño y grosor** El espaciado depende de ambos. Fíjalos primero, porque un grosor más pesado o un tamaño mayor piden valores distintos.
2. **Fija el interlineado** Decide cuán apretadas se apilan las líneas. Los titulares, más cerrados; los párrafos, más abiertos.
3. **Fija el tracking del estilo** Aplica un único valor de tracking a todo el estilo de titular, de etiqueta o de cuerpo. Mantenlo coherente en todo el diseño.
4. **Kernea los pares que aún dejan hueco** Solo en texto grande o permanente. Busca AV, To, LT y pares similares y ajústalos de uno en uno.
5. **Comprueba a tamaño real** Mira el resultado al tamaño en que lo verá la gente. Un espaciado que parece correcto ampliado puede verse suelto en un móvil.

## Valores de partida para tracking e interlineado

Son valores razonables por defecto, no leyes. Las tipografías difieren, y una tipografía de exhibición condensada no se comporta como una geométrica ancha. Úsalos para empezar y luego confía en tu ojo.

| Función del texto | Tracking (CSS) | Tracking (unidades de Adobe) | Interlineado |
| --- | --- | --- | --- |
| Texto de cuerpo, de 14 a 20 px | 0 | 0 | 1,4 a 1,6 |
| Titular, de 48 px en adelante | -0,01em a -0,03em | -10 a -30 | 1,0 a 1,15 |
| Texto de exhibición enorme, de 120 px en adelante | -0,02em a -0,04em | -20 a -40 | 0,9 a 1,05 |
| Etiquetas en mayúsculas | 0,06em a 0,12em | 60 a 120 | 1,2 a 1,3 |
| Texto pequeño de menos de 13 px | 0,01em a 0,02em | 10 a 20 | 1,4 a 1,5 |

El tracking en em de CSS y en milésimas de em de Adobe dicen lo mismo: 0,05em equivale a 50 unidades. El interlineado se muestra como múltiplo del tamaño de letra.

### Errores comunes

- Kernear todos los pares cuando el tracking está mal
- Cerrar el tracking del texto de cuerpo para que quepan más palabras
- Interlineado por defecto en un titular de tres líneas
- Mayúsculas con tracking cero
- Un tracking distinto en cada titular de una serie

### Mejor

- Arregla primero el tracking y luego kernea lo que quede
- Edita el texto en su lugar
- Baja el interlineado del titular a unos 1,1
- Abre las mayúsculas 0,06em o más
- Un valor por estilo, anotado en las reglas de tu marca

## Tracking, kerning e interlineado en CSS

```css
:root {
  font-kerning: normal; /* use the font's own pairs */
}

body {
  font-size: 1.0625rem;
  line-height: 1.55;      /* leading */
  letter-spacing: 0;      /* tracking */
}

h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.eyebrow {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
```

Escribe `line-height` sin unidad para que escale con el tamaño de letra, y `letter-spacing` en em por la misma razón.

Guarda estos valores en un solo lugar para que cada página use el mismo espaciado para la misma función. Ese es el corazón de un [sistema tipográfico](https://gradiently.design/es/guide/brand-typography-system). Si diseñas publicaciones sociales y no páginas web, la idea es la misma: decide el espaciado una vez, anótalo en las reglas de tu marca y reutilízalo. En Gradiently, el kit de marca guarda tus tipografías de titular y de cuerpo y el Designer lo aplica al maquetar nuevos tamaños, de modo que el texto sea coherente desde una publicación cuadrada hasta una story.

## FAQ

### ¿Cuál es la diferencia entre tracking y kerning?

El tracking cambia el espaciado entre todas las letras de una selección. El kerning cambia el espaciado entre un par concreto de letras.

### ¿El interlineado es lo mismo que la altura de línea?

Sí, en la práctica. Interlineado es el término tradicional de imprenta y altura de línea es como CSS y la mayoría de las apps de diseño llaman a la distancia entre líneas.

### ¿Debo ajustar primero el tracking o el kerning?

Primero el tracking. Fija el espaciado general; luego el kerning arregla los pocos pares que aún se ven desiguales, y solo en texto grande.

### ¿Cómo se llama el tracking en CSS?

`letter-spacing`. Escríbelo en em, como `0.05em`, para que se mantenga proporcional cuando cambie el tamaño de letra.

### ¿Qué altura de línea debe tener el texto de cuerpo?

Alrededor de 1,4 a 1,6 veces el tamaño de letra para el texto de cuerpo, y de 1,0 a 1,15 para titulares grandes.