Kerning: o que é e como ajustar o espaçamento entre letras

O que é kerning na tipografia

Kerning é o processo de ajuste manual ou automático da distância entre pares específicos de caracteres para eliminar artefatos ópticos. O problema surge porque cada letra tem uma geometria única: A tem um vértice, V tem uma inclinação direita, T tem uma barra transversal larga. Quando essas letras estão lado a lado, a distância entre seus contornos parece desigual, mesmo que a largura definida seja a mesma.

As tabelas de kerning das fontes contêm pares de caracteres com valores de ajuste predefinidos. Uma boa tipografia pode ter de 300 a 2000 pares de kerning. Tipografias profissionais — como SF Pro da Apple ou Roboto do Google — incluem tabelas de kerning meticulosamente elaboradas cobrindo todas as combinações possíveis de letras latinas e cirílicas. De acordo com a Fontshop Guide to Kerning, a qualidade das tabelas de kerning é um dos principais indicadores de uma fonte profissional.

O efeito visual do kerning é especialmente notável em títulos, logotipos e texto em tamanhos grandes (24 pt ou mais). Em texto pequeno (12–14 pt) o espaçamento entre letras é mais apertado e o kerning é menos perceptível, embora ainda funcione. Navegadores web e sistemas operacionais móveis aplicam kerning incorporado por padrão, mas o desenvolvedor pode desativá-lo ou ajustá-lo para designs específicos.

Kerning vs Tracking: diferenças principais

Desenvolvedores iniciantes frequentemente confundem kerning e tracking, mas estes são parâmetros tipográficos fundamentalmente diferentes. O kerning trabalha ao nível de pares de caracteres e ajusta o espaçamento apenas entre combinações específicas onde a geometria das letras cria desequilíbrio óptico. O tracking (letter-spacing) altera o intervalo entre todos os caracteres do fragmento selecionado igualmente — aumentando ou diminuindo uniformemente.

Quando o tracking é usado: para melhorar a legibilidade de texto pequeno (tracking positivo), para criar títulos de destaque (tracking negativo), para estilizar texto em design de interfaces. O tracking é definido como um valor numérico e aplicado a cada caractere, incluindo pares já ajustados por kerning — as correções de kerning são preservadas, mas um deslocamento global é adicionado sobre elas.

Regra importante: com tracking negativo (compressão), observe os pares de kerning — eles podem criar sobreposições indesejadas de letras. No CSS, a propriedade letter-spacing aplica-se sobre a tabela de kerning da fonte, e com compressão forte (letter-spacing: -1px) as correções de kerning podem causar fusão de caracteres.

Implementação do kerning no iOS via NSAttributedString

No iOS, o kerning é gerenciado através do atributo .kern no NSAttributedString. O valor do atributo é um Float, onde um número positivo aumenta o espaçamento, um número negativo diminui e 0 desativa o kerning. O valor padrão é nil, o que significa usar a tabela de kerning da fonte. A API principal para trabalhar com kerning é NSMutableAttributedString com o atributo adicionado a um intervalo de texto.

let text = "Kerning in mobile interfaces"
let attributedText = NSMutableAttributedString(
    string: text
)

