Tracking no desenvolvimento mobile — essência e configuração da distância entre caracteres

O que é tracking em tipografia

Tracking é o ajuste da distância entre caracteres, aplicado uniformemente a todos os caracteres de um bloco de texto. Ao contrário do kerning, onde cada par de caracteres recebe um ajuste individual baseado na tabela de kerning da fonte, o tracking é definido como um único valor numérico para todo o intervalo. Tracking positivo aumenta o intervalo (espaçamento expandido), tracking negativo o reduz (espaçamento condensado).

O termo se origina da tipografia metálica, onde o espaçamento entre caracteres era regulado pela distância física entre os tipos. Na tipografia digital, o tracking é aplicado sobre a tabela de kerning: primeiro a fonte aplica seus pares de kerning incorporados, depois o sistema adiciona tracking uniforme a todos os caracteres. O intervalo resultante = kerning + tracking, o que é importante considerar ao condensar texto agressivamente.

Unidades de medida: o tracking pode ser especificado em unidades absolutas (pontos, pixels, milímetros) e relativas (em, porcentagem do tamanho da fonte). No desenvolvimento mobile, o tracking é tipicamente especificado em pontos (iOS) ou sp (Android) como valores absolutos, na web em em como valores relativos. Unidades relativas são preferíveis para acessibilidade porque escalam quando o usuário altera o tamanho da fonte.

Tracking e kerning: diferenças fundamentais

A confusão entre tracking e kerning é um dos erros mais comuns entre designers e desenvolvedores iniciantes. O kerning funciona no nível micro — ajusta o intervalo entre pares de caracteres específicos (AV, Te, To) com base em sua geometria. O tracking funciona no nível macro — desloca uniformemente todos os caracteres de um fragmento sem considerar sua forma.

Efeito visual: com kerning, as distâncias entre diferentes pares de caracteres variam — entre A e V é menor que entre A e I, porque as formas das letras se compensam. Com tracking, todas as distâncias são iguais — entre A e V, A e I, T e o — o mesmo deslocamento em todos os lugares. Isso torna o tracking uma ferramenta de ajuste global e o kerning uma ferramenta de ajuste fino.

Uso combinado: na tipografia de interfaces, tracking e kerning são usados juntos. A fonte inclui uma tabela de kerning para otimização básica, e o desenvolvedor adiciona tracking para estilização ou acessibilidade. A tabela de kerning é aplicada primeiro, depois o tracking é adicionado sobre ela. Com tracking negativo (condensação), os pares de kerning podem criar sobreposições indesejadas — verifique combinações problemáticas.

Tracking positivo e negativo: quando usar

Tracking positivo aumenta a distância entre caracteres. É usado para melhorar a legibilidade de texto pequeno (10–13pt), onde os caracteres se fundem visualmente com espaçamento padrão. Também é usado em acessibilidade para usuários com dislexia — o aumento do espaçamento entre caracteres facilita o reconhecimento de letras. Valores típicos: 0.3–1pt para iOS, 0.02–0.05em para a web.

Tracking negativo diminui a distância entre caracteres. É usado em títulos (a partir de 24pt) e texto de acento, onde o texto denso parece coeso e moderno. Tamanhos grandes lidam bem com a condensação porque as distâncias entre caracteres são visualmente grandes. Valores típicos: de -0.3 a -1pt. Limitação: com tracking abaixo de -1pt, os caracteres podem se sobrepor, especialmente em pares com elementos salientes (fi, fj, TT).

Regra prática: para cada tamanho de fonte existe uma faixa de tracking aceitável. Quanto maior a fonte, menos tracking é necessário para legibilidade ótima. Fórmula: tracking ótimo ≈ font-weight × 0.01 − font-size × 0.001. Para uma fonte negrito (weight 700) de 16pt: 700 × 0.01 − 16 × 0.001 = 6,84, que ajustado para o tipo dá aproximadamente 0.5pt de tracking positivo.

Tracking para diferentes tipos de texto

Texto corporal (14–18pt): tracking não é necessário ou mínimo positivo de 0.1–0.3pt. Fontes profissionais já contêm espaçamento ótimo para texto corporal. Qualquer intervenção no tracking de texto corporal deve ser justificada por design ou requisitos de acessibilidade. Títulos (20–36pt): tracking negativo de -0.3 a -0.8pt é aceitável dependendo do tipo e peso. Maiúsculas (ALL CAPS): tracking positivo de 0.5–2pt é recomendado, pois letras maiúsculas em caixa alta se fundem visualmente sem espaçamento adicional.

Especificidade de tipos: fontes com geometria grotesca (Helvetica, Inter, SF Pro) lidam melhor com tracking negativo do que tipos serifados (Times, Georgia, PT Serif). Em fontes serifadas, as serifas criam conexões visuais adicionais entre as letras, e a condensação torna o texto ilegível. Para tipos serifados, apenas tracking positivo é recomendado.

Implementação do tracking no iOS e Android

