Line Height en el desarrollo de aplicaciones — qué es y su impacto en la tipografía

Qué es el Line Height en tipografía

Line Height (altura de línea) es un parámetro tipográfico fundamental que determina la distancia entre las líneas base (baseline) de líneas consecutivas. En el desarrollo web y móvil, el line height define el ritmo vertical del texto: cada línea ocupa una altura determinada, y este parámetro se acumula al pasar a la siguiente línea. El line height incluye no solo la altura real de los glifos (ascendente + descendente), sino también el espacio adicional que mejora la legibilidad.

Matemáticamente, el line height se expresa como: line-height = font-size × multiplier. Si font-size = 16 px y multiplier = 1.5, entonces line-height = 24 px. El interlineado (leading) en este caso sería 24 - (ascendente + descendente) píxeles. La mayoría de los sistemas de diseño y plataformas utilizan el multiplicador precisamente porque se escala automáticamente al cambiar el tamaño de fuente.

Según Material Design Type Scale (2025), el line height es uno de los tres parámetros clave del sistema tipográfico de una aplicación, junto con font-size y font-weight. Los valores coherentes de line height para todos los niveles de la jerarquía tipográfica crean un ritmo vertical que hace que la interfaz sea visualmente sólida. Una desviación del 10% en el line-height respecto al valor óptimo ya es perceptible a simple vista y reduce la calidad percibida de la interfaz.

Line Height vs Leading: cuál es la diferencia

Leading (pronunciado «lédin») es un término tipográfico histórico que denota la distancia entre líneas desde la línea base hasta la línea base menos la altura de los glifos. En la composición tipográfica metálica, el leading son las tiras de plomo insertadas entre líneas para aumentar el espacio. El line height es un concepto más moderno que incluye tanto la altura de la fuente como el leading.

En la práctica, la diferencia es importante al traducir diseños de Figma o Sketch a código. Las herramientas de diseño suelen especificar line-height (o simplemente altura de línea). Las API de plataformas móviles pueden usar términos diferentes: iOS usa lineSpacing (más cercano a leading) junto con minimumLineHeight/maximumLineHeight, Android usa LineHeightStyle con alignment y trim, Flutter usa height (multiplicador sin unidad).

// iOS: difference between line height and line spacing
let paragraphStyle = NSMutableParagraphStyle()

// 1. Direct line height setting
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24

// 2. Line spacing (additional space between lines)
paragraphStyle.lineSpacing = 4.0  // added to natural line height of font

La diferencia clave: si estableces minimumLineHeight, todas las líneas usarán la misma altura, lo cual es bueno para una cuadrícula rítmica. Si estableces solo lineSpacing, la altura de la línea variará según el tamaño de fuente — este es un enfoque más flexible pero menos predecible. Para sistemas de diseño, se recomienda minimumLineHeight porque da un resultado estrictamente controlado.

Según IBM Carbon Design System — Typography Guidelines (2025), la diferencia entre line height y leading es especialmente notable al usar fuentes personalizadas. Si la fuente tiene un leading interno grande (por ejemplo, SF Pro), lineSpacing = 0 da un resultado aceptable. Si el leading de la fuente es pequeño (algunas tipografías de código abierto), las líneas aparecerán apelmazadas sin lineSpacing adicional.

Line Height óptimo para interfaces móviles

El line height óptimo depende de varios factores: tamaño de fuente, longitud de línea, tipografía y público objetivo. Para el texto principal en dispositivos móviles (longitud de línea de 35–55 caracteres), el rango recomendado es 1.4–1.6 veces el font-size. Este valor proporciona un espaciado vertical suficiente para mover la vista cómodamente entre líneas sin perder la cohesión visual del texto.

Para los encabezados, donde la longitud de línea suele ser más corta (2–6 palabras), el line height puede ser menor — 1.1–1.25 veces el font-size. Los encabezados no requieren un gran espacio entre líneas, ya que su función principal es atraer la atención, no la lectura prolongada. Además, los tamaños grandes de encabezados (24–32 pt) con line-height 1.5 crearían espacios excesivos que rompen el ritmo vertical de la página.

