El kerning es el espacio entre dos letras concretas. Cuando está mal, la palabra parece tener un hueco, o dos letras parecen a punto de chocar. En el texto corrido la fuente se encarga, pero en titulares grandes, logos y etiquetas en mayúsculas un par mal espaciado es lo primero que se nota, aunque la gente no sepa explicar por qué.
Espaciado, kerning y tracking
- Espaciado (márgenes laterales): el espacio por defecto que el diseñador de la fuente pone alrededor de cada letra.
- Kerning: un ajuste para un par concreto, como AV o To, guardado en la tabla de kerning de la fuente.
- Tracking (letter-spacing): el mismo ajuste aplicado a todos los pares de un texto.
El kerning corrige pares y el tracking cambia la textura. Confundirlos es el error más común: cerrar el tracking de todo un titular para tapar un hueco deja todos los demás pares demasiado juntos.
Los pares que dan problemas
- Diagonal contra diagonal: AV, VA, AW, WA, AY. La cuña entre los trazos deja un gran triángulo blanco.
- Voladizos: T, V, W, Y y F junto a minúsculas (To, Ty, Yo, Wa). La minúscula tiene que meterse debajo de la parte superior de la mayúscula.
- Letras redondas: o, c, e, O, C. Tocan el espacio en un solo punto, así que van un poco más juntas que las rectas como n o H.
- Puntuación: puntos, comas y comillas después de T, V, W e Y ("T.", "Y,").
Cómo juzgarlo
El espaciado es cuestión de área, no de distancia. La meta es que el blanco entre cada par se vea como la misma cantidad de gris, aunque las distancias medidas sean distintas. Tres hábitos ayudan:
- Entrecierra los ojos o desenfoca la palabra: los grupos oscuros y los huecos claros saltan a la vista.
- Ponla de cabeza: dejas de leer la palabra y empiezas a ver formas.
- Juzga de a tres: compara cada letra con sus vecinas de ambos lados, no un par aislado.
En Figma
Figma aplica el kerning de la fuente automáticamente. Para ajustar un par, selecciona la primera letra del par y cambia su Letter spacing, o presiona Option + ← / → en Mac (Alt + ← / → en Windows). El letter spacing de un solo carácter suma o resta espacio después de él, que es justo un ajuste de kerning. Hazlo al tamaño en que se usará el texto: un kerning que se ve bien a 24px puede verse suelto a 120px.
En CSS
Los navegadores aplican la tabla de kerning de la fuente por defecto (font-kerning: auto, que algunos navegadores desactivan en texto pequeño). Mantenlo activo y ajusta a mano solo en textos grandes:
.headline { font-kerning: normal; }
/* un par, por ejemplo la A de "AVATAR" */
.headline .tight { letter-spacing: -0.06em; }Usa em y no px, para que el ajuste escale con el tamaño de la fuente. Envolver letras sueltas en spans está bien para un logo o un titular principal; para textos que cambian seguido, elige mejor una fuente con buen kerning.
El tracking es otra decisión: los titulares grandes suelen pedir un tracking levemente negativo (de -0.01em a -0.03em, aprox.) y las etiquetas en mayúsculas uno positivo (de 0.05em a 0.1em, aprox.).
Para practicar
Ajusta el kerning te da seis palabras con un par mal espaciado cada una y compara tu ojo con el kerning que incluyó el diseñador de la fuente. Toma dos minutos, y después de unas rondas empiezas a ver pares sueltos en todas partes.