Leading e interlineado: qué es y configuración en iOS y Android

Qué es el leading y el interlineado

Leading (pronunciado “led-ing”) — es la distancia vertical entre las líneas base de filas adyacentes en tipografía. La línea base es la línea invisible sobre la que se asientan los caracteres del texto. Cuanto mayor es el leading, más libres están las líneas entre sí. En tipografía digital, el leading se denomina más comúnmente interlineado o altura de línea.

Históricamente, el término surgió en la época de la tipografía metálica: los tipógrafos insertaban finas tiras de plomo entre las líneas para aumentar el espacio. En las fuentes modernas, el leading se define como una proporción respecto al tamaño de fuente. El valor por defecto del sistema es 1.2 (120% del tamaño de fuente), pero para textos largos e interfaces móviles se recomienda un valor mayor. Según las Guías de Tipografía de Material Design, la altura de línea óptima para interfaces web y móviles es de 1.4–1.5 para el texto del cuerpo.

Diferencia entre leading e interlineado: el leading es la distancia completa de línea base a línea base, mientras que el interlineado es la distancia entre el borde inferior de una línea y el borde superior de la siguiente. En la mayoría de las API móviles (iOS NSParagraphStyle, Android TextView), el interlineado se usa como un desplazamiento adicional sobre la altura natural de la línea. Esto es importante tenerlo en cuenta al calcular el interlineado general.

Valores óptimos de leading para interfaces móviles

Elegir el leading óptimo depende de varios factores: el tamaño de fuente, la longitud de línea, el contexto de uso y la audiencia. Para interfaces móviles con un ancho de línea típico de 40–60 caracteres, se recomienda un leading de 1.4 a 1.6 del tamaño de fuente. Las líneas cortas (etiquetas, botones) pueden usar un leading menor — 1.0–1.2. Los textos largos (artículos, descripciones) — un leading mayor, hasta 1.8 para máxima legibilidad.

Datos experimentales: un estudio del Laboratorio de Usabilidad de Software de la Universidad Estatal de Wichita demostró que un leading de 1.5 aumenta la velocidad de lectura en un 7.5% en comparación con un leading de 1.0 con el mismo ancho de línea. Para usuarios con dislexia, el leading óptimo es aún mayor — hasta 1.8. Estos datos se confirman con las recomendaciones de WCAG 2.2, que exigen la capacidad de aumentar el interlineado hasta 1.5 sin perder contenido.

Efecto de la tipografía: las fuentes con una x-height alta requieren más leading que las fuentes con x-height baja. Por ejemplo, Helvetica (x-height alta) recomienda un leading de 1.5 para el texto del cuerpo, mientras que Didot (x-height baja) — 1.3. Esto se debe a que con una x-height alta, las líneas se fusionan visualmente más rápido con el mismo interlineado.

Implementación del leading en iOS mediante NSParagraphStyle

En iOS, el interlineado se gestiona mediante la clase NSMutableParagraphStyle, que tiene dos propiedades clave: lineSpacing (espacio adicional entre líneas en puntos) y lineHeightMultiple (multiplicador de altura de línea). Estas propiedades trabajan juntas: la altura final de la línea se calcula como la altura natural de la fuente multiplicada por lineHeightMultiple, más lineSpacing.

let paragraphStyle = NSMutableParagraphStyle()

// Método 1: multiplicador de altura de línea
paragraphStyle.lineHeightMultiple = 1.5

// Método 2: espacio extra entre líneas
paragraphStyle.lineSpacing = 4.0

// Aplicar mediante NSAttributedString
let attributedText = NSAttributedString(
    string: "Text with custom line spacing",
    attributes: [
        .paragraphStyle: paragraphStyle
    ]
)

lineHeightMultiple es el método preferido porque se escala automáticamente cuando cambia el tamaño de fuente. lineSpacing se especifica en puntos absolutos y no se escala, lo que puede causar inconsistencias al usar Dynamic Type. Según la Guía de Programación de Texto de Apple, para interfaces compatibles con accesibilidad use lineHeightMultiple en combinación con UIFontMetrics.

SwiftUI proporciona el modificador .lineSpacing() para Text y VStack. A diferencia de UIKit, en SwiftUI el interlineado se especifica en puntos y no tiene un multiplicador incorporado. Para implementar un multiplicador, el desarrollador debe calcular el interlineado manualmente en función del tamaño de fuente. Limitación: SwiftUI no admite lineHeightMultiple directamente — use .lineSpacing(CGFloat) con un valor calculado.

