Line Height no desenvolvimento de aplicações — o que é e impacto na tipografia

O que é Line Height na tipografia

Line Height (altura da linha) é um parâmetro tipográfico fundamental que determina a distância entre as linhas de base (baseline) de linhas consecutivas. No desenvolvimento web e móvel, o line height define o ritmo vertical do texto: cada linha ocupa uma altura definida, e este parâmetro acumula-se ao passar para a linha seguinte. O line height inclui não só a altura real dos glifos (ascendente + descendente), mas também o espaço adicional que melhora a legibilidade.

Matematicamente, o line height é expresso como: line-height = font-size × multiplier. Se font-size = 16 px e multiplier = 1.5, então line-height = 24 px. O entrelinhamento (leading) neste caso seria 24 - (ascendente + descendente) píxeis. A maioria dos sistemas de design e plataformas usa o multiplicador precisamente porque este escala automaticamente quando o tamanho da fonte muda.

De acordo com Material Design Type Scale (2025), o line height é um dos três parâmetros-chave do sistema tipográfico de uma aplicação, juntamente com font-size e font-weight. Valores consistentes de line height para todos os níveis da hierarquia tipográfica criam um ritmo vertical que torna a interface visualmente coesa. Um desvio de 10% no line-height do valor ótimo já é percetível a olho nu e reduz a qualidade percebida da interface.

Line Height vs Leading: qual a diferença

Leading (pronunciado «lédin») é um termo tipográfico histórico que denota a distância entre linhas de baseline a baseline menos a altura dos glifos. Na composição tipográfica metálica, o leading são as tiras de chumbo inseridas entre linhas para aumentar o espaço. O line height é um conceito mais moderno que inclui tanto a altura da fonte como o leading.

Na prática, a diferença é importante ao traduzir designs do Figma ou Sketch para código. As ferramentas de design geralmente especificam line-height (ou simplesmente altura da linha). As APIs das plataformas móveis podem usar termos diferentes: o iOS usa lineSpacing (mais próximo de leading) juntamente com minimumLineHeight/maximumLineHeight, o Android usa LineHeightStyle com alignment e trim, o Flutter usa height (multiplicador sem unidade).

// 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

A diferença-chave: se definir minimumLineHeight, todas as linhas usarão a mesma altura, o que é bom para uma grelha rítmica. Se definir apenas lineSpacing, a altura da linha variará consoante o tamanho da fonte — esta é uma abordagem mais flexível mas menos previsível. Para sistemas de design, recomenda-se minimumLineHeight porque dá um resultado estritamente controlado.

De acordo com IBM Carbon Design System — Typography Guidelines (2025), a diferença entre line height e leading é especialmente notável ao usar fontes personalizadas. Se a fonte tiver um leading interno grande (por exemplo, SF Pro), lineSpacing = 0 dá um resultado aceitável. Se o leading da fonte for pequeno (algumas tipografias de código aberto), as linhas aparecerão amontoadas sem lineSpacing adicional.

Line Height ideal para interfaces móveis

O line height ideal depende de vários fatores: tamanho da fonte, comprimento da linha, tipografia e público-alvo. Para texto principal em dispositivos móveis (comprimento de linha 35–55 caracteres), o intervalo recomendado é 1.4–1.6 vezes o font-size. Este valor fornece espaçamento vertical suficiente para mover confortavelmente o olhar entre linhas sem perder a coesão visual do texto.

Para títulos, onde o comprimento da linha é geralmente mais curto (2–6 palavras), o line height pode ser menor — 1.1–1.25 vezes o font-size. Os títulos não requerem grande espaçamento entre linhas, pois a sua função principal é atrair a atenção, não a leitura prolongada. Além disso, tamanhos grandes de títulos (24–32 pt) com line-height 1.5 criariam espaços excessivos que quebram o ritmo vertical da página.

• Texto principal (16–18 pt) — line-height 1.4–1.6. Mínimo para leitura confortável em dispositivos móveis, onde o comprimento da linha é limitado pela largura do ecrã.
• Texto pequeno (11–13 pt) — line-height 1.3–1.5. Tamanhos de fonte pequenos requerem um multiplicador menor, pois as linhas são mais curtas e o olho encontra a linha seguinte mais rápido.
• Texto grande (20–32 pt) — line-height 1.1–1.25. Quanto maior a fonte, menos espaçamento relativo entre linhas é necessário para a legibilidade.
• Texto monoespaçado — line-height 1.3–1.5. As fontes monoespaçadas (para código) geralmente têm métricas maiores, pelo que o line-height pode ser reduzido para 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
    );
}

De acordo com W3C — Accessibility Requirements for Typography (2025), um line height inferior a 1.2 para texto principal é considerado uma barreira de acessibilidade: utilizadores com dislexia e deficiências visuais experimentam dificuldades significativas ao ler texto denso. A WCAG 2.2 recomenda um line-height de pelo menos 1.5 para conteúdo principal, embora em interfaces móveis este valor possa ser reduzido para 1.4 tendo em conta a largura limitada do ecrã.