• Texto principal (16–18 pt) — line-height 1.4–1.6. Mínimo para una lectura cómoda en dispositivos móviles, donde la longitud de línea está limitada por el ancho de la pantalla.
• Texto pequeño (11–13 pt) — line-height 1.3–1.5. El tamaño pequeño requiere un multiplicador menor, ya que las líneas son más cortas y el ojo encuentra la siguiente línea más rápido.
• Texto grande (20–32 pt) — line-height 1.1–1.25. Cuanto más grande es la fuente, menos espacio relativo entre líneas se necesita para la legibilidad.
• Texto monoespaciado — line-height 1.3–1.5. Las fuentes monoespaciadas (para código) suelen tener métricas más grandes, por lo que el line-height se puede reducir a 1.3.

// Flutter: line height in design system
class AppTextStyles {
    static const body = TextStyle(
        fontSize: 16,
        height: 1.5,      // line-height 24px
    );

    static const headline = TextStyle(
        fontSize: 28,
        height: 1.2,      // line-height 33.6px
    );

    static const caption = TextStyle(
        fontSize: 12,
        height: 1.4,      // line-height 16.8px
    );
}

Según W3C — Accessibility Requirements for Typography (2025), un line height inferior a 1.2 para el texto principal se considera una barrera de accesibilidad: los usuarios con dislexia y discapacidades visuales experimentan dificultades significativas al leer texto denso. WCAG 2.2 recomienda un line-height de al menos 1.5 para el contenido principal, aunque en interfaces móviles este valor puede reducirse a 1.4 teniendo en cuenta el ancho limitado de la pantalla.

Line Height en iOS: UIKit y SwiftUI

En iOS, el line height se controla a través de NSMutableParagraphStyle o modificadores integrados de SwiftUI. UIKit proporciona tres propiedades clave: minimumLineHeight y maximumLineHeight (establecen la altura exacta de línea) y lineSpacing (espacio adicional entre líneas). Al usar TextKit (NSTextStorage, NSLayoutManager), el line height se tiene en cuenta en lineFragmentRect y afecta al cálculo de la geometría del bloque de texto.

// iOS UIKit: setting line height via NSMutableParagraphStyle
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24
// Important: minimum + maximum = fixed line-height

let attributes: [NSAttributedString.Key: Any] = [
    .font: UIFont.systemFont(ofSize: 16),
    .paragraphStyle: paragraphStyle
]

let label = UILabel()
label.attributedText = NSAttributedString(
    string: "Text with fixed line height",
    attributes: attributes
)

En SwiftUI, el line height se define mediante el modificador .lineSpacing(value), que añade espacio adicional entre líneas, o mediante .font con un TextStyle personalizado que incluya line height. SwiftUI también admite tipos dinámicos: el line height especificado se escala cuando el usuario cambia el tamaño de fuente en los ajustes.

