Tracking en desarrollo móvil — esencia y configuración del espacio entre caracteres

Qué es el tracking en tipografía

Tracking es el ajuste del espacio entre caracteres, aplicado uniformemente a todos los caracteres de un bloque de texto. A diferencia del kerning, donde cada par de caracteres recibe un ajuste individual basado en la tabla de kerning de la fuente, el tracking se establece como un único valor numérico para todo el rango. El tracking positivo aumenta el intervalo (espaciado expandido), el tracking negativo lo reduce (espaciado condensado).

El término proviene de la tipografía metálica, donde el espacio entre caracteres se regulaba mediante la distancia física entre los tipos. En la tipografía digital, el tracking se aplica sobre la tabla de kerning: primero la fuente aplica sus pares de kerning incorporados, luego el sistema añade tracking uniforme a todos los caracteres. El intervalo resultante = kerning + tracking, lo que es importante considerar al condensar agresivamente el texto.

Unidades de medida: el tracking puede especificarse en unidades absolutas (puntos, píxeles, milímetros) y relativas (em, porcentaje del tamaño de fuente). En el desarrollo móvil, el tracking se especifica típicamente en puntos (iOS) o sp (Android) como valores absolutos, en la web en em como valores relativos. Las unidades relativas son preferibles para accesibilidad porque se escalan cuando el usuario cambia el tamaño de fuente.

Tracking y kerning: diferencias fundamentales

La confusión entre tracking y kerning es uno de los errores más comunes entre diseñadores y desarrolladores novatos. El kerning funciona a nivel micro — ajusta el intervalo entre pares de caracteres específicos (AV, Te, To) según su geometría. El tracking funciona a nivel macro — desplaza uniformemente todos los caracteres de un fragmento sin considerar su forma.

Efecto visual: con kerning, las distancias entre diferentes pares de caracteres varían — entre A y V es menor que entre A y I, porque las formas de las letras se compensan entre sí. Con tracking, todas las distancias son iguales — entre A y V, A y I, T y o — el mismo desplazamiento en todas partes. Esto hace del tracking una herramienta de ajuste global y del kerning una herramienta de ajuste fino.

Uso combinado: en la tipografía de interfaces, el tracking y el kerning se usan juntos. La fuente incluye una tabla de kerning para la optimización básica, y el desarrollador añade tracking para estilización o accesibilidad. La tabla de kerning se aplica primero, luego se añade el tracking encima. Con tracking negativo (condensación), los pares de kerning pueden crear superposiciones no deseadas — verifique las combinaciones problemáticas.

Tracking positivo y negativo: cuándo usarlos

Tracking positivo aumenta la distancia entre caracteres. Se usa para mejorar la legibilidad del texto pequeño (10–13pt), donde los caracteres se fusionan visualmente con el espaciado estándar. También se usa en accesibilidad para usuarios con dislexia — el mayor espacio entre caracteres facilita el reconocimiento de letras. Valores típicos: 0.3–1pt para iOS, 0.02–0.05em para la web.

Tracking negativo reduce la distancia entre caracteres. Se usa en títulos (desde 24pt) y texto de acento, donde el texto denso se ve cohesivo y moderno. Los tamaños grandes manejan bien la condensación porque las distancias entre caracteres son visualmente grandes. Valores típicos: de -0.3 a -1pt. Limitación: con tracking por debajo de -1pt, los caracteres pueden superponerse, especialmente en pares con elementos salientes (fi, fj, TT).

Regla práctica: para cada tamaño de fuente existe un rango de tracking aceptable. Cuanto mayor sea la fuente, menos tracking se necesita para una legibilidad óptima. Fórmula: tracking óptimo ≈ font-weight × 0.01 − font-size × 0.001. Para una fuente negrita (weight 700) de 16pt: 700 × 0.01 − 16 × 0.001 = 6.84, que ajustado para la tipografía da aproximadamente 0.5pt de tracking positivo.

Tracking para diferentes tipos de texto

Texto de cuerpo (14–18pt): no se requiere tracking o mínimo positivo de 0.1–0.3pt. Las fuentes profesionales ya contienen un espaciado óptimo para el texto del cuerpo. Cualquier intervención en el tracking del texto del cuerpo debe justificarse por diseño o requisitos de accesibilidad. Títulos (20–36pt): se acepta tracking negativo de -0.3 a -0.8pt según la tipografía y el peso. Mayúsculas (ALL CAPS): se recomienda tracking positivo de 0.5–2pt, ya que las letras mayúsculas en versales se fusionan visualmente sin espacio adicional.

Especificidad de tipografías: las fuentes con geometría grotesca (Helvetica, Inter, SF Pro) manejan mejor el tracking negativo que las tipografías con serifas (Times, Georgia, PT Serif). En las fuentes con serifas, estas crean conexiones visuales adicionales entre letras, y la condensación hace que el texto sea ilegible. Para tipografías con serifas, solo se recomienda tracking positivo.

Implementación del tracking en iOS y Android

