Kerning: cómo arreglar los huecos entre letras

El kerning es el ajuste del espacio entre dos letras concretas para que una palabra se vea espaciada de forma uniforme. Algunos pares de formas dejan un hueco cuando se sitúan juntos: la diagonal de una A junto a la diagonal de una V, el voladizo de una T sobre una o pequeña. El kerning acerca esos pares, u ocasionalmente separa un par apretado, hasta que los huecos parecen iguales a la vista. Es distinto del tracking, que cambia el espaciado de todas las letras de una línea a la vez.

Por qué algunos pares de letras necesitan kerning

Cada letra de una tipografía está en una caja invisible con un poco de espacio incorporado a cada lado. Eso funciona con la mayoría de las combinaciones: n junto a o, h junto a e. Falla donde las formas están abiertas por un lado. Las diagonales, los brazos voladizos y las letras redondas junto a las rectas crean bolsas de blanco que parecen una letra que falta.

El caso de r y n es el origen de un viejo chiste de tipógrafos: si compones la palabra kerning con el espaciado demasiado apretado, se lee keming. Es un buen recordatorio de que el kerning funciona en ambos sentidos.

Cuándo kernear a mano

Las buenas tipografías traen una tabla de kerning, una lista de pares y cuánto ajustar cada uno, así que el texto de cuerpo y la mayoría de los textos de interfaz ya están resueltos. El kerning manual compensa cuando el texto es grande o permanente.

• Titulares de más de unos 60 px en pantalla, donde un hueco de 2 px se convierte en un agujero visible.
• Logos y logotipos, que se verán miles de veces en todos los tamaños. El diseño de logotipos profundiza más.
• Todo en mayúsculas, donde las diagonales como A, V, W e Y coinciden con más frecuencia.
• Líneas de carteles y miniaturas, donde tres o cuatro palabras cargan con todo el diseño.
• Tipografías gratuitas o de exhibición con tablas de kerning escasas, que pueden dejar sin ajustar pares comunes.

Cómo kernear un titular o un logotipo a ojo

El objetivo es un área uniforme entre letras, no una distancia medida igual. Dos astas rectas, como H e I, necesitan el máximo espacio entre ellas. Una recta junto a una redonda, como H y O, necesita un poco menos. Dos redondas, como O y C, necesitan lo mínimo. Las diagonales y los voladizos necesitan la mayor corrección de todas.

1. 1

   Fija primero el tracking

   Decide el espaciado general de la línea antes de tocar los pares. Kernear una línea y luego cambiar su tracking deshace la mitad de tu trabajo.

2. 2

   Trabaja de tres en tres

   Mira tres letras a la vez y ajusta la del medio para que los dos huecos a cada lado coincidan. Luego avanza una letra.

3. 3

   Ponla boca abajo

   Voltea la palabra o mírala en espejo. Cuando ya no puedes leerla, ves formas y huecos en lugar de letras.

4. 4

   Desenfoca o entrecierra los ojos

   Un ligero desenfoque convierte los espacios en manchas grises. Cualquier mancha claramente más clara u oscura que sus vecinas es un par que arreglar.

5. 5

   Compruébala pequeña y grande

   Mira la palabra al tamaño en que se usará y al tamaño más pequeño en que aparecerá. Un logotipo kerneado solo a tamaño de cartel puede empastarse a tamaño de favicon.

6. 6

   Déjalo y vuelve a mirar

   Vuelve tras un descanso. El kerning a ojo se desvía si miras demasiado tiempo, y unos ojos frescos detectan el par que apretaste de más.

La mayoría de las herramientas de diseño te dejan kernear colocando el cursor entre dos letras y ajustando con un atajo de teclado. En las apps de Adobe la unidad es una milésima de em, así que un valor de menos 40 acerca el par un 4 % del tamaño del texto, sea cual sea ese tamaño.

Kerning métrico frente a óptico

Muchas herramientas de maquetación ofrecen dos modos automáticos. El kerning métrico usa los pares que el diseñador de la tipografía incorporó en la fuente. El kerning óptico los ignora y calcula el espaciado a partir de los contornos de cada letra. El métrico es el mejor valor por defecto para una tipografía bien hecha, porque una persona tomó esas decisiones. El óptico puede salvar una tipografía con una tabla de kerning pobre o ausente, y ayuda cuando mezclas dos tipografías en una palabra.

Kerning en CSS

Los navegadores aplican el kerning de una tipografía automáticamente en la mayor parte del texto, pero puedes hacerlo explícito. La propiedad font-kerning activa o desactiva los pares integrados. CSS no tiene una propiedad para ajustar un par concreto, así que para un titular o logo sueltos lo habitual es envolver una letra en un span y empujarla con un margen negativo o con espaciado entre letras.

/* Use the font's own kerning pairs everywhere */
body {
  font-kerning: normal;
}

/* Hand kerning one pair in a large headline: <h1>A<span class="k-av">V</span>A</h1> */
.k-av {
  margin-inline-start: -0.06em;
}

/* Monospaced code should never be kerned */
code, pre {
  font-kerning: none;
}

Si quieres cambiar el espaciado de una línea entera y no de un par, eso es tracking, que se fija con letter-spacing. Tracking frente a kerning explica cómo funcionan juntos con el interlineado, y el espaciado entre letras da valores de partida para mayúsculas, etiquetas y titulares.

Para saber más sobre cómo hacer que un texto grande parezca intencionado, mira las tipografías de exhibición y los fundamentos de la tipografía. Sobre un fondo degradado o con textura, el espaciado es solo la mitad de la legibilidad: una palabra bien kerneada aún puede romperse donde cambia el color de detrás. Un Mark de Gradiently mueve su zona más tranquila detrás de tus palabras y elige tinta clara u oscura por línea, así que un titular cuidadosamente espaciado se lee uniforme de la primera letra a la última.