No iOS, o tracking é implementado através do mesmo atributo .kern no NSAttributedString que o kerning, com uma diferença: para tracking, um valor numérico diferente de nil é especificado. nil significa kerning padrão (da tabela da fonte), 0 desativa o kerning, qualquer outro número significa tracking sobre a tabela de kerning. Isso significa que quando .kern = 2 é definido, todos os caracteres recebem +2pt de espaçamento entre caracteres sobre os pares de kerning incorporados.

let text = "Heading with tracking"
let attributedString = NSMutableAttributedString(string: text)

// Tracking positivo +0.8pt
attributedString.addAttribute(
    .kern,
    value: 0.8,
    range: NSRange(
        location: 0,
        length: text.count
    )
)

// UILabel com tracking
label.attributedText = attributedString

SwiftUI usa o modificador .tracking() em Text, que aceita CGFloat. Ao contrário do UIKit, o tracking do SwiftUI se aplica a todo o texto dentro do modificador e não pode ser parcial sem dividir em vários blocos Text. O SwiftUI lida automaticamente com a combinação de kerning e tracking, aplicando tracking sobre a tabela de kerning da fonte.

Android usa a propriedade letterSpacing no TextView, especificada em em (multiplicador relativo ao tamanho da fonte). Um valor de 0 significa tracking padrão, 0.05 significa um aumento de 5% de em, -0.02 significa uma diminuição. No Android, letterSpacing funciona como tracking (uniforme para todos os caracteres), enquanto a tabela de kerning da fonte é aplicada automaticamente no nível do motor de renderização Minikin.

// No layout XML
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Text with tracking"
    android:letterSpacing="0.08"
    android:textSize="12sp" />

// Programaticamente em Kotlin
val textView: TextView = findViewById(R.id.smallText)
textView.letterSpacing = 0.08f

Compose no Android usa o parâmetro letterSpacing no TextStyle, especificado em sp. Por exemplo, TextStyle(letterSpacing = 0.5.sp) dá um tracking de 0.5 sp. Ao contrário da abordagem XML, o Compose permite combinar letterSpacing com outros parâmetros tipográficos em um único objeto TextStyle, simplificando a criação de sistemas de design.

Configuração de letter-spacing no desenvolvimento web

Na web, o tracking é implementado através da propriedade CSS letter-spacing, que aceita qualquer unidade de comprimento ou a palavra-chave normal. O valor normal corresponde a 0 (sem espaçamento adicional entre caracteres). A propriedade é herdada, suporta valores negativos e pode ser animada. De acordo com a Especificação CSS, o letter-spacing é aplicado após a tabela de kerning da fonte.

/* Positive tracking for small text */
.caption {
    font-size: 11px;
    letter-spacing: 0.03em;
}

/* Negative tracking for headings */
h1 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Tracking for uppercase */
.uppercase-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

em vs px: letter-spacing em em escala quando o font-size muda e é preferível para acessibilidade. px não escala e pode causar inconsistências quando o navegador amplia o texto. Recomendação: sempre use em para letter-spacing. A exceção são casos onde o tracking deve permanecer fixo independentemente do tamanho, como em logotipos.

Animação de letter-spacing: a propriedade suporta transições e animações CSS, permitindo efeitos suaves de revelação de texto. Animar de letter-spacing: -0.05em para letter-spacing: 0.01em ao carregar um título é uma técnica popular em interfaces modernas. Desempenho: animar letter-spacing causa reflow (recálculo do layout) porque altera a largura do texto. Use transform e opacity para animações de alto desempenho quando possível.

Acessibilidade e tracking em interfaces móveis

O tracking afeta diretamente a legibilidade do texto para usuários com deficiências visuais e dislexia. A Diretriz WCAG 2.2 1.4.12 (Espaçamento de Texto) exige que o texto não perca conteúdo quando o espaçamento entre caracteres, linhas e parágrafos é aumentado para certos valores. O letter-spacing deve suportar um aumento para 0.12em sem corte de conteúdo ou sobreposição de elementos.

Dislexia: pesquisas da British Dyslexia Association mostram que aumentar o letter-spacing para 0.12em melhora a velocidade de leitura em usuários com dislexia em 10–15%. No entanto, isso é individual — alguns usuários preferem o espaçamento padrão. iOS e Android fornecem configurações de acessibilidade do sistema para aumentar o espaçamento entre caracteres que o aplicativo deve respeitar.

Regras para desenvolvedores: não use larguras/alturas fixas que possam quebrar quando o letter-spacing aumentar. Evite overflow: hidden em contêineres de texto sem verificação de acessibilidade. Teste a interface com letter-spacing aumentado para 0.12em em todas as telas. Se o design quebrar, revise o layout em vez de ignorar a acessibilidade.

Suporte de plataforma: o iOS aumenta automaticamente o letter-spacing quando o recurso Texto Maior é ativado nas configurações de acessibilidade, se UIFont.preferredFont for usado. O Android oferece uma opção semelhante através do FontScale. O desenvolvedor não deve desabilitar essas configurações. Cenário de teste: ative o tamanho máximo de texto nas configurações do dispositivo e verifique se o tracking não quebra o layout da interface.