Por que usar em em vez de px para letter-spacing?

Com em o espaçamento escala com o font-size. 0.05em em 16px é 0.8px, em 24px é 1.2px — mesma proporção visual.

Qual é a diferença entre letter-spacing, word-spacing e line-height?

letter-spacing: espaço entre caracteres. word-spacing: espaço entre palavras. line-height: distância vertical entre linhas.

Quando aumentar o letter-spacing?

Texto em maiúsculas (0.05–0.15em), texto pequeno como legendas, grandes títulos display.

Que valores de line-height melhoram a legibilidade?

Corpo de texto: 1.5–1.7. Cabeçalhos: 1.1–1.3. WCAG 1.4.12 recomenda pelo menos 1.5.

Letter Spacing Tool

Calibre espaçamento de letras, palavras e altura de linha com prévia ao vivo e estilos predefinidos.

6 presetspx / em / remCopie CSS imediatamente

① Ajuste espaçamento, altura de linha e tamanho de fonte ② Pré-visualize ao vivo ③ Copie os valores CSS

Presets

Espaçamento de letras0em

Espaçamento de palavras0em

Altura de linha1.6

Tamanho da fonte (px)16px

Peso da fonte

Família tipográfica

Transformação de texto

Typography is the art and technique of arranging type. Good spacing creates rhythm, hierarchy, and visual comfort for the reader.

Saída CSS

letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.6;
font-size: 16px;
font-weight: 400;
font-family: DM Sans, sans-serif;
text-transform: none;

O que é letter-spacing em CSS?

A propriedade CSS letter-spacing controla o espaço horizontal entre caracteres individuais (chamado tracking na tipografia de impressão). Aceita valores positivos ou negativos em px, em ou rem. Usar unidades em é preferível porque o espaçamento escala proporcionalmente com o font-size.

A propriedade word-spacing adiciona espaço entre palavras, enquanto line-height define o ritmo vertical. WCAG 1.4.12 exige que nenhum conteúdo seja perdido quando letter-spacing for pelo menos 0.12em, word-spacing pelo menos 0.16em e line-height pelo menos 1.5.

Perguntas frequentes

A propriedade CSS letter-spacing adiciona espaço uniforme entre cada caractere. Na tipografia de impressão chama-se "tracking". Valores positivos afastam os caracteres; negativos os aproximam.

Com em o espaçamento escala automaticamente com o font-size. Por exemplo, letter-spacing: 0.05em em 16px é 0.8px, mas em 24px é 1.2px — mantendo a mesma proporção visual.

letter-spacing controla o espaço entre caracteres individuais. word-spacing adiciona espaço horizontal entre palavras. line-height define a distância vertical entre linhas de texto.

Aumente letter-spacing para: (1) texto em maiúsculas — precisa de tracking extra (0.05–0.15em); (2) texto pequeno como legendas; (3) títulos display em tamanhos grandes para aparência mais refinada.

Para corpo de texto, 1.5–1.7 é ótimo. Cabeçalhos podem usar 1.1–1.3. Legendas funcionam em 1.4. WCAG 1.4.12 recomenda pelo menos 1.5 para conteúdo de corpo.

Designers usam espaçamento preciso para: guias de estilo de marca, bibliotecas de componentes CSS, design editorial com fontes display, auditorias de acessibilidade WCAG 1.4.12.

WCAG 2.1 SC 1.4.12 exige que nenhum conteúdo seja perdido com: letter-spacing pelo menos 0.12em, word-spacing pelo menos 0.16em, line-height pelo menos 1.5, espaço após parágrafos pelo menos 2em.

O que é letter-spacing em CSS?

Perguntas frequentes

Explore a nossa rede