// SwiftUI: line height via lineSpacing
Text("Text with custom line spacing
second line
third line")
    .font(.body)
    .lineSpacing(4)     // additional space between lines

// SwiftUI: fixed line height via custom style
Text("Heading with line height 1.2")
    .lineSpacing(0)
    .font(Font.system(size: 28, weight: .bold))
    .padding(.vertical, 3)  // compensation for precise line-height

Según Apple HIG — Typography Implementation (2025), al usar un line-height fijo mediante minimumLineHeight, hay que asegurarse de que el valor no sea menor que el line-height natural de la fuente. Si minimumLineHeight es menor que ascendente + descendente, UIKit ignora la configuración y usa la altura natural. Esto puede provocar resultados inesperados al cambiar la fuente o el tamaño.

Line Height en Android: sistema View y Compose

En el desarrollo de Android, el line height se gestiona de forma diferente en el sistema View clásico y en Jetpack Compose. En el sistema View se usa el método TextView.setLineSpacing(extra, multiplier). El parámetro extra es espacio adicional en píxeles, multiplier es un factor de la altura natural de línea. La altura resultante = line-height natural × multiplier + extra.

// Android View system: line spacing
val textView = TextView(context)
textView.text = "Text with custom line spacing"
textView.setLineSpacing(4f, 1.0f)  // extra=4px, multiplier=1.0

// Usage in XML
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:lineSpacingExtra="4dp"
    android:lineSpacingMultiplier="1.4" />

En Jetpack Compose se utiliza la clase LineHeightStyle para gestionar el line height, que permite establecer la alineación (Alignment) y el recorte (Trim) del espacio entre líneas. Esto proporciona un control más preciso que un simple multiplicador. Por ejemplo, se puede especificar que el espacio adicional entre líneas se distribuya equitativamente por encima y por debajo de la línea (align.Center) o que se añada completamente por encima (align.Top).

// Jetpack Compose: LineHeightStyle example
Text(
    text = "Sample text
with custom LineHeightStyle
in Jetpack Compose",
    style = MaterialTheme.typography.bodyLarge.copy(
        lineHeight = 24.sp,
        lineHeightStyle = LineHeightStyle(
            alignment = LineHeightStyle.Alignment.Center,
            trim = LineHeightStyle.Trim.Both
        )
    )
)

// Simple multiplier via TextStyle
Text(
    text = "Line height multiplier",
    style = LocalTextStyle.current.copy(
        lineHeight = TextUnit(1.5f, TextUnitType.Em)
    )
)

Según Android Developers — Compose Text Styling (2025), LineHeightStyle.Trim.None (por defecto) conserva el espacio en la primera y última línea, lo que puede romper la alineación en Card o Column. Se recomienda usar Trim.Both para contenedores con altura fija y Trim.LastLine para bloques de texto donde el borde inferior es importante.

Line Height en Flutter: TextStyle y StrutStyle

En Flutter, el line height se define mediante la propiedad height de la clase TextStyle. Es un multiplicador sin unidad del font-size: height: 1.5 con fontSize: 16 da un line-height de 24.0. El valor de height multiplica implícitamente fontSize, por lo que el line-height se escala proporcionalmente al cambiar el tamaño de fuente. Flutter también ofrece StrutStyle, un mecanismo para forzar un line-height fijo independientemente de los glifos reales en la línea.

// Flutter: line height via TextStyle.height
Text(
    'Text with line height 1.5',
    style: TextStyle(
        fontSize: 16,
        height: 1.5,     // line-height = 24 px
    ),
)

// Flutter: StrutStyle for fixed line height
Text(
    'Text with StrutStyle
fixed line height
independent of glyphs',
    style: TextStyle(fontSize: 16),
    strutStyle: StrutStyle(
        fontSize: 16,
        height: 1.5,
        forceStrutHeight: true,
    ),
)

StrutStyle es especialmente útil para listas con diferentes tamaños de fuente (por ejemplo, chats, feeds de noticias), donde todas las líneas deben tener la misma altura independientemente del contenido. Sin StrutStyle, una línea que contenga solo letras sin descendentes tendrá una altura real menor que una línea con letras como «p» y «y», lo que provoca vibración del texto al desplazarse.

Según Flutter Documentation — Text Layout (2025), StrutStyle con forceStrutHeight: true garantiza que la altura de cada línea sea igual al valor especificado, y los glifos reales se alinean por línea base dentro de este espacio. Este es el enfoque estándar para listas de texto donde el ritmo vertical es crítico para la percepción visual.

Line Height adaptable para diferentes pantallas

Las aplicaciones móviles funcionan en dispositivos con diferentes tamaños de pantalla, densidades de píxeles y configuraciones de accesibilidad. El line height debe adaptarse a estos cambios manteniendo la legibilidad. La regla principal: usa multiplicadores sin unidad (unitless), no valores fijos en px o pt, para que el line-height se escale junto con el font-size.

Al usar Dynamic Type (iOS) o fontScale (Android), el tamaño de fuente puede aumentar entre un 20 y un 50% respecto al valor base. El line-height definido mediante un multiplicador se escala automáticamente. Si el line-height se define como un valor fijo (por ejemplo, 24 px con font-size 16 pt), al aumentar la fuente a 22 pt el line-height relativo se reduce a 1.09 — ya por debajo del umbral de legibilidad.

// iOS: adaptive line height with Dynamic Type
let font = UIFont.preferredFont(
    forTextStyle: .body,
    compatibleWith: traitCollection
)

// Calculate line-height as multiplier from dynamic font
let lineHeightMultiplier: CGFloat = 1.5
let lineHeight = font.lineHeight * lineHeightMultiplier

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.minimumLineHeight = lineHeight
paragraphStyle.maximumLineHeight = lineHeight

Según Material Design — Responsive Typography (2025), para tabletas y pantallas grandes (más de 600 dp de ancho), se recomienda aumentar el line-height del texto principal en 0.1–0.2 respecto a los teléfonos, ya que la longitud de línea es mayor. Para dispositivos plegables, donde el ancho de pantalla cambia dinámicamente, el line-height debe recalcularse en cada cambio de configuración.