Conversor de Espaçamento entre Letras (Tracking → CSS)
Converta o tracking do Photoshop/Illustrator ou o espaçamento em % do Figma em valores CSS de em e px.
1.138 visualizações
Pré-visualização
TYPOGRAPHY SPACING EXAMPLE
Três Ferramentas, Três Unidades
Os apps da Adobe medem o tracking em milésimos de em: em CSS = tracking ÷ 1000, ou seja, tracking 50 → letter-spacing: 0.05em. A porcentagem do Figma é simplesmente em × 100: 5% = 0,05em. O valor em px também depende do tamanho da fonte: 0,05em a 16 px = 0,8 px, mas o mesmo 0,05em a 48 px equivale a 2,4 px. Digite o valor que seu arquivo de design mostrar; os demais se atualizam na hora, então você nunca precisa fazer a conta manualmente ao repassar uma especificação do Figma para um desenvolvedor. Sketch e XD seguem a mesma lógica baseada em em do CSS, motivo pelo qual o campo em costuma ser o mais seguro para padronizar quando a equipe usa várias ferramentas de design em conjunto.
Bom Saber
"Tracking" é um termo herdado das máquinas de fotocomposição dos anos 1960-70, como as folhas de transferência a seco Letraset e os primeiros equipamentos de fototipagem, em que ajustar o espaçamento entre letras significava deslocar fisicamente como os caracteres se posicionavam numa tira de filme ou folha de transferência. É frequentemente confundido com kerning, mas os dois não são a mesma coisa: o tracking adiciona espaçamento igual em toda uma seleção de texto, enquanto o kerning ajusta o espaço entre apenas um par específico de letras — como as formas sobrepostas em "AV" ou "To" — para corrigir um vão visual estranho que o espaçamento uniforme não resolve. No CSS também existe uma pegadinha prática que vale conhecer: letter-spacing adiciona espaço depois de cada caractere, inclusive o último, então textos centralizados ou alinhados à direita podem acabar parecendo levemente desequilibrados por causa desse espaço invisível que ninguém leva em conta. Valores de tracking negativos são tão válidos quanto os positivos e são comuns em títulos muito grandes, onde o espaçamento padrão começa a parecer solto assim que as letras são ampliadas além do tamanho de ponto para o qual foram desenhadas.
- Títulos grandes de destaque: −10 a −30 de tracking (apertado para impacto visual)
- Pequenos rótulos em maiúsculas: +50 a +200 de tracking (aberto para legibilidade)
- Texto corrido: geralmente deixado em 0 — o espaçamento padrão já foi ajustado pelo designer da fonte
- Logotipos e marcas: frequentemente com tracking personalizado por par de letras, além do que um único valor de tracking consegue alcançar
Perguntas Frequentes
O Figma mostra o espaçamento em px — e agora?
Nesse caso já é o valor CSS em px; digite-o no campo px com o tamanho da fonte definido corretamente, e leia o equivalente em em para um CSS que escale bem entre diferentes tamanhos de tipo. O Figma na verdade suporta tanto porcentagem quanto px para o espaçamento entre letras, dependendo das configurações do arquivo, então verifique qual seu sistema de design usa antes de repassar os valores para o desenvolvimento.
Por que texto em maiúsculas precisa de tracking positivo?
As letras maiúsculas são desenhadas para ficar confortavelmente ao lado de minúsculas com seus ascendentes e descendentes; compostas sozinhas, sem minúsculas para equilibrá-las, elas parecem visualmente apertadas. +5% a +15% (tracking 50-150) é a solução clássica para rótulos totalmente em maiúsculas, itens de navegação e textos de destaque, abrindo as formas das letras o suficiente para uma leitura confortável num relance.
Qual é a diferença entre tracking e kerning?
O tracking adiciona espaçamento uniforme em todo um trecho de texto — uma palavra, uma linha ou uma seleção inteira. O kerning ajusta o espaço entre apenas um par de letras adjacentes, como "AV" ou "To", onde as formas se sobreporiam ou deixariam um vão visual estranho. O CSS também os trata separadamente: letter-spacing controla o tracking, enquanto font-kerning (geralmente deixado em "normal") controla o kerning por par, extraído da tabela de kerning embutida na própria fonte.
Por que texto centralizado parece levemente desalinhado com letter-spacing aplicado?
O letter-spacing do CSS adiciona espaço depois de cada caractere, inclusive o último — uma peculiaridade da especificação que pega muitos desenvolvedores de surpresa. Em texto centralizado ou alinhado à direita, esse espaço invisível no final desloca o centro visual, fazendo o texto parecer empurrado um pouco para a esquerda de onde deveria realmente estar. Uma correção comum é aplicar uma pequena margin-right negativa no elemento, aproximadamente igual ao valor do letter-spacing.
De onde vem o termo "tracking"?
Remonta aos equipamentos de fotocomposição dos anos 1960 e 70 — máquinas como as folhas de transferência Letraset e as unidades de fototipagem, em que ajustar o espaço entre caracteres significava fisicamente deslocar como eles eram "rastreados" (tracked) ao longo de uma tira de filme ou folha de transferência. O termo permaneceu em uso durante a era da composição digital e acabou se tornando a palavra padrão para espaçamento entre letras em ferramentas como Photoshop e Illustrator, muito depois de as máquinas físicas que ele originalmente descrevia terem desaparecido.
Ferramentas Semelhantes
Reportar um Problema
Conversor de Espaçamento entre Letras (Tracking → CSS)
Comentários
Ainda não há comentários — seja o primeiro a escrever um!