Leading e espaçamento entre linhas: o que é e configuração no iOS e Android

O que é leading e espaçamento entre linhas

Leading (pronunciado “lédêng”) — é a distância vertical entre as linhas de base de linhas adjacentes na tipografia. A linha de base é a linha invisível sobre a qual os caracteres do texto se situam. Quanto maior o leading, mais livremente as linhas estão dispostas umas em relação às outras. Na tipografia digital, o leading é frequentemente chamado de espaçamento entre linhas ou altura da linha.

Historicamente, o termo surgiu na era da tipografia metálica: os tipógrafos inseriam finas tiras de chumbo entre as linhas para aumentar o espaçamento. Nas fontes modernas, o leading é definido como uma proporção do tamanho da fonte. Valor padrão do sistema — 1.2 (120% do tamanho da fonte), mas para textos longos e interfaces móveis, um valor maior é recomendado. De acordo com as Diretrizes de Tipografia do Material Design, a altura de linha ideal para interfaces web e móveis é de 1.4-1.5 para o texto principal.

Diferença entre leading e espaçamento entre linhas: leading é a distância total da linha de base à linha de base, espaçamento entre linhas é a distância entre a borda inferior de uma linha e a borda superior da próxima. Na maioria das APIs móveis (iOS NSParagraphStyle, Android TextView), o espaçamento entre linhas é usado como um espaçamento adicional sobre a altura natural da linha. Isso é importante considerar ao calcular o espaçamento total entre linhas.

Valores ideais de leading para interfaces móveis

A seleção do leading ideal depende de vários fatores: tamanho da fonte, comprimento da linha, contexto de uso e público. Para interfaces móveis com largura de linha típica de 40 a 60 caracteres, recomenda-se um leading de 1.4 a 1.6 do tamanho da fonte. Linhas curtas (rótulos, botões) podem usar um leading menor — 1.0-1.2. Textos longos (artigos, descrições) — um leading maior, até 1.8 para máxima legibilidade.

Dados experimentais: um estudo do Laboratório de Usabilidade de Software da Wichita State University mostrou que um leading de 1.5 aumenta a velocidade de leitura em 7,5% em comparação com um leading de 1,0 na mesma largura de linha. Para usuários com dislexia, o leading ideal é ainda maior — até 1,8. Esses dados são confirmados pelas recomendações WCAG 2.2, que exigem a capacidade de aumentar o espaçamento entre linhas para 1,5 sem perda de conteúdo.

Influência da fonte: fontes com x-height alta (altura relativa das letras minúsculas) requerem um leading maior do que fontes com x-height baixa. Por exemplo, Helvetica (x-height alta) recomenda um leading de 1.5 para texto do corpo, enquanto Didot (x-height baixa) — 1.3. Isso está relacionado ao fato de que, com x-height alta, as linhas se fundem visualmente mais rapidamente com o mesmo espaçamento entre linhas.

Implementação de leading no iOS através de NSParagraphStyle

No iOS, o espaçamento entre linhas é controlado através da classe NSMutableParagraphStyle, que contém duas propriedades-chave: lineSpacing (espaçamento adicional entre linhas em pontos) e lineHeightMultiple (multiplicador de altura da linha). Essas propriedades trabalham juntas: a altura total da linha é calculada como a altura natural da fonte multiplicada por lineHeightMultiple, mais lineSpacing.

let paragraphStyle = NSMutableParagraphStyle()

// Método 1: multiplicador de altura da linha
paragraphStyle.lineHeightMultiple = 1.5

// Método 2: espaçamento extra entre linhas
paragraphStyle.lineSpacing = 4.0

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

lineHeightMultiple — é a forma preferida, pois é dimensionado automaticamente quando o tamanho da fonte muda. lineSpacing é definido em pontos absolutos e não é dimensionado, o que pode levar a inconsistências ao usar Dynamic Type. De acordo com o Apple Text Programming Guide, para interfaces compatíveis com acessibilidade, use lineHeightMultiple em combinação com UIFontMetrics.

