Para separar um par de letras muito apertado, verifique primeiro o espaçamento entre letras e o kerning da fonte do título. Em um rótulo curto em alfabeto latino, uma margem inline local pode abrir um limite, mas interrompe a composição tipográfica nesse ponto. Este fluxo de trabalho para Mac explica quando essa compensação é adequada.

O problema está no espaçamento entre letras, no kerning ou em uma colisão localizada?

Este guia é para quem ajusta um título de página da web em um Mac e pode editar o HTML e o CSS. A tarefa é melhorar um par estranho e manter o restante do texto no fluxo normal do navegador. O título fictício NOVA STUDIO serve de exemplo concreto; isso não significa que essas letras se choquem em todas as fontes.

O espaçamento entre letras controla os espaços em toda uma seleção de texto. No CSS, isso é feito por letter-spacing: valores positivos aumentam o espaçamento, enquanto valores negativos o reduzem. Portanto, aumentar essa propriedade no título inteiro altera mais do que o par problemático. Comece verificando se um valor negativo herdado causou o problema. MDN: letter-spacing

O kerning usa informações de espaçamento armazenadas na fonte. A propriedade CSS font-kerning aceita auto, normal ou none; ela não aceita uma distância personalizada para um par de letras específico. Defini-la como normal solicita as informações de kerning da fonte, mas não pode fornecer um ajuste ausente para um par nem garantir que determinada combinação fique visualmente adequada. MDN: font-kerning

Use este guia de decisão antes de adicionar marcação:

O que você observa Primeira ação Quando continuar
A maioria dos espaços parece apertada demais Compare o título com letter-spacing: normal Continue somente se um par ainda precisar de atenção
O título parece diferente depois que uma animação de texto começa Compare com o texto original sem divisões Investigue a configuração da divisão antes de fazer compensações
Um limite parece apertado em uma palavra curta em alfabeto latino que, no restante, está aceitável Considere um ajuste local de espaçamento Aceite que a composição tipográfica mudará nesse limite
A composição tipográfica original precisa permanecer intacta Mantenha o trecho de texto intacto e compare outra fonte ou versão de fonte adequada Escolha uma renderização que funcione sem inserir um limite

Em uma página que você esteja inspecionando no Chrome, pressione Command–Option–C e clique no título. O painel Elements seleciona a marcação, e a aba Styles mostra o CSS aplicável. Procure regras do título, espaçamento entre letras herdado e elementos que envolvam caracteres individuais. Estas etapas de inspeção seguem o fluxo de trabalho documentado do Chrome para Mac. Abrir o Chrome DevTools

Faça comparações com a fonte, o peso e o tamanho do título pretendidos. Uma correção escolhida para o texto de exemplo em Arial é apenas uma demonstração; escolha o ajuste real enquanto visualiza o título pretendido. Anote as declarações originais para poder comparar uma alteração de cada vez.

O que um ajuste local pode preservar?

Um span simples fornece um gancho de estilo sem acrescentar significado próprio. Ele representa seus elementos filhos, então o título pode manter o texto NOVA STUDIO enquanto uma classe identifica o prefixo que termina no limite problemático. WHATWG HTML Standard: The span element

No entanto, um elemento inline e um ajuste de espaçamento têm consequências diferentes. A Recomendação em Preparação de Candidato atual do W3C para CSS Text Level 3 afirma que a composição tipográfica deve permanecer contínua através de limites inline sem alterações efetivas de formatação. Ela também especifica que uma margem, borda ou preenchimento inline diferente de zero que separe caracteres interrompe a composição tipográfica nesse limite. Portanto, uma margem local não pode garantir a preservação do kerning original através do par ajustado. CSS Text Module Level 3: Shaping Across Element Boundaries

No exemplo, coloque NOV dentro de um único span inline e deixe A imediatamente depois dele. Adicionar uma margem final a esse prefixo abre o limite entre V e A. As outras letras continuam como texto inline comum; não é necessário dar uma caixa separada a cada caractere. Em texto horizontal da esquerda para a direita, margin-inline-end corresponde à margem direita. MDN: margin-inline-end

Essa limitação importa ao avaliar o resultado: a mudança visível inclui a perda de qualquer ajuste de composição tipográfica nesse limite, além da margem adicionada. O espaçamento resultante do par não é necessariamente o original acrescido exatamente da distância especificada. Se for necessário preservar a composição tipográfica original, mantenha o trecho intacto e compare opções de fonte.

Experimente um exemplo local completo no Mac

Crie uma prévia separada antes de adaptar a técnica a um título que você mantém. No TextEdit, escolha File → New e depois Format → Make Plain Text. Cole o documento completo abaixo, salve-o como pair-preview.html e, se solicitado, escolha Use .html. A Apple documenta esse processo para criar arquivos HTML. Trabalhar com documentos HTML no TextEdit no Mac

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Local pair spacing preview</title>
  <style>
    body {
      margin: 2rem;
      background: #fafafa;
      color: #222;
    }

    main {
      max-width: 48rem;
    }

    h1 {
      --pair-gap: 0.02em;
      font-family: Arial, sans-serif;
      font-size: 64px;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: normal;
      font-kerning: normal;
    }

    .keep-word {
      white-space: nowrap;
    }

    .pair-prefix {
      margin-inline-end: var(--pair-gap);
    }
  </style>
</head>
<body>
  <main>
    <p>Heading preview</p>
    <h1><span class="keep-word"><span class="pair-prefix">NOV</span>A</span> STUDIO</h1>
    <p>Change the pair gap, save, and reload to compare.</p>
  </main>
