Kerning: qué es y cómo ajustar el espacio entre letras

Qué es el kerning en tipografía

Kerning es el proceso de ajuste manual o automático de la distancia entre pares de caracteres específicos para eliminar artefactos ópticos. El problema surge porque cada letra tiene una geometría única: la A tiene un vértice, la V tiene una inclinación derecha, la T tiene una barra transversal ancha. Cuando estas letras están una al lado de la otra, la distancia entre sus contornos parece desigual, aunque el ancho establecido sea el mismo.

Las tablas de kerning de las fuentes contienen pares de caracteres con valores de ajuste preestablecidos. Una buena tipografía puede tener de 300 a 2000 pares de kerning. Las tipografías profesionales — como SF Pro de Apple o Roboto de Google — incluyen tablas de kerning meticulosamente elaboradas que cubren todas las combinaciones posibles de letras latinas y cirílicas. Según la Fontshop Guide to Kerning, la calidad de las tablas de kerning es uno de los principales indicadores de una fuente profesional.

El efecto visual del kerning es especialmente notable en titulares, logotipos y texto de tamaños grandes (24 pt o más). En texto pequeño (12–14 pt) el espacio entre letras es más ajustado y el kerning es menos perceptible, aunque sigue funcionando. Los navegadores web y los sistemas operativos móviles aplican el kerning incorporado por defecto, pero los desarrolladores pueden desactivarlo o ajustarlo para diseños específicos.

Kerning y tracking: diferencias clave

Los desarrolladores principiantes suelen confundir el kerning y el tracking, pero son parámetros tipográficos fundamentalmente diferentes. El kerning trabaja a nivel de pares de caracteres y ajusta el espacio solo entre combinaciones específicas donde la geometría de las letras crea un desequilibrio óptico. El tracking (interletraje) cambia el intervalo entre todos los caracteres del fragmento seleccionado de manera uniforme, aumentándolo o disminuyéndolo por igual.

Cuándo se usa el tracking: para mejorar la legibilidad del texto pequeño (tracking positivo), para crear titulares de énfasis (tracking negativo), para estilizar texto en el diseño de interfaces. El tracking se define con un valor numérico y se aplica a cada carácter, incluidos los pares ya ajustados con kerning — las correcciones de kerning se conservan, pero se añade un desplazamiento general.

Regla importante: con tracking negativo (compresión), vigile los pares de kerning — pueden crear superposiciones no deseadas de letras. En CSS, la propiedad letter-spacing se aplica sobre la tabla de kerning de la fuente, y con una compresión fuerte (letter-spacing: -1px) las correcciones de kerning pueden provocar la fusión de caracteres.

Implementación del kerning en iOS mediante NSAttributedString

En iOS, el kerning se gestiona mediante el atributo .kern en NSAttributedString. El valor del atributo es un Float, donde un número positivo aumenta el espacio, uno negativo lo reduce y 0 desactiva el kerning. El valor por defecto es nil, lo que significa usar la tabla de kerning de la fuente. La API principal para trabajar con kerning es NSMutableAttributedString añadiendo el atributo a un rango de texto.

let text = "Kerning in mobile interfaces"
let attributedText = NSMutableAttributedString(
    string: text
)