SwiftUI fornece o modificador .lineSpacing() para Text e VStack. Ao contrário do UIKit, no SwiftUI o espaçamento entre linhas é definido em pontos e não possui um multiplicador embutido. Para implementar um multiplicador, o desenvolvedor precisa calcular manualmente o espaçamento entre linhas com base no tamanho da fonte. Limitação: o SwiftUI não suporta lineHeightMultiple diretamente — use .lineSpacing(CGFloat) com um valor calculado.

struct LeadingTextView: View {
    let fontSize: CGFloat = 17

    var lineSpacing: CGFloat {
        fontSize * 0.5 // 50% do tamanho da fonte
    }

    var body: some View {
        Text("Espaçamento entre linhas")
        Text("Multiplicador 1.5")
            .lineSpacing(lineSpacing)
            .font(.system(size: fontSize))
    }
}

Configuração de espaçamento entre linhas no Android

No Android, o espaçamento entre linhas é definido através de dois atributos do TextView: lineSpacingExtra (espaçamento adicional em px) e lineSpacingMultiplier (multiplicador de altura da linha, padrão 1.0). Semelhante ao iOS, o multiplicador é dimensionado quando o tamanho da fonte muda, enquanto o extra é um valor absoluto. Para interfaces compatíveis com acessibilidade, é preferível usar o multiplicador.

// Em layout 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" />

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

Compose — o framework moderno de UI do Android — usa o parâmetro lineHeight no modificador TextStyle. Ao contrário da abordagem XML, no Compose, lineHeight é definido como a altura total da linha em sp (padrão = fontSize * 1.2). Para definir um multiplicador, o desenvolvedor especifica lineHeight como uma porcentagem do fontSize: Exemplo: TextStyle(fontSize = 16.sp, lineHeight = 24.sp) dá um multiplicador de 1.5.

Limitação: no Android até a API 28, lineSpacingExtra e lineSpacingMultiplier funcionam incorretamente com algumas fontes, especialmente as personalizadas (TTF/OTF). Recomenda-se testar em dispositivos reais e considerar que o systemTextView usa por padrão lineSpacingMultiplier 1.0 — sem espaçamento adicional. Para textos longos em ScrollView, é obrigatório definir explicitamente o espaçamento entre linhas.

Espaçamento entre linhas no desenvolvimento web através de CSS line-height

Na web, o espaçamento entre linhas é definido pela propriedade CSS line-height, que pode ser um número (multiplicador), valor percentual, unidades de comprimento (px, em) ou a palavra-chave normal. O multiplicador numérico é a forma preferida, pois ele é herdado e dimensionado em relação ao tamanho da fonte dos elementos filhos. O valor normal corresponde a aproximadamente 1.2 para a maioria das fontes.

/* 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 e line-height: 1.5em são coisas diferentes. O multiplicador numérico é herdado como um valor computado e é recalculado para cada elemento filho com base em seu font-size. O em é herdado como um valor computado fixo com base no font-size do pai. Esta é uma diferença crítica: quando font-size: 20px está dentro de font-size: 16px, line-height: 1.5 resultará em 30px, enquanto line-height: 1.5em resultará em 24px (do pai). Recomendação: sempre use o multiplicador numérico.

Comparação das configurações de leading no iOS, Android e web

Apesar das diferentes APIs, o princípio de configuração do espaçamento entre linhas é o mesmo em todas as plataformas. O multiplicador é dimensionado quando o tamanho da fonte muda e é amigável para acessibilidade. O valor absoluto (espaçamento) não é dimensionado e pode causar problemas ao usar Dynamic Type ou configurações de texto grande.

Estratégia multiplataforma: defina lineHeight no sistema de design como um multiplicador do fontSize. Por exemplo, em tokens de design: line-height-body = 1.5, line-height-heading = 1.1. Cada plataforma implementa este multiplicador através de sua própria API: iOS — lineHeightMultiple, Android — lineSpacingMultiplier, Web — line-height: 1.5. Isso garante o mesmo resultado visual em todas as plataformas.

Nuance importante: no iOS, o lineHeightMultiple é aplicado à altura total da linha (incluindo ascender + descender da fonte), enquanto no Android, o lineSpacingMultiplier é aplicado à altura da linha calculada pelo mecanismo de renderização Minikin. Na prática, isso leva a pequenas diferenças no leading visual com o mesmo valor de multiplicador. Para correspondência pixel-perfect, use valores absolutos com ajuste para a plataforma.