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

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.

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 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 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 explica por qué.

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. 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. 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. 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. 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. 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.

Tracking, kerning e interlineado en 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;
}

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. 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.