</body>
</html>

Abra o documento salvo no navegador. Mantenha o texto dentro do título na única linha de origem mostrada: não há espaço entre NOV e A, e há um espaço comum antes de STUDIO. Assim, o texto do rótulo permanece intacto, sem inserir um caractere de espaçamento visível ou especial.

A propriedade personalizada --pair-gap controla a margem no limite selecionado. O valor inicial é ilustrativo. Com um tamanho de fonte de 64px, 0.02em corresponde a 1.28 pixels CSS de margem; com 40px, corresponde a 0.8 pixels CSS. A margem aumenta ou diminui com o tamanho do texto, embora ainda seja preciso inspecionar visualmente a correção. A MDN documenta que as margens em em são relativas ao tamanho do texto. MDN: margin-inline-end

O span externo .keep-word aplica white-space: nowrap somente a NOVA. Isso mantém essa palavra curta unida, enquanto deixa o espaço comum antes de STUDIO disponível para a quebra de linha. Evite aplicar essa regra ao título inteiro, a menos que você precise intencionalmente de uma única linha sem quebras. MDN: white-space

Se mais tarde o TextEdit abrir o arquivo como conteúdo formatado, use File → Open, selecione o arquivo, escolha Show Options e selecione Ignore rich text commands. Como alternativa, ative Display HTML files as HTML code instead of formatted text em TextEdit → Settings → Open and Save. Guia de HTML do TextEdit da Apple

Como escolher a menor correção que funciona?

Faça uma comparação controlada em vez de aumentar repetidamente o espaço até ele chamar atenção:

  1. Defina --pair-gap como 0em, salve e recarregue a página. Primeiro, verifique o título sem ajustes.
  2. Experimente 0.01em e depois 0.02em, salvando e recarregando entre as comparações. São valores de teste, não padrões tipográficos recomendados.
  3. Avalie o par junto com as letras imediatamente vizinhas. Pare quando ele combinar com o ritmo geral da palavra.
  4. Reduza a largura da janela do navegador até o título quebrar em linhas. Verifique o título inteiro, não apenas as letras ajustadas.
  5. Repita em cada tamanho e peso de título que seu layout realmente usa.

Compare com cuidado a margem zero e a margem diferente de zero. Ultrapassar esse limite introduz a fronteira de composição tipográfica descrita acima, portanto a primeira mudança pode ser maior do que o valor numérico da margem sugere. Se um valor positivo minúsculo já deixar o par espaçado demais, remova a solução alternativa e reconsidere a fonte ou os estilos existentes do título.

O ajuste também ocupa espaço no layout. As letras depois do limite se deslocam junto com o texto, e um título que esteja perto de ocupar toda a largura disponível pode quebrar em outro ponto. O espaçamento local evita acrescentar espaçamento entre letras a todas as lacunas; ele não garante que o fim da linha permaneça igual. Antes de manter a alteração, confira o layout em versões estreita e larga.

Limite o elemento que impede a quebra a uma palavra curta. Se a palavra ultrapassar a largura disponível, ela pode transbordar. Reduza o tamanho do título nesse layout ou reconsidere o elemento, em vez de ocultar o transbordamento. A MDN distingue o controle de quebras por meio de white-space das propriedades que permitem quebras dentro das palavras. MDN: white-space

E se o título já usar SplitType?

SplitType é uma ferramenta de animação que envolve linhas, palavras e caracteres em elementos. A documentação oficial recomenda font-kerning: none nos elementos-alvo para evitar pequenos deslocamentos de caracteres ao dividir ou restaurar o texto. Essa recomendação se destina ao fluxo de trabalho de animação da ferramenta; adotá-la pode alterar o espaçamento em todo o título. Documentação do SplitType

Se um título existente usa SplitType, compare o texto original antes de adicionar outra correção. A biblioteca documenta um método de instância, instance.revert(), que restaura o conteúdo original. Em uma implementação que já tenha uma instância do SplitType, use o ciclo de vida documentado para inspecionar esse estado original. O exemplo de HTML local acima não depende de nenhuma biblioteca. SplitType: Reverting Split Text

Verifique também o comportamento ao redimensionar. O SplitType diz que divisões de palavras e caracteres posicionadas relativamente podem refluir, enquanto a divisão em linhas ou o posicionamento absoluto exige uma nova divisão após o redimensionamento do contêiner. Se a colisão aparente ocorrer somente após uma mudança de largura, investigue esse comportamento do layout antes de codificar uma correção permanente para o par. SplitType: Responsive Text

Para essa tarefa de um único par, a conclusão prática é evitar dividir os caracteres só para obter um ponto de ajuste de espaçamento. Isso criaria mais limites de layout do que o exemplo precisa.

Quando você deve manter o trecho de texto intacto?

Use o exemplo da margem local somente para um limite escolhido intencionalmente entre letras latinas simples. Não o transforme em uma rotina que envolva cada posição de qualquer string. O W3C alerta que dividir grupos de grafemas ou ligaduras com limites entre elementos pode gerar uma renderização inconsistente ou indesejada. Uma posição de caractere em uma string não é automaticamente um lugar adequado para interromper a composição tipográfica. CSS Text Module Level 3: Characters and Letters

Quando a composição tipográfica exata precisar permanecer intacta, mantenha o título como texto contínuo, compare as configurações nativas de kerning e escolha uma renderização de fonte que resolva bem o par. Quando uma exceção local controlada for aceitável, adicione um limite, use a menor margem que funcione e confira em conjunto a palavra resultante e as quebras de linha.

Fontes