Ligar As Palavras

O que são ligaduras tipográficas e por que elas importam

A maioria das pessoas não percebe, mas os caracteres fi, fl e ffi em certos tipos de letra são realmente unidos num único glifo. Isso se chama ligadura tipográfica, e o processo de ligar as palavras desse jeito é uma feature presente em praticamente todos os motores de composição moderna, do TeX ao CSS. Não é decorativo por acaso. O problema real que as ligaduras resolvem é o colisão visual entre traços ascendentes e descendentes. Quando um f com um i, o gancho do f geralmente encosta ou cruza o ponto da i, criando uma mancha escura ilegível. A ligadura substitui esses dois glifos por um design específico que resolve o overlap de forma elegante.

Como ligar as palavras usando ligaduras em CSS

O caminho mais direto é a propriedade font-feature-settings ou a shorthand font-variant-ligatures. O código abaixo ativa as ligaduras padrão:

body {
  font-variant-ligatures: standard;
}

/* ou, para controle mais granular */
body {
  font-feature-settings: "liga" 1, "dlig" 1;
}

Os valores possíveis para font-variant-ligatures são: normal (desliga tudo), common (liga apenas as padrão como fi/fl), all (ativa tudo), e none (desliga todas). Há também nomes específicos como historical-ligatures, discretionary-ligatures e contextual. Na prática, eu costumo deixar ativado em sites de conteúdo longo. Texto corrido com corpo pequeno (14px ou menos) beneficia mais porque o problema de colisão é mais visível em tamanhos reduzidos. Em títulos grandes, a diferença é quase imperceptível, então não faz muita diferença.

Ligaduras históricas e discricionárias: a diferença que ninguém explica

Existem dois grupos principais de ligaduras, e a confusão entre eles causa problemas constantes. As standard ligatures (ativação via "liga") são aquelas que a maioria dos tipos de letra considera obrigatórias para legibilidade — fi, fl, e às vezes fF. Já as discretionary ligatures (código "dlig") são ornamentais: formas arcaizantes ou estilísticas que o designer decidiu incluir como opção, muitas vezes com aparência mais decorativa ou de manuscrito antigo. Um detalhe importante: nem todo tipo de letra tem discretionary ligatures. Fontes como Open Sans ou Roboto praticamente não têm, enquanto fontes display como Playfair Display ou Crimson Text têm várias. Ativar "dlig" 1 numa fonte que não as possui simplesmente não faz nada, e você gasta tempo debugando sem motivo.

Outro ponto que os tutoriais usually ignoram: as ligaduras contextuais ("clig") são diferentes de ambas. Elas se ativam baseado no contexto das letras vizinhas, não apenas em pares fixos. Por exemplo, uma fonte pode decidir que "ct" precisa de um tratamento especial quando aparece entre certas letras. Isso é mais sutil e menos documentado.

Problema prático que encontrei e como resolvi

Num projeto editorial digital há alguns anos, precisei lidar com textos em português que continham muitas palavras com f seguido de h (como "filho", "fha" em siglas, "afilhado"). A ligadura padrão de muitas fontes não tratava o par "fh", e o resultado era visualmente estranho — o gancho do f colidia com o traço vertical do h de forma irregular. A solução foi usar font-feature-settings: "liga" 1, "dlig" 0 e, para os casos específicos onde o problema persistia, aplicar letter-spacing: -0.01em localmente nos elementos afetados. Não é bonita, mas funciona sem depender de fallbacks complexos. Também descobri que o navegador Safari tinha um bug antigo (corrigido na versão 15.4) onde font-variant-ligatures: none não desligava as ligaduras em inputs de formulário, só no texto de parágrafo. Se você estiver mantendo um sistema que precisa suportar Safari legado, teste especificamente campos de texto.

Quándo NÃO usar ligaduras

Existem cenários onde desativar ligaduras é a escolha certa. Código fonte, endereços de URL, e strings técnicas com múltiplos "fi" e "fl" juntos (como em hashes ou identificadores) ficam confusos quando as ligaduras entram em ação. Nesses casos, font-variant-ligatures: none é a resposta direta. Outro caso: fontes monoespaçadas para programação. A maioria já vem configurada para não usar ligaduras por padrão, mas se você carregar uma fonte que as inclui (como Fira Code ou JetBrains Mono), precisará desativá-las explicitamente se não quiser aquele comportamento de destaque sintático.

Tipografia em alta resolução para impressão também é um terreno delicado. Alguns designers gráficos preferem controlar ligaduras manualmente no InDesign ou Illustrator, usando as ferramentas nativas do software, porque o rendering no browser pode variar entre engines. Se o seu projeto exige precisão tipográfica absoluta para produção final, confie mais no software de diagramação do que no CSS.

Métricas reais de uso

Em testes práticos com leitores legíveis, o uso de ligaduras padrão em textos de corpo reduzido melhorou a velocidade de leitura em cerca de 3 a 5%, segundo dados recolhidos de estudos de eye-tracking publicados pela Typographic Research Group. A diferença é pequena mas mensurável em textos longos de mais de 5000 palavras. Para textos curtos, o impacto é estatisticamente insignificante. Para quem quer explorar ligaduras disponíveis numa fonte específica, a ferramenta opentype.js permite listar todas as ligaduras suportadas por uma fonte carregada. Não é perfeito — a API é um pouco verbosa — mas funciona sem dependências externas pesadas.

A regra simples que resta é: ative as standard ligatures para texto corrido em português, desative em código e strings técnicas, e ignore o resto a menos que tenha um motivo específico. O excesso de configuração raramente traz benefício proporcional.