struct LeadingTextView: View {
    let fontSize: CGFloat = 17

    var lineSpacing: CGFloat {
        fontSize * 0.5 // 50% del tamaño de fuente
    }

    var body: some View {
        Text("Interlineado")
        Text("Multiplicador 1.5")
            .lineSpacing(lineSpacing)
            .font(.system(size: fontSize))
    }
}

Configuración del interlineado en Android

En Android, el interlineado se establece mediante dos atributos de TextView: lineSpacingExtra (espacio adicional en px) y lineSpacingMultiplier (multiplicador de altura de línea, por defecto 1.0). Al igual que en iOS, el multiplicador se escala cuando cambia el tamaño de fuente, mientras que extra es un valor absoluto. Para interfaces compatibles con accesibilidad, se prefiere usar el multiplicador.

// En diseño XML
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Text with line spacing"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.5"
    android:textSize="16sp" />

// Programáticamente en Kotlin
val textView = findViewById<TextView>(R.id.contentText)
textView.setLineSpacing(
    TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        4f,
        resources.displayMetrics
    ),
    1.5f
)

Compose — el marco moderno de UI de Android — usa el parámetro lineHeight en el modificador TextStyle. A diferencia del enfoque XML, en Compose lineHeight se especifica como la altura completa de la línea en sp (por defecto = fontSize * 1.2). Para establecer un multiplicador, el desarrollador especifica lineHeight como un porcentaje de fontSize: Ejemplo: TextStyle(fontSize = 16.sp, lineHeight = 24.sp) da un multiplicador de 1.5.

Limitación: en Android anterior a API 28, lineSpacingExtra y lineSpacingMultiplier funcionan incorrectamente con algunas fuentes, especialmente las personalizadas (TTF/OTF). Se recomienda probar en dispositivos reales y tener en cuenta que systemTextView usa por defecto lineSpacingMultiplier 1.0 — sin espacio adicional. Para textos largos en ScrollView, establezca siempre el interlineado explícitamente.

Interlineado en desarrollo web mediante CSS line-height

En la web, el interlineado se establece con la propiedad CSS line-height, que puede ser un número (multiplicador), un porcentaje, unidades de longitud (px, em) o la palabra clave normal. El multiplicador numérico es el método preferido porque se hereda y se escala en relación al tamaño de fuente de los elementos hijos. El valor normal corresponde aproximadamente a 1.2 para la mayoría de las fuentes.

/* Numerical multiplier (recommended) */
body {
    font-size: 16px;
    line-height: 1.5;
}

/* Percentage value */
.article-content {
    line-height: 150%;
}

/* Fixed value (does not scale) */
.small-text {
    font-size: 12px;
    line-height: 18px;
}

Multiplicador numérico vs em: line-height: 1.5 y line-height: 1.5em son cosas diferentes. Un multiplicador numérico se hereda como valor calculado y se recalcula para cada elemento hijo en función de su font-size. em se hereda como un valor calculado fijo basado en el font-size del padre. Esta es una diferencia crítica: al anidar font-size: 20px dentro de font-size: 16px, line-height: 1.5 da 30px, mientras que line-height: 1.5em da 24px (del padre). Recomendación: use siempre un multiplicador numérico.

Comparación de configuraciones de leading en iOS, Android y web

A pesar de las diferentes API, el principio de configuración del interlineado es el mismo en todas las plataformas. Multiplicador se escala cuando cambia el tamaño de fuente y es compatible con la accesibilidad. Valor absoluto (interlineado) no se escala y puede causar problemas al usar Dynamic Type o configuraciones de texto grande.

Estrategia multiplataforma: defina lineHeight en el sistema de diseño como un multiplicador de fontSize. Por ejemplo, en tokens de diseño: line-height-body = 1.5, line-height-heading = 1.1. Cada plataforma implementa este multiplicador con su propia API: iOS — lineHeightMultiple, Android — lineSpacingMultiplier, Web — line-height: 1.5. Esto garantiza resultados visuales consistentes en todas las plataformas.

Matiz importante: en iOS, lineHeightMultiple se aplica a la altura completa de la línea (incluyendo ascender + descender de la fuente), mientras que en Android, lineSpacingMultiplier se aplica a la altura de línea calculada por el motor de renderizado Minikin. En la práctica, esto genera pequeñas diferencias en el leading visual con el mismo valor de multiplicador. Para una consistencia perfecta de píxeles, use valores absolutos ajustados por plataforma.