letter-spacing

letter-spacing es la propiedad CSS que controla el espacio adicional entre cada carácter de un texto — lo que en tipografía profesional se llama tracking. Un valor positivo separa más las letras; un valor negativo las acerca. El efecto se aplica uniformemente a todos los caracteres del elemento: cada par de letras consecutivas recibe el mismo ajuste, no solo los extremos.

El tracking tiene un impacto profundo en la densidad visual y la legibilidad de un texto. Textos en mayúsculas o versalitas ganan mucho con un tracking positivo suave (0.05–0.1em): las letras mayúsculas son visualmente más pesadas y tienden a aparecer apelmazadas sin ese espacio extra. Para texto de cuerpo en minúsculas, en cambio, el tracking debe permanecer en normal o un ajuste muy leve; abrir demasiado el espacio entre letras rompe las palabras como unidades y dificulta la lectura. Los diseñadores de fuente ya calibraron el espaciado interno de cada tipo para el texto corrido.

letter-spacing se hereda: si lo declarás en un contenedor, todos los elementos hijos lo reciben automáticamente hasta que alguno lo sobreescriba. El valor heredado siempre es la longitud computada en píxeles, no el valor original en em — esto es relevante si usás em en un elemento con cierto font-size y sus hijos tienen otro tamaño. Para ajustes relativos al tamaño de letra, em es la unidad preferida.

Cómo funciona

El navegador toma el valor de letter-spacing y lo agrega al espaciado natural de cada carácter según la métrica de la fuente. Con normal, el espaciado es el que la fuente define internamente. Con un valor numérico, ese espacio adicional se suma al kerning natural. El ajuste se aplica también al último carácter de cada línea, lo que en algunos layouts genera una pequeña asimetría visual en alineación justificada.

/* Tracking positivo — encabezados en mayúsculas */
.titulo-caps {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Tracking negativo — para display muy grande */
.hero {
  font-size: 5rem;
  letter-spacing: -0.02em;
}

/* Restablecer en un hijo */
.hero span {
  letter-spacing: normal;
}

Sintaxis

selector {
  letter-spacing: normal | <longitud>;
}

Valores

normal — sin ajuste adicional

normal es el valor inicial. Le indica al navegador que use el espaciado interno de la fuente tal como fue diseñado por el tipógrafo. Equivale a 0 en la práctica para la mayoría de fuentes, pero no es lo mismo: 0 fuerza un espaciado de cero adicional sin considerar kerning de la fuente, mientras que normal deja libre el motor tipográfico.

p { letter-spacing: normal; } /* deja el espaciado de la fuente intacto */

Cuándo usar: para texto de cuerpo corriente y para cancelar un letter-spacing heredado.

Longitudes positivas — más espacio entre letras

Cualquier valor positivo en unidades CSS (px, em, rem, etc.) abre el espacio entre caracteres.

.label      { letter-spacing: 1px; }      /* ajuste sutil en px */
.caps-title { letter-spacing: 0.08em; }   /* relativo al font-size */
.navbar     { letter-spacing: 0.05rem; }  /* relativo al root */

Cuándo usar: encabezados en mayúsculas, etiquetas de categoría (NUEVO, OFERTA), logotipos textuales, subtítulos en versalitas. La unidad em es preferible porque el tracking se mantiene proporcional si cambiás el font-size.

Longitudes negativas — letras más apretadas

Un valor negativo reduce el espacio entre caracteres. Se usa en textos de display muy grandes donde el tracking positivo de la fuente resulta demasiado abierto a esos tamaños.

.hero-title { letter-spacing: -0.02em; }
.display    { letter-spacing: -1px; }

Cuándo usar: con precaución. El tracking negativo puede mejorar la cohesión visual en tamaños de fuente grandes (>48px), pero si exagerás, las letras se tocan y la legibilidad cae en picada.

word-spacing — espacio entre palabras

word-spacing es el hermano de letter-spacing: controla el espacio adicional entre palabras (entre tokens separados por espacio). También se hereda y acepta longitudes y la keyword normal.

p       { word-spacing: normal; }  /* sin ajuste */
.poesia { word-spacing: 0.2em; }   /* más espacio entre palabras */
.denso  { word-spacing: -2px; }    /* palabras más juntas */

word-spacing se usa mucho menos que letter-spacing. En diseño moderno, para separar elementos horizontalmente se prefieren Flexbox o Grid en lugar de ajustar el espaciado de palabras. Tiene efecto práctico en texto con text-align: justify, donde el navegador ya distribuye el espacio entre palabras: un word-spacing positivo agrega espacio encima de esa distribución, lo que puede exagerar el efecto. También se hereda de la misma forma que letter-spacing.

/* Combinar ambas propiedades en un titular */
.titular {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  word-spacing: 0.15em;
}

Cuándo usar qué

Notas, gotchas e interacción

• No uses letter-spacing en texto de cuerpo en minúsculas. El interletrado está cuidadosamente ajustado por el tipógrafo para lectura continua. Abrir ese espacio en párrafos largos cansa la vista y rompe el reconocimiento de palabras como unidades.
• La unidad em es más robusta que px. Si luego cambiás el font-size del elemento o en el diseño responsive, un letter-spacing en em se escala proporcionalmente; uno en px queda fijo y puede volverse desproporcionado.
• El último carácter recibe el ajuste igual que los demás. En elementos alineados a la derecha o centrados, esto agrega espacio extra después del último carácter, corriendo visualmente el texto hacia la izquierda del centro. En algunos casos conviene compensar con margin-right o ajustar el ancho del contenedor.
• letter-spacing interactúa con text-align: justify. En texto justificado, el navegador distribuye espacio entre palabras; letter-spacing agrega encima un espacio uniforme entre letras que puede combinarse bien o de forma excesiva según el valor.
• No afecta el ancho del elemento. letter-spacing alarga el texto visualmente pero no cambia el box model. Si el texto con tracking no entra en su contenedor, puede desbordar si overflow es visible.
• Se hereda con el valor computado. Si usás letter-spacing: 0.05em en un <div> con font-size: 16px, el valor computado es 0.8px. Un hijo con font-size: 32px hereda 0.8px, no 0.05em × 32px. Si querés que se escale, declaralo de nuevo en el hijo con em.

Vigente / legacy

letter-spacing existe desde CSS1 y está completamente vigente. No hay forma legacy. El atributo HTML <font> no tenía equivalente para tracking; siempre fue territorio CSS.

Aprendelo en el recorrido

Esta propiedad se trabaja en el módulo Tipografía y texto, lección Espaciado y alineación.