Espaciado entre letras: cuándo abrir el texto y cuándo apretarlo

El espaciado entre letras (tracking) es el espacio uniforme que se añade o se quita entre todas las letras de una palabra o una línea. La regla corta: añade espaciado a las mayúsculas y a las etiquetas pequeñas, apriétalo un poco en los titulares grandes y deja el texto de lectura con el valor por defecto de la fuente. La mayoría de los problemas de espaciado en diseños reales vienen de hacer lo contrario: mayúsculas apretadas, titulares grandes sueltos y párrafos espaciados para rellenar una caja.

El espaciado entre letras es uno de los tres ajustes de espacio que definen cómo se lee un texto. Los otros dos son el interlineado y la longitud de línea, y los tres se presentan en los fundamentos de tipografía.

Tracking y kerning: en qué se diferencian

Las dos palabras se usan como si fueran lo mismo, pero hacen trabajos distintos. El tracking cambia el espaciado de toda una selección por igual. El kerning cambia el espacio entre una pareja concreta de letras, porque algunas formas dejan huecos raros con su espaciado por defecto: piensa en AV, To, Ty o LT.

Las buenas fuentes traen miles de parejas de kerning, así que en tamaños de texto casi nunca hace falta ajustarlo a mano. En tamaños de titular y de logo, los pequeños huecos se notan, y ajustar a mano una o dos parejas vale el minuto que cuesta.

Por qué las mayúsculas necesitan más espaciado

Las minúsculas están diseñadas para ir junto a otras minúsculas: ascendentes, descendentes y formas redondas crean un contorno variado que el ojo lee como la forma de una palabra. Las mayúsculas son compactas y de altura parecida, así que con el espaciado por defecto se amontonan en una barra sólida. Un poco de tracking extra las separa y hace que cada letra se reconozca mejor.

Cuánto depende del tamaño. Las mayúsculas diminutas, como una etiqueta o un antetítulo de 11 a 13 px, admiten de 0.08em a 0.12em. Las mayúsculas a tamaño de subtítulo necesitan menos, entre 0.04em y 0.06em. Las mayúsculas muy grandes de un titular quizá no necesiten nada, o incluso un toque de ajuste hacia dentro.

Cuándo apretar el espaciado entre letras

Las fuentes se espacian para un rango de tamaños concreto, normalmente los de texto. Ampliado a 60 o 100 px, ese mismo espaciado se ve suelto y la palabra deja de leerse como una forma. Apretar un poco los titulares grandes, a menudo entre 0.01em y 0.03em, los vuelve a unir. Las fuentes con eje de tamaño óptico o con un corte Display aparte suelen hacerlo por ti, una de las ventajas que cuenta la guía de fuentes variables.

Aprieta con cuidado. Letras que se tocan, o letras redondas que empiezan a fundirse, son señal de que te has pasado, sobre todo en pesos gruesos. Revisa las parejas en el límite de lo que la fuente hace bien, como rn (que puede leerse como m) y cl (que puede leerse como d).

El espaciado entre letras en CSS

Define letter-spacing en em, no en píxeles, para que el espaciado se escale con el tamaño de la fuente. Así, un valor que va bien en una etiqueta de 12 px seguirá siendo proporcional si la etiqueta crece a 14 px. Consulta la referencia de MDN sobre letter-spacing para ver todo su comportamiento.

body {
  letter-spacing: normal; /* leave paragraphs alone */
  font-kerning: normal;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.button {
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.display {
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* Tracking also adds space after the last letter.
   Balance it when centring a short label. */
.eyebrow--centred {
  padding-inline-start: 0.1em;
}

Espaciado para texto pequeño, etiquetas y números

El texto pequeño agradece un poco más de espacio, porque a tamaños pequeños las letras se emborronan, sobre todo el texto claro sobre fondo oscuro. Muchas familias ya abren su espaciado en los tamaños ópticos pequeños. Si la tuya no lo hace, entre 0.01em y 0.03em en pies de foto y letra pequeña puede ayudar. A los números de las tablas les sirven más las cifras tabulares (font-variant-numeric: tabular-nums) que el tracking, porque se alinean en columnas.

Hay dos casos más que requieren cuidado. Las escrituras ligadas, como el árabe, no deben espaciarse, porque el espaciado rompe las uniones entre letras. Y el texto en minúsculas casi nunca debe abrirse: las minúsculas espaciadas rompen las formas de palabra que las hacen fáciles de leer.

Un punto de partida de espaciado para cada función

Usa estos valores por defecto y luego ajústalos a ojo según tu fuente. Mira el resultado al tamaño real, en una pantalla real, porque un espaciado que parece correcto con zoom en el lienzo de diseño a menudo se ve distinto al 100 por ciento.

Si tu diseño va sobre un degradado o una foto, el espaciado también afecta a la legibilidad: las letras finas y apretadas desaparecen antes sobre un fondo cargado que las abiertas. Combina estos ajustes con los consejos de texto sobre un degradado y combinar fuentes para diseños que se leen de un vistazo.