Descender en desarrollo móvil — esencia, significado e influencia en la maquetación

Qué es Descender en tipografía

Descender es la parte de un glifo ubicada debajo de la línea base. Mientras que el cuerpo principal de la letra se asienta sobre la baseline, el descender se extiende más allá, creando la silueta característica de la fuente. En alfabeto latino, las letras con descender incluyen “g”, “j”, “p”, “q”, “y” — sus elementos inferiores caen por debajo de la línea.

La profundidad del descender describe la distancia desde la baseline hasta el borde inferior del glifo (descender-line). En fuentes de calidad, esta distancia está equilibrada: un descender demasiado corto dificulta el reconocimiento de las letras con descender, mientras que uno demasiado largo crea espacio vacío excesivo entre líneas y reduce la densidad del texto. Diferentes tipografías muestran diferencias significativas en la longitud del descender.

Según la Google Fonts Metrics Guide (2025), un descender se considera óptimo cuando su profundidad es del 20–25% del tamaño em completo (1000 FUnits). Valores por debajo del 15% dificultan la distinción de las letras con descender, mientras que valores superiores al 30% requieren un aumento obligatorio del line-height para prevenir colisiones de líneas.

Métricas digitales de Descender: OpenType y TrueType

En las fuentes digitales, el descender se almacena como un valor negativo en las tablas de métricas. En el formato OpenType, este es el campo hhea.descent (tabla hhea) y sTypoDescender (tabla OS/2). Ambos valores son negativos porque se miden desde la baseline hacia abajo. Para TrueType se usa la tabla OS/2 con el campo usWinDescent — su valor es positivo pero denota la misma métrica.

# Leyendo descender de la fuente mediante fontTools
from fontTools.ttLib import TTFont

font = TTFont('Roboto-Regular.ttf')
hhea = font['hhea']
os2 = font['OS/2']

descent_hhea = hhea.descent        # -500 FUnits (Roboto)
typo_descender = os2.sTypoDescender # -500 FUnits
win_descent = os2.usWinDescent      # 500 (positive value)

# Convertir a píxeles para tamaño de fuente 16pt
px_per_em = 16
descent_px = abs(descent_hhea) * px_per_em / 1000  # 8 px

La diferencia crítica entre plataformas: iOS usa hhea.descent para el renderizado, mientras que Android usa sTypoDescender de OS/2. Si estos valores difieren (lo que ocurre en fuentes mal configuradas), el mismo texto se mostrará con diferentes interlineados en iOS y Android. Una diferencia de 100 FUnits (aproximadamente 1.6 px con cuerpo 16 pt) ya es notable visualmente.

Según la Microsoft OpenType Specification v1.9 (2025), para un renderizado multiplataforma correcto, los valores hhea.descent y sTypoDescender deben ser iguales con una precisión de 50 FUnits. Al elegir una fuente para una aplicación móvil, esto debe verificarse mediante fontTools o una utilidad similar.

Descender en iOS: UIFont y Core Graphics

En iOS, el valor del descender está disponible a través de la propiedad UIFont.descender. Esta propiedad devuelve un número negativo que indica la distancia desde la baseline hasta el borde inferior de la fuente (incluyendo el descender). Por ejemplo, para SF Pro con cuerpo 17 pt, el valor del descender es aproximadamente -4.2 pt. Cuanto mayor es el valor absoluto, más largas son las extensiones inferiores de la fuente.

// Obteniendo descender en iOS mediante UIFont
let font = UIFont.systemFont(ofSize: 17)
let descender = font.descender     // ~ -4.2 pt para SF Pro 17pt
let ascender = font.ascender        // ~ 16.2 pt
let lineHeight = font.lineHeight    // ~ 20.4 pt

// Renderizado personalizado con desplazamiento de descender
let attrString = NSAttributedString(
    string: "Sample text with letter p and y",
    attributes: [.font: font]
)

// Core Text: obteniendo bounding box con descender
let ctFont = CTFontCreateWithName(
    "SF Pro Text" as CFString, 17, nil
)
let descent = CTFontGetDescent(ctFont)  // ~4.2 pt

Al usar TextKit (NSTextStorage, NSLayoutManager), el descender se tiene en cuenta automáticamente en lineFragmentPadding y lineFragmentRect. Sin embargo, al hacer renderizado personalizado a través de Core Graphics (draw(in:)), debes ajustar manualmente las coordenadas añadiendo el valor absoluto del descender al margen inferior del contenedor. Si no se hace esto, las letras con descender sobresaldrán de los límites de renderizado y se recortarán.

Descender en Android: Paint y Compose

En Android, las métricas del descender están disponibles a través de Paint.FontMetrics.descent. A diferencia de iOS, el valor descent es positivo — representa la distancia desde la baseline hasta el borde inferior del texto. La propiedad FontMetrics.bottom incluye no solo el descender sino también el espacio adicional recomendado por el diseñador de la fuente (leading). Para un cálculo preciso solo del descender, usa descent en lugar de bottom.

// Obteniendo descender en Android mediante Paint
val paint = Paint().apply {
    textSize = 17 * density
}

val metrics = paint.fontMetrics
val descent = metrics.descent     // ~4.5 px para 17sp
val bottom = metrics.bottom       // ~5.0 px con leading

// Renderizado personalizado con desplazamiento de descender
val baseline = y
canvas.drawText("Ejemplo: gpq", x, baseline, paint)

// Límite inferior con descender
val bottomBound = baseline + descent  // límite inferior correcto

En Jetpack Compose, el descender se puede obtener a través de TextLayoutResult. El método getLineBottom devuelve la coordenada Y del borde inferior de la línea, que ya incluye el descender. Al hacer maquetación personalizada de cadenas con diferentes cuerpos (por ejemplo, un precio con descuento y un precio completo), la alineación por baseline considerando el descender da un resultado más preciso que la alineación por el borde inferior.

// Compose: verificando el límite inferior del texto
val text = "Text with descenders: gpq"
var layoutResult by remember { mutableStateOf<TextLayoutResult?>(null) }

Text(
    text = text,
    onTextLayout = { layoutResult = it },
    modifier = Modifier.drawBehind {
        layoutResult?.let { result ->
            val lastLine = result.lineCount - 1
            val bottom = result.getLineBottom(lastLine)
            val top = result.getLineTop(lastLine)
            // Verificar que el descender no exceda los límites del contenedor
        }
    }
)

Según Google Material Design — Typography Implementation (2025), para evitar el recorte del descender en contenedores con altura fija, debes añadir un padding vertical igual al menos al descent de la fuente, independientemente de si el texto actual contiene letras con descender. Esto garantiza que la interfaz no se rompa cuando el texto se reemplace dinámicamente.

Descender y colisiones de líneas en interfaces móviles

Una colisión de líneas es una situación en la que el descender de una letra de la línea superior se cruza físicamente con el ascender de una letra de la línea inferior. En interfaces móviles, esto es especialmente notable en encabezados multilínea, tarjetas de productos y bloques de texto con interlineado pequeño. El problema se agrava al usar fuentes con descenders largos y line-height pequeño.

El line-height mínimo que previene colisiones se puede calcular con la fórmula: line-height = ascender + descender + 2 px de margen. Para SF Pro con cuerpo 17 pt, esto da un line-height de aproximadamente 16.2 + 4.2 + 2 = 22.4 pt (un coeficiente de ~1.32). Para Roboto con 16 sp, aproximadamente 1.35. Si el line-height es menor que este valor, las colisiones están garantizadas en textos que contienen letras con descender.

// iOS: calcular el line-height mínimo para prevenir colisiones
let font = UIFont.systemFont(ofSize: 17)
let minLineHeight = abs(font.ascender) + abs(font.descender) + 2.0

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

let attributedText = NSAttributedString(
    string: "Text with p on first line\nand y on second line",
    attributes: [
        .font: font,
        .paragraphStyle: paragraphStyle
    ]
)

Se debe tener especial cuidado al trabajar con fuentes decorativas y manuscritas — su descender puede alcanzar el 35–40% del tamaño em. Estas fuentes rara vez se usan para texto del cuerpo, pero pueden aplicarse en encabezados. Incluso una sola aparición de una letra con un descender largo en un encabezado puede provocar una colisión con un elemento vecino de la interfaz.

Errores comunes al trabajar con Descender

El error más común es recortar el descender en botones y campos de texto. Cuando establecemos la altura de un botón o campo de texto igual al line-height sin considerar el descender, las letras con descender se cortan en el borde inferior. Esto es especialmente notable en botones del sistema con esquinas redondeadas, donde el descender puede sobresalir del límite del radio de esquina.

• Botones de altura fija — si la altura del botón es igual a ceil(line-height), las letras con descender se recortan. Solución: aumenta la altura del botón en el valor absoluto del descender (4–5 pt para una fuente de sistema de 17 pt) para el padding superior e inferior.
• TextField sin considerar el descender — los UITextField y EditText estándar tienen padding que considera el descender, pero las implementaciones personalizadas a menudo lo olvidan. Verifica que el cursor y el bloque de texto no recorten las letras con descender.
• Mezcla de cuerpos en una misma línea — si NSAttributedString o SpannableString contiene segmentos con diferentes cuerpos, el descender de la fuente más grande puede superponerse al ascender de la más pequeña. Usa baselineOffset para compensar y verifica el resultado.
• Renderizado SVG de texto — al renderizar texto en SVG o en Canvas (especialmente en web views), el descender puede no considerarse automáticamente. Siempre especifica un viewBox explícito con un margen del 10–15% del cuerpo.

Según Nielsen Norman Group — Mobile Typography Research (2025), el 41% de las aplicaciones móviles tienen al menos una pantalla donde el texto con descenders sobresale de los límites del componente. Esto provoca una disminución del 15% en la legibilidad y un aumento en el tiempo de realización de tareas por parte del usuario. Las pruebas periódicas con texto que contenga letras con descender ayudan a identificar estos problemas en las primeras etapas del desarrollo.