Line Height no iOS: UIKit e SwiftUI

No iOS, o line height é controlado através do NSMutableParagraphStyle ou de modificadores integrados do SwiftUI. O UIKit fornece três propriedades-chave: minimumLineHeight e maximumLineHeight (definem a altura exata da linha) e lineSpacing (espaço adicional entre linhas). Ao usar TextKit (NSTextStorage, NSLayoutManager), o line height é considerado no lineFragmentRect e afeta o cálculo da geometria do bloco 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
)

No SwiftUI, o line height é definido através do modificador .lineSpacing(value), que adiciona espaço extra entre linhas, ou através de .font com um TextStyle personalizado que inclua line height. O SwiftUI também suporta tipos dinâmicos: o line height especificado escala quando o utilizador altera o tamanho da fonte nas definições.

// 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

De acordo com Apple HIG — Typography Implementation (2025), ao usar um line-height fixo através de minimumLineHeight, é necessário garantir que o valor não seja inferior ao line-height natural da fonte. Se minimumLineHeight for menor que ascendente + descendente, o UIKit ignora a configuração e usa a altura natural. Isto pode levar a resultados inesperados ao alterar a fonte ou o tamanho.

Line Height no Android: sistema View e Compose

No desenvolvimento Android, o line height é gerido de forma diferente no sistema View clássico e no Jetpack Compose. No sistema View, usa-se o método TextView.setLineSpacing(extra, multiplier). O parâmetro extra é espaço adicional em píxeis, multiplier é um fator da altura natural da linha. A 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" />

No Jetpack Compose, utiliza-se a classe LineHeightStyle para gerir o line height, que permite definir o alinhamento (Alignment) e o corte (Trim) do espaço entre linhas. Isto proporciona um controlo mais preciso do que um simples multiplicador. Por exemplo, pode especificar-se que o espaço adicional entre linhas seja distribuído igualmente acima e abaixo da linha (align.Center) ou adicionado completamente acima (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)
    )
)

De acordo com Android Developers — Compose Text Styling (2025), LineHeightStyle.Trim.None (padrão) preserva o espaço na primeira e última linha, o que pode quebrar o alinhamento em Card ou Column. Recomenda-se Trim.Both para contentores com altura fixa e Trim.LastLine para blocos de texto onde o bordo inferior é importante.

Line Height no Flutter: TextStyle e StrutStyle

No Flutter, o line height é definido através da propriedade height da classe TextStyle. É um multiplicador sem unidade do font-size: height: 1.5 com fontSize: 16 dá um line-height de 24.0. O valor de height multiplica implicitamente fontSize, pelo que o line-height escala proporcionalmente quando o tamanho da fonte muda. O Flutter também oferece StrutStyle — um mecanismo para forçar um line-height fixo independentemente dos glifos reais na linha.

// 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 é especialmente útil para listas com diferentes tamanhos de fonte (por exemplo, chats, feeds de notícias), onde todas as linhas precisam de ter a mesma altura independentemente do conteúdo. Sem StrutStyle, uma linha contendo apenas letras sem descendentes terá uma altura real menor do que uma linha com letras como «p» e «y», causando vibração do texto ao deslocar.

De acordo com Flutter Documentation — Text Layout (2025), StrutStyle com forceStrutHeight: true garante que a altura de cada linha seja igual ao valor especificado, e os glifos reais são alinhados pela linha de base dentro deste espaço. Esta é a abordagem padrão para listas de texto onde o ritmo vertical é crítico para a perceção visual.

Line Height adaptável para diferentes ecrãs

As aplicações móveis funcionam em dispositivos com diferentes tamanhos de ecrã, densidades de píxeis e configurações de acessibilidade. O line height deve adaptar-se a estas mudanças mantendo a legibilidade. A regra principal: use multiplicadores sem unidade (unitless), não valores fixos em px ou pt, para que o line-height escale juntamente com o font-size.

Ao usar Dynamic Type (iOS) ou fontScale (Android), o tamanho da fonte pode aumentar 20–50% em relação ao valor base. O line-height definido através de um multiplicador escala automaticamente. Se o line-height for definido como um valor fixo (por exemplo, 24 px com font-size 16 pt), ao aumentar a fonte para 22 pt o line-height relativo reduz-se para 1.09 — já abaixo do limiar de legibilidade.

// 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

De acordo com Material Design — Responsive Typography (2025), para tablets e ecrãs grandes (mais de 600 dp de largura), recomenda-se aumentar o line-height do texto principal em 0.1–0.2 em relação aos telemóveis, pois o comprimento da linha torna-se maior. Para dispositivos dobráveis, onde a largura do ecrã muda dinamicamente, o line-height deve ser recalculado em cada alteração de configuração.