// Habilitar kerning (usa la tabla de la fuente)
attributedText.addAttribute(
    .kern,
    value: 0.5,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// Aplicar a UILabel
label.attributedText = attributedText

Valor por defecto .kern = nil activa el kerning desde la tabla de la fuente. Si necesita desactivar el kerning por completo, establezca .kern = 0. Los valores 0.0 y nil son estados diferentes: nil usa la tabla, 0 fuerza a cero todos los pares de kerning. Según la Apple Text Programming Guide, establecer explícitamente 0 es útil para texto monoespaciado o casos donde el kerning interfiere — por ejemplo, en botones de ancho fijo.

SwiftUI proporciona el modificador .kerning() para Text. A diferencia de UIKit, en SwiftUI el kerning se define a nivel de vista, no en una cadena con atributos. El modificador acepta un CGFloat y se aplica a todo el texto dentro del bloque Text. Para kerning parcial en SwiftUI se usa una combinación del operador + en Text y modificadores individuales.

struct KerningView: View {
    var body: some View {
        Text("Titular con kerning")
            .kerning(1.0)
            .font(.title)
    }
}

Rendimiento: NSAttributedString con un atributo de kerning recalcula las posiciones de los caracteres durante el renderizado. Para texto estático esto ocurre una vez. Para texto dinámico (texto cambiante en UICollectionView) — cada vez que cambia. Usar un rango grande con kerning en cadenas largas (más de 500 caracteres) puede reducir los FPS durante el desplazamiento.

Configuración del kerning en Android mediante letterSpacing

En Android, el kerning se gestiona mediante la propiedad letterSpacing en TextView y diseños XML. El atributo es un Float y funciona como multiplicador del tamaño em de la fuente. El valor 0 corresponde al kerning por defecto, los valores positivos aumentan el espacio, los negativos lo reducen. letterSpacing está disponible desde API Level 21 (Android 5.0 Lollipop).

Implementación mediante SpannableString permite aplicar kerning a una parte de la cadena en lugar de a todo el texto. Se usa la clase ScaleXSpan o un ReplacementSpan personalizado para un control preciso. Según la Android Developer Guide, ScaleXSpan escala los caracteres horizontalmente, simulando cambios en el espacio entre caracteres, pero no proporciona control directo sobre los pares de kerning.

// En diseño XML
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with kerning"
    android:letterSpacing="0.05" />

// Mediante programación en Kotlin
val textView = findViewById<TextView>(R.id.myTextView)
textView.letterSpacing = 0.05f

Limitación: Android no admite tablas de kerning directamente — letterSpacing funciona como tracking para todos los caracteres. Para kerning por pares en Android se usan fuentes con tablas de kerning incorporadas (OpenType GPOS feature kern). La compatibilidad depende de la versión del SO y el motor de renderizado: en Android 10+ se usa Minikin con soporte completo de funciones OpenType, en versiones anteriores HarfBuzz con limitaciones. Recomendación: pruebe la visualización del kerning en dispositivos con Android inferior a 8.0.

Kerning en desarrollo web mediante CSS

En la web, el kerning se controla mediante la propiedad CSS font-kerning, que activa o desactiva las tablas de kerning incorporadas de la fuente. Valores: auto (el navegador decide), normal (kerning activado), none (kerning desactivado). La propiedad es compatible con todos los navegadores modernos desde 2016. Según MDN Web Docs, font-kerning solo se aplica a fuentes OpenType con tabla de kerning.

La propiedad CSS letter-spacing es el equivalente del tracking, pero también se usa para efectos similares al kerning. A diferencia de font-kerning, letter-spacing cambia el intervalo entre todos los caracteres de manera uniforme, sin considerar los pares de kerning. Cuando se usan ambas propiedades, font-kerning se aplica primero, luego letter-spacing añade un desplazamiento uniforme adicional.

/* Enable kerning for headings */
h1 {
    font-kerning: normal;
    letter-spacing: 0.02em;
}

/* Disable kerning for monospace */
code, pre {
    font-kerning: none;
}

Utilidad TypeScript para calcular el letter-spacing óptimo considerando el kerning puede analizar la tabla de kerning de la fuente mediante Canvas API. Sin embargo, en la práctica los desarrolladores web confían en font-kerning: normal en la mayoría de los casos ofrece resultados óptimos. El ajuste adicional de letter-spacing solo es necesario para acentos de diseño — por ejemplo, en páginas de aterrizaje con tipografía grande.

Recomendaciones prácticas para configurar el kerning

El kerning es una herramienta de ajuste fino, y su aplicación incorrecta empeora la legibilidad. Primera regla: no cambie el kerning para el texto del cuerpo. Las tablas de kerning de las fuentes profesionales ya contienen valores óptimos para tamaños de 12–16pt. Interferir con el kerning del texto del cuerpo provoca desigualdad y ruido visual.

Segunda regla: para titulares desde 24pt, use kerning positivo (0.5–1.5 pt según la tipografía). El texto grande requiere más espacio entre letras para la legibilidad. Las fuentes con x-height baja (por ejemplo, Didot) requieren más kerning que las fuentes con x-height alta (por ejemplo, Helvetica). Datos de referencia: en la aplicación iOS Apple Music, los titulares usan kerning de 0.8 pt.

Tercera regla: pruebe siempre el kerning en cadenas reales, no en Lorem Ipsum. Diferentes combinaciones de caracteres producen diferentes efectos visuales. Preste especial atención a los pares con vocales y consonantes con elementos salientes: AV, Te, To, Wa, LT. Con kerning negativo, vigile los pares fi, fl, fj — en algunas fuentes pueden fusionarse sin ligadura.

Aspecto de accesibilidad: los usuarios con dislexia leen mejor el texto con un ligero kerning positivo (0.3–0.5 pt). iOS y Android admiten configuraciones de accesibilidad que pueden anular el kerning de la aplicación. Use UIFontDescriptor con Dynamic Type y tenga en cuenta el kerning en las configuraciones de accesibilidad mediante UIAccessibility. Importante: no bloquee las configuraciones de kerning del sistema — esto viola la WCAG 2.2 Pauta 1.4.12 sobre adaptación de texto.