// Ativar kerning (usa tabela da fonte)
attributedText.addAttribute(
    .kern,
    value: 0.5,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// Aplicar a UILabel
label.attributedText = attributedText

Valor padrão .kern = nil ativa o kerning da tabela da fonte. Se precisar desativar completamente o kerning, defina .kern = 0. Os valores 0.0 e nil são estados diferentes: nil usa a tabela, 0 força todos os pares de kerning a zero. De acordo com o Apple Text Programming Guide, definir explicitamente 0 é útil para texto monoespaçado ou casos onde o kerning interfere — por exemplo, em botões de largura fixa.

SwiftUI fornece o modificador .kerning() para Text. Ao contrário do UIKit, no SwiftUI o kerning é definido ao nível da view, não numa string atribuída. O modificador aceita um CGFloat e aplica-se a todo o texto dentro do bloco Text. Para kerning parcial no SwiftUI, usa-se uma combinação do operador + em Text e modificadores individuais.

struct KerningView: View {
    var body: some View {
        Text("Título com kerning")
            .kerning(1.0)
            .font(.title)
    }
}

Desempenho: NSAttributedString com um atributo de kerning recalcula as posições dos caracteres durante a renderização. Para texto estático isso acontece uma vez. Para texto dinâmico (texto variável em UICollectionView) — cada vez que muda. Usar um intervalo grande com kerning em strings longas (mais de 500 caracteres) pode reduzir os FPS durante a rolagem.

Configuração do kerning no Android via letterSpacing

No Android, o kerning é gerenciado através da propriedade letterSpacing no TextView e layouts XML. O atributo é do tipo Float e funciona como multiplicador do tamanho em da fonte. O valor 0 corresponde ao kerning padrão, positivo aumenta o espaçamento, negativo diminui. letterSpacing está disponível a partir do API Level 21 (Android 5.0 Lollipop).

Implementação via SpannableString permite aplicar kerning a parte de uma string em vez de todo o texto. A classe ScaleXSpan ou um ReplacementSpan personalizado é usado para controle preciso. De acordo com o Android Developer Guide, ScaleXSpan escala caracteres horizontalmente, simulando alterações de espaçamento entre caracteres, mas não fornece controle direto sobre pares de kerning.

// Em layout XML
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with kerning"
    android:letterSpacing="0.05" />

// Programaticamente em Kotlin
val textView = findViewById<TextView>(R.id.myTextView)
textView.letterSpacing = 0.05f

Limitação: o Android não suporta tabelas de kerning diretamente — letterSpacing funciona como tracking para todos os caracteres. Para kerning por pares no Android, são usadas fontes com tabelas de kerning incorporadas (OpenType GPOS feature kern). O suporte depende da versão do SO e do motor de renderização: no Android 10+ usa-se Minikin com suporte total a funcionalidades OpenType, em versões anteriores HarfBuzz com limitações. Recomendação: teste a exibição do kerning em dispositivos com Android inferior a 8.0.

Kerning no desenvolvimento web via CSS

Na web, o kerning é controlado através da propriedade CSS font-kerning, que ativa ou desativa as tabelas de kerning incorporadas da fonte. Valores: auto (o navegador decide), normal (kerning ativado), none (kerning desativado). A propriedade é suportada por todos os navegadores modernos desde 2016. De acordo com o MDN Web Docs, font-kerning só se aplica a fontes OpenType com tabela de kerning.

A propriedade CSS letter-spacing é o análogo do tracking, mas também é usada para efeitos semelhantes ao kerning. Ao contrário de font-kerning, letter-spacing altera o intervalo entre todos os caracteres uniformemente, sem considerar pares de kerning. Quando ambas as propriedades são usadas, font-kerning é aplicada primeiro, depois letter-spacing adiciona um deslocamento uniforme por cima.

/* Enable kerning for headings */
h1 {
    font-kerning: normal;
    letter-spacing: 0.02em;
}

/* Disable kerning for monospace */
code, pre {
    font-kerning: none;
}

Utilitário TypeScript para calcular letter-spacing ótimo considerando kerning pode analisar a tabela de kerning da fonte através da Canvas API. No entanto, na prática os desenvolvedores web confiam em font-kerning: normal na maioria dos casos dá resultados ótimos. O ajuste adicional de letter-spacing só é necessário para acentos de design — por exemplo, em landing pages com tipografia grande.

Recomendações práticas para configurar kerning

Kerning é uma ferramenta de ajuste fino, e sua aplicação incorreta prejudica a legibilidade. Primeira regra: não altere o kerning para texto do corpo. As tabelas de kerning de fontes profissionais já contêm valores ótimos para tamanhos de 12–16pt. Interferir no kerning do texto do corpo leva a irregularidades e ruído visual.

Segunda regra: para títulos a partir de 24pt, use kerning positivo (0.5–1.5 pt dependendo da tipografia). Texto grande requer mais espaçamento entre letras para legibilidade. Fontes com x-height baixa (por exemplo, Didot) requerem mais kerning do que fontes com x-height alta (por exemplo, Helvetica). Dados de referência: no aplicativo iOS Apple Music, os títulos usam kerning de 0.8 pt.

Terceira regra: sempre teste o kerning em strings reais, não em Lorem Ipsum. Diferentes combinações de caracteres produzem diferentes efeitos visuais. Preste atenção especial a pares com vogais e consoantes com elementos salientes: AV, Te, To, Wa, LT. Com kerning negativo, observe os pares fi, fl, fj — em algumas fontes eles podem se fundir sem ligadura.

Aspecto de acessibilidade: utilizadores com dislexia leem melhor texto com ligeiro kerning positivo (0.3–0.5 pt). iOS e Android suportam configurações de acessibilidade que podem substituir o kerning da aplicação. Use UIFontDescriptor com Dynamic Type e considere o kerning nas configurações de acessibilidade via UIAccessibility. Importante: não bloqueie as configurações de kerning do sistema — isso viola a WCAG 2.2 Diretriz 1.4.12 sobre adaptação de texto.