En iOS, el tracking se implementa mediante el mismo atributo .kern en NSAttributedString que el kerning, con una diferencia: para tracking se especifica un valor numérico distinto de nil. nil significa kerning predeterminado (de la tabla de la fuente), 0 desactiva el kerning, cualquier otro número significa tracking sobre la tabla de kerning. Esto significa que cuando se establece .kern = 2, todos los caracteres reciben +2pt de espacio entre caracteres sobre los pares de kerning incorporados.

let text = "Heading with tracking"
let attributedString = NSMutableAttributedString(string: text)

// Positive tracking +0.8pt
attributedString.addAttribute(
    .kern,
    value: 0.8,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// UILabel with tracking
label.attributedText = attributedString

SwiftUI usa el modificador .tracking() en Text, que acepta CGFloat. A diferencia de UIKit, el tracking de SwiftUI se aplica a todo el texto dentro del modificador y no puede ser parcial sin dividirlo en múltiples bloques Text. SwiftUI maneja automáticamente la combinación de kerning y tracking, aplicando el tracking sobre la tabla de kerning de la fuente.

Android usa la propiedad letterSpacing en TextView, especificada en em (multiplicador relativo al tamaño de fuente). Un valor de 0 significa tracking predeterminado, 0.05 significa un aumento del 5% de em, -0.02 significa una disminución. En Android, letterSpacing funciona como tracking (uniforme para todos los caracteres), mientras que la tabla de kerning de la fuente se aplica automáticamente a nivel del motor de renderizado Minikin.

// In XML layout
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with tracking"
    android:letterSpacing="0.08"
    android:textSize="12sp" />

// Programmatically in Kotlin
val textView: TextView = findViewById(R.id.smallText)
textView.letterSpacing = 0.08f

Compose en Android usa el parámetro letterSpacing en TextStyle, especificado en sp. Por ejemplo, TextStyle(letterSpacing = 0.5.sp) da un tracking de 0.5 sp. A diferencia del enfoque XML, Compose permite combinar letterSpacing con otros parámetros tipográficos en un único objeto TextStyle, simplificando la creación de sistemas de diseño.

Configuración de letter-spacing en desarrollo web

En la web, el tracking se implementa mediante la propiedad CSS letter-spacing, que acepta cualquier unidad de longitud o la palabra clave normal. El valor normal corresponde a 0 (sin espacio adicional entre caracteres). La propiedad se hereda, admite valores negativos y se puede animar. Según la Especificación CSS, letter-spacing se aplica después de la tabla de kerning de la fuente.

/* Positive tracking for small text */
.caption {
    font-size: 11px;
    letter-spacing: 0.03em;
}

/* Negative tracking for headings */
h1 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Tracking for uppercase */
.uppercase-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

em vs px: letter-spacing en em se escala cuando cambia el font-size y es preferible para accesibilidad. px no se escala y puede causar inconsistencias cuando el navegador amplía el texto. Recomendación: use siempre em para letter-spacing. La excepción son los casos donde el tracking debe permanecer fijo independientemente del tamaño, como en logotipos.

Animación de letter-spacing: la propiedad admite transiciones y animaciones CSS, permitiendo efectos suaves de revelación de texto. Animar desde letter-spacing: -0.05em hasta letter-spacing: 0.01em al cargar un título es una técnica popular en interfaces modernas. Rendimiento: animar letter-spacing provoca reflow (recalculo del layout) porque cambia el ancho del texto. Use transform y opacity para animaciones de alto rendimiento cuando sea posible.

Accesibilidad y tracking en interfaces móviles

El tracking afecta directamente la legibilidad del texto para usuarios con discapacidades visuales y dislexia. La Pauta WCAG 2.2 1.4.12 (Espaciado de texto) requiere que el texto no pierda contenido cuando el espacio entre caracteres, entre líneas y entre párrafos se aumente a ciertos valores. letter-spacing debe soportar un aumento a 0.12em sin recorte de contenido ni superposición de elementos.

Dislexia: investigaciones de la British Dyslexia Association muestran que aumentar el letter-spacing a 0.12em mejora la velocidad de lectura en usuarios con dislexia en un 10–15%. Sin embargo, esto es individual — algunos usuarios prefieren el espaciado estándar. iOS y Android proporcionan ajustes de accesibilidad del sistema para aumentar el espacio entre caracteres que las aplicaciones deben respetar.

Reglas para desarrolladores: no use anchos/altos fijos que puedan romperse al aumentar el letter-spacing. Evite overflow: hidden en contenedores de texto sin verificación de accesibilidad. Pruebe la interfaz con letter-spacing aumentado a 0.12em en todas las pantallas. Si el diseño se rompe, revise el layout en lugar de ignorar la accesibilidad.

Soporte de plataforma: iOS aumenta automáticamente el letter-spacing cuando se activa la función Texto más grande en los ajustes de accesibilidad, si se usa UIFont.preferredFont. Android ofrece una opción similar mediante FontScale. El desarrollador no debe desactivar estos ajustes. Escenario de prueba: active el tamaño de texto máximo en los ajustes del dispositivo y verifique que el tracking no rompa el layout de la interfaz.