Propriedade CSS word-spacing
Use a propriedade CSS word-spacing para definir o espaço entre palavras em um texto. Veja os valores e experimente exemplos.
A propriedade CSS word-spacing controla o espaço entre as palavras em um trecho de texto. Ela acrescenta (ou subtrai) ao espaço padrão que a fonte já coloca após cada caractere de espaço — ou seja, ajusta a distância entre as palavras, e não entre letras individuais. Para o espaço entre letras, utilize letter-spacing.
Esta página aborda a sintaxe, todos os valores aceitos, o comportamento de comprimentos positivos e negativos, as unidades disponíveis, considerações de acessibilidade e exemplos executáveis.
Como funciona
O navegador parte do espaço entre palavras definido pela fonte. O valor fornecido a word-spacing é somado a essa base:
- Um valor positivo afasta mais as palavras.
- Um valor negativo aproxima as palavras (e pode sobrepô-las se for grande o suficiente).
- A palavra-chave
normalrestaura o espaçamento padrão da fonte — é equivalente a0, mas representa o valor inicial da propriedade, e não um comprimento literal.
Como word-spacing age nos espaços produzidos por caracteres de espaço, ela afeta apenas conteúdo inline. A propriedade também é herdada, portanto defini-la em um contêiner se aplica a todos os textos descendentes, salvo se um elemento filho a substituir.
Quando devo usá-la?
- Legibilidade — ampliar levemente os espaços entre palavras pode facilitar a leitura de títulos densos ou em maiúsculas.
- Tipo display — espaçar um título estilo logotipo para um visual deliberado e arejado.
- Compactação — um pequeno valor negativo pode recuperar espaço em layouts restritos, embora deva ser usado com moderação.
Para a maior parte do corpo do texto, mantenha normal; espaçamentos muito grandes dificultam a leitura em vez de ajudar.
A propriedade word-spacing pode ser animada, portanto pode ser aplicada com a propriedade transition.
word-spacing aplica-se apenas a conteúdo inline. Para espaçar letras, veja letter-spacing; para controlar o espaçamento produzido por espaços em branco, veja white-space.
| Valor Inicial | normal |
|---|---|
| Aplicado a | Todos os elementos. Também se aplica a ::first-letter e ::first-line. |
| Herdado | Sim. |
| Animável | Sim. Word-spacing é animável. |
| Versão | CSS1 |
| Sintaxe DOM | object.style.wordSpacing = "40px"; |
Sintaxe
Sintaxe da propriedade CSS word-spacing
word-spacing: normal | length | initial | inherit;Exemplo da propriedade word-spacing com o valor "normal":
Exemplo da propriedade CSS word-spacing com valor normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
word-spacing: normal;
}
</style>
</head>
<body>
<h2>Word-spacing property example</h2>
<p class="text">Lorem ipsum is simply dummy text...</p>
</body>
</html>No exemplo a seguir, o espaço entre as palavras é de 20px:
Exemplo da propriedade word-spacing especificada em "px":
Exemplo da propriedade CSS word-spacing com valor de comprimento (px)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
word-spacing: 20px;
}
</style>
</head>
<body>
<h2>Word-spacing property example</h2>
<p class="text">Lorem ipsum is simply dummy text...</p>
</body>
</html>Resultado
Exemplo de um valor negativo para word-spacing:
Um comprimento negativo aproxima as palavras. Aqui o espaço é reduzido em 3px:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
word-spacing: -3px;
}
</style>
</head>
<body>
<h2>Negative word-spacing example</h2>
<p class="text">Lorem ipsum is simply dummy text of the printing industry.</p>
</body>
</html>Unidades
O valor length aceita qualquer unidade de comprimento CSS:
- Absolutas —
px,pt,cm. Fixas independentemente do tamanho da fonte. - Relativas —
emerem. Um valoremescala com ofont-sizedo elemento, portantoword-spacing: 0.25emmantém a proporção consistente conforme o texto cresce. Geralmente é a escolha mais robusta para tipografia responsiva. Valores percentuais não são permitidos.
Acessibilidade
De acordo com o WCAG 1.4.12 (Espaçamento de Texto), os usuários podem substituir o espaçamento entre palavras para pelo menos 0.16em por questões de legibilidade. Evite fixar grandes valores em pixels que impeçam o refluxo do texto e nunca confie apenas no espaçamento entre palavras para transmitir significado. Espaçamento excessivo também pode dificultar a leitura para usuários com deficiências cognitivas ou visuais; portanto, mantenha os ajustes sutis para o corpo do texto.
Valores
| Valor | Descrição | Experimente |
|---|---|---|
| normal | Define o espaçamento normal entre palavras. Este é o valor padrão da propriedade. | Experimente » |
| length | Define um espaçamento extra entre palavras. Pode ser especificado em px, pt, cm, em, etc. Valores negativos são válidos. | Experimente » |
| initial | Faz a propriedade usar seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |