Descender no desenvolvimento móvel — essência, significado e influência na diagramação

O que é Descender em tipografia

Descender é a parte de um glifo localizada abaixo da linha de base. Enquanto o corpo principal da letra assenta na baseline, o descender estende-se além dela, criando a silhueta característica da fonte. No alfabeto latino, as letras com descender incluem “g”, “j”, “p”, “q”, “y” — os seus elementos inferiores caem abaixo da linha.

A profundidade do descender descreve a distância da baseline até ao bordo inferior do glifo (descender-line). Em fontes de qualidade, esta distância é equilibrada: um descender demasiado curto torna as letras com descender difíceis de reconhecer, enquanto um demasiado longo cria espaço vazio excessivo entre linhas e reduz a densidade do texto. Diferentes tipos de letra mostram diferenças significativas no comprimento do descender.

De acordo com o Google Fonts Metrics Guide (2025), um descender é considerado ótimo quando a sua profundidade é de 20–25% do tamanho em completo (1000 FUnits). Valores abaixo de 15% dificultam a distinção de letras com descender, enquanto valores acima de 30% exigem um aumento obrigatório do line-height para prevenir colisões de linhas.

Métricas digitais de Descender: OpenType e TrueType

Nas fontes digitais, o descender é armazenado como um valor negativo nas tabelas de métricas. No formato OpenType, este é o campo hhea.descent (tabela hhea) e sTypoDescender (tabela OS/2). Ambos os valores são negativos porque são medidos a partir da baseline para baixo. Para TrueType, usa-se a tabela OS/2 com o campo usWinDescent — o seu valor é positivo mas denota a mesma métrica.

# Ler descender da fonte via 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)

# Converter para píxeis para tamanho de fonte 16pt
px_per_em = 16
descent_px = abs(descent_hhea) * px_per_em / 1000  # 8 px

A diferença crítica entre plataformas: o iOS usa hhea.descent para renderização, enquanto o Android usa sTypoDescender da OS/2. Se estes valores diferirem (o que acontece em fontes mal configuradas), o mesmo texto será exibido com espaçamentos entre linhas diferentes no iOS e Android. Uma diferença de 100 FUnits (aproximadamente 1.6 px para tamanho de fonte 16 pt) já é visualmente percetível.

De acordo com a Microsoft OpenType Specification v1.9 (2025), para uma renderização multiplataforma correta, os valores hhea.descent e sTypoDescender devem ser iguais com uma precisão de 50 FUnits. Ao escolher uma fonte para uma aplicação móvel, isto deve ser verificado através do fontTools ou de um utilitário semelhante.

Descender no iOS: UIFont e Core Graphics

No iOS, o valor do descender está disponível através da propriedade UIFont.descender. Esta propriedade devolve um número negativo que indica a distância da baseline até ao bordo inferior da fonte (incluindo o descender). Por exemplo, para SF Pro com corpo 17 pt, o valor do descender é aproximadamente -4.2 pt. Quanto maior o valor absoluto, mais longas são as extensões inferiores da fonte.

// Obtendo descender no iOS via 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

// Renderização personalizada com deslocamento de descender
let attrString = NSAttributedString(
    string: "Sample text with letter p and y",
    attributes: [.font: font]
)

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

Ao usar TextKit (NSTextStorage, NSLayoutManager), o descender é automaticamente considerado em lineFragmentPadding e lineFragmentRect. No entanto, ao fazer renderização personalizada através de Core Graphics (draw(in:)), é necessário ajustar manualmente as coordenadas adicionando o valor absoluto do descender à margem inferior do contentor. Se isto não for feito, as letras com descender ultrapassarão os limites de renderização e serão cortadas.

Descender no Android: Paint e Compose

No Android, as métricas do descender estão disponíveis através de Paint.FontMetrics.descent. Ao contrário do iOS, o valor descent é positivo — representa a distância da baseline até ao bordo inferior do texto. A propriedade FontMetrics.bottom inclui não só o descender mas também o espaço adicional recomendado pelo designer da fonte (leading). Para um cálculo preciso apenas do descender, use descent em vez de bottom.

// Obtendo descender no Android via 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 com leading

