Reglas de espaciado entre letras según el tamaño de fuente

Haz un pequeño experimento antes de leer ninguna regla. Compón la misma palabra — “Hardware” funciona bien — a 12px y a 64px en la misma fuente, y fíjate en los huecos entre las letras en lugar de en las letras mismas. A 64px los huecos se han convertido en formas visibles por sí mismos, y la palabra se lee un poco suelta. A 12px esas mismas letras parecen apretarse unas contra otras. Nada de la fuente cambió — solo el tamaño.

Esa es la regla fundamental del espaciado entre letras (los tipógrafos lo llaman tracking): se mueve en contra del tamaño de fuente. El texto grande de display se aprieta — valores negativos en torno a −0,02em a 48px y más; el texto de cuerpo se deja en paz, porque las fuentes ya vienen espaciadas para los tamaños de lectura; y el texto pequeño, sobre todo las etiquetas en mayúsculas, se abre — +0,05em o más. El resto de este artículo cubre por qué existe la regla, cuánto aplicar en cada nivel de una escala y qué unidades usar. Forma parte de nuestra guía de escala tipográfica.

¿Por qué el espaciado entre letras depende del tamaño de fuente?

Cada glifo de una fuente lleva un espacio incorporado a cada lado — los diseñadores de tipos los llaman sidebearings (márgenes laterales) — ajustado para que el texto quede parejo en los tamaños que el diseñador previó, normalmente tamaños de lectura en el rango de 9–14pt. Ese espacio escala de forma lineal con la fuente, pero la percepción no escala con él. A tamaños de display el ojo capta la palabra entera de golpe, y los huecos agrandados empiezan a registrarse como formas por derecho propio: la palabra se lee suelta. A tamaños muy pequeños esos mismos huecos se encogen por debajo de lo que el ojo necesita para separar un trazo del siguiente: la palabra se lee apretada.

En los tipos de metal este problema apenas existía, porque cada tamaño físico se cortaba por separado, con su espaciado ajustado para ese tamaño. Una fuente digital suele ser un solo contorno, escalado — así que el ajuste óptico que antes venía incorporado en cada tamaño hay que reinstaurarlo a mano. El tracking es esa reinstauración. (Algunas fuentes variables incluyen ahora un eje de tamaño óptico, opsz, que automatiza parte de esto — pero ajusta las formas de las letras y el espaciado que eligió el diseñador, y sigue siendo la minoría de las fuentes en uso de producción.)

¿Cuánto espaciado entre letras debería recibir cada tamaño?

Aquí tienes un conjunto trabajado de valores de partida sobre una escala modular común — base de 16px, proporción 1,333, dos notas por intervalo — que cubre los niveles que la mayoría de los sistemas incluyen:

Vale la pena notar dos cosas en los números. Primero, los efectos absolutos son diminutos: a 51px, −0,02em quita alrededor de un píxel entre cada par de letras — y eso basta para marcar la diferencia entre airoso y compuesto. El tracking es un condimento, no un ingrediente. Segundo, los valores son puntos de partida, no ley: una sans geométrica de formas abiertas y regulares tolera un tracking de display más apretado que una serif de uniones delicadas, y las tipografías condensadas a menudo no quieren nada. La dirección de la regla es fiable; la cantidad exacta es un juicio que haces con tus ojos.

Observa el patrón en todo un sistema: abre esta escala en Scale Composer — cada nivel, de caption a display, lleva su propio valor de espaciado entre letras, apretándose a medida que crecen los tamaños. Ajusta el tracking en cualquier nivel y compáralo con sus vecinos.

¿Por qué el texto en mayúsculas necesita espaciado entre letras adicional?

Las palabras en minúsculas tienen siluetas: los ascendentes y descendentes le dan a “hardware” un perfil que difiere del de “software”. Una palabra toda en mayúsculas es un rectángulo uniforme — el perfil desaparece, y al lector no le queda más que identificar la palabra letra por letra. El tracking adicional hace que cada letra sea más fácil de aislar e identificar, y por eso el texto pequeño en mayúsculas — overlines, etiquetas, textos de botón — recibe convencionalmente de +0,05em a +0,1em.

La misma lógica dice qué evitar: el tracking negativo en texto pequeño en mayúsculas trabaja en contra del principal canal de reconocimiento que le queda. Las mayúsculas apretadas pueden funcionar a tamaños de display, donde cada letra es lo bastante grande como para identificarla sin esfuerzo, pero a 11–12px, ábrelas.

¿El espaciado entre letras debería usar em o px?

Usa em. El tracking expresado en em es relativo al tamaño de fuente al que se aplica, así que la proporción viaja con el texto: un estilo de etiqueta con letter-spacing: 0.05em mantiene la misma apertura visual tanto si la etiqueta se renderiza a 11px como a 13px. Un valor en píxeles está congelado — 1px de tracking que se ve bien a 12px se vuelve invisible a 24px y aparatoso a 8px, y hay que volver a derivarlo cada vez que cambia un tamaño. En una escala, donde los tamaños se generan en lugar de fijarse para siempre, em es la unidad que sobrevive a un reajuste.

En CSS la propiedad es letter-spacing, y tiene una sutileza que conviene conocer: el valor por defecto normal no es lo mismo que 0. normal significa el espaciado incorporado de la fuente más permiso para que el navegador ajuste los huecos al justificar el texto; 0 prohíbe ese ajuste. Para texto de interfaz alineado a la izquierda ambos se renderizan igual, pero la distinción es una razón para dejar el texto de cuerpo en normal en vez de “explícitamente en cero”.

Esto es también por qué el tracking pertenece dentro de un token de tipografía y no junto a él: un estilo de display es su tamaño, su interlineado, su peso y su tracking juntos. Entrega el tamaño sin el −0,02em y no habrás entregado el estilo.

Pon la regla a prueba con tu propia tipografía

La forma más rápida de interiorizar el tracking dependiente del tamaño es verlo fallar: abre un nivel de display apretado a −0,02em, luego devuelve el espaciado entre letras a 0 y mira el titular de nuevo — la soltura que no supiste nombrar al primer vistazo se vuelve obvia una vez que has visto la versión corregida. Después prueba el experimento opuesto con el overline: baja su +0,08em hasta cero y observa cómo se apelmaza la etiqueta en mayúsculas. Tu propio tipo de letra te dirá los valores exactos; la dirección de la regla se mantendrá.