// Renderização personalizada com deslocamento de descender
val baseline = y
canvas.drawText("Exemplo: gpq", x, baseline, paint)

// Limite inferior com descender
val bottomBound = baseline + descent  // limite inferior correto

No Jetpack Compose, o descender pode ser obtido através de TextLayoutResult. O método getLineBottom devolve a coordenada Y do bordo inferior da linha, que já inclui o descender. Ao fazer diagramação personalizada de strings com diferentes tamanhos de fonte (por exemplo, um preço com desconto e um preço completo), o alinhamento pela baseline considerando o descender dá um resultado mais preciso do que o alinhamento pelo bordo inferior.

// Compose: verificando o limite inferior do 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 se o descender não excede os limites do contentor
        }
    }
)

De acordo com a Google Material Design — Typography Implementation (2025), para evitar o corte do descender em contentores com altura fixa, deve-se adicionar um padding vertical igual pelo menos ao descent da fonte, independentemente de o texto atual conter letras com descender. Isto garante que a interface não se quebre quando o texto for substituído dinamicamente.

Descender e colisões de linhas em interfaces móveis

Uma colisão de linhas é uma situação em que o descender de uma letra da linha superior se cruza fisicamente com o ascender de uma letra da linha inferior. Em interfaces móveis, isto é especialmente notável em cabeçalhos multilinha, cartões de produtos e blocos de texto com pequeno espaçamento entre linhas. O problema é agravado ao usar fontes com descenders longos e line-height pequeno.

O line-height mínimo que previne colisões pode ser calculado com a fórmula: line-height = ascender + descender + 2 px de margem. Para SF Pro com corpo 17 pt, isto dá um line-height de aproximadamente 16.2 + 4.2 + 2 = 22.4 pt (um coeficiente de ~1.32). Para Roboto com 16 sp, aproximadamente 1.35. Se o line-height for menor que este valor, as colisões são garantidas em textos que contenham letras com descender.

// iOS: calcular o line-height mínimo para prevenir colisões
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
    ]
)

Deve-se ter especial cuidado ao trabalhar com fontes decorativas e manuscritas — o seu descender pode atingir 35–40% do tamanho em. Estas fontes raramente são usadas para texto do corpo, mas podem ser aplicadas em cabeçalhos. Mesmo uma única ocorrência de uma letra com um descender longo num cabeçalho pode causar uma colisão com um elemento vizinho da interface.

Erros comuns ao trabalhar com Descender

O erro mais comum é cortar o descender em botões e campos de texto. Quando definimos a altura de um botão ou campo de texto igual ao line-height sem considerar o descender, as letras com descender são cortadas no bordo inferior. Isto é especialmente notável em botões do sistema com cantos arredondados, onde o descender pode ultrapassar o limite do raio do canto.

• Botões de altura fixa — se a altura do botão for igual a ceil(line-height), as letras com descender são cortadas. Solução: aumente a altura do botão no valor absoluto do descender (4–5 pt para uma fonte de sistema de 17 pt) para o padding superior e inferior.
• TextField sem considerar o descender — os UITextField e EditText padrão têm padding que considera o descender, mas as implementações personalizadas muitas vezes esquecem-no. Verifique que o cursor e o bloco de texto não cortam as letras com descender.
• Mistura de tamanhos de fonte na mesma linha — se NSAttributedString ou SpannableString contém segmentos com diferentes tamanhos de fonte, o descender da fonte maior pode sobrepor-se ao ascender da menor. Use baselineOffset para compensação e verifique o resultado.
• Renderização SVG de texto — ao renderizar texto em SVG ou Canvas (especialmente em web views), o descender pode não ser considerado automaticamente. Especifique sempre um viewBox explícito com uma margem de 10–15% do tamanho da fonte.

De acordo com Nielsen Norman Group — Mobile Typography Research (2025), 41% das aplicações móveis têm pelo menos um ecrã onde o texto com descenders ultrapassa os limites do componente. Isto leva a uma diminuição de 15% na legibilidade e a um aumento no tempo de conclusão de tarefas pelo utilizador. Testes regulares com texto contendo letras com descender ajudam a identificar estes problemas nas fases iniciais do desenvolvimento.