Propriedade letter-spacing e word-spacing: Espaçamento entre letras e palavras

Ajuste o espaçamento horizontal entre letras e palavras.

Além do espaçamento vertical entre as linhas (line-height), o CSS também nos permite ajustar o espaçamento horizontal do texto, tanto entre as letras quanto entre as palavras. As propriedades letter-spacing e word-spacing são responsáveis por esse controle.

Essas propriedades são importantes para refinar a tipografia, melhorar a legibilidade em certos contextos ou criar efeitos visuais específicos.

Pense na letter-spacing como o espaço que você deixa entre cada letra ao escrever à mão, e na word-spacing como o espaço entre uma palavra e outra. Você pode apertar ou alargar esses espaços.

1. Propriedade letter-spacing: Espaçamento entre letras

A propriedade letter-spacing define o espaçamento horizontal entre os caracteres (letras) de um texto.

Sintaxe:

seletor {
  letter-spacing: valor;
}

Valores possíveis:

  • normal (padrão): O espaçamento padrão entre as letras, determinado pela fonte.
  • Comprimento (px, em, rem, etc.): Define um valor fixo para o espaçamento.
    • Valores positivos: Aumentam o espaçamento entre as letras.
    • Valores negativos: Diminuem o espaçamento entre as letras (podendo até sobrepor caracteres se for muito negativo).

Exemplo de letter-spacing:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Letter Spacing</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      font-size: 1.1rem;
    }

    p {
      margin-bottom: 10px;
    }

    .normal-spacing {
      letter-spacing: normal; /* Padrão */
    }

    .increased-spacing {
      letter-spacing: 2px; /* Aumenta o espaçamento em 2px */
      color: blue;
    }

    .tight-spacing {
      letter-spacing: -0.5px; /* Diminui o espaçamento em 0.5px */
      color: red;
    }

    .em-spacing {
      letter-spacing: 0.1em; /* 0.1 vezes o font-size do elemento */
      color: green;
    }
  </style>
</head>
<body>
  <p class="normal-spacing">Este é um texto com espaçamento normal entre as letras.</p>
  <p class="increased-spacing">Este é um texto com espaçamento aumentado entre as letras.</p>
  <p class="tight-spacing">Este é um texto com espaçamento apertado entre as letras.</p>
  <p class="em-spacing">Este é um texto com espaçamento em 'em' entre as letras.</p>
</body>
</html>

2. Propriedade word-spacing: Espaçamento entre palavras

A propriedade word-spacing define o espaçamento horizontal entre as palavras de um texto.

Sintaxe:

seletor {
  word-spacing: valor;
}

Valores possíveis:

  • normal (padrão): O espaçamento padrão entre as palavras, determinado pela fonte e pelo navegador.
  • Comprimento (px, em, rem, etc.): Define um valor fixo para o espaçamento.
    • Valores positivos: Aumentam o espaçamento entre as palavras.
    • Valores negativos: Diminuem o espaçamento entre as palavras (podendo até fazer as palavras se tocarem).

Exemplo de word-spacing:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Word Spacing</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      font-size: 1.1rem;
    }

    p {
      margin-bottom: 10px;
    }

    .normal-word-spacing {
      word-spacing: normal; /* Padrão */
    }

    .increased-word-spacing {
      word-spacing: 10px; /* Aumenta o espaçamento em 10px */
      color: blue;
    }

    .tight-word-spacing {
      word-spacing: -3px; /* Diminui o espaçamento em 3px */
      color: red;
    }

    .em-word-spacing {
      word-spacing: 0.5em; /* 0.5 vezes o font-size do elemento */
      color: green;
    }
  </style>
</head>
<body>
  <p class="normal-word-spacing">Este é um texto com espaçamento normal entre as palavras.</p>
  <p class="increased-word-spacing">Este é um texto com espaçamento aumentado entre as palavras.</p>
  <p class="tight-word-spacing">Este é um texto com espaçamento apertado entre as palavras.</p>
  <p class="em-word-spacing">Este é um texto com espaçamento em 'em' entre as palavras.</p>
</body>
</html>

Boas Práticas e Considerações:

  • Legibilidade: O uso excessivo de letter-spacing ou word-spacing (especialmente valores negativos ou muito positivos) pode prejudicar seriamente a legibilidade do texto. Use com moderação e teste cuidadosamente.
  • Títulos e Slogans: Essas propriedades são mais eficazes em títulos curtos, slogans ou textos de destaque, onde um ajuste sutil pode melhorar o impacto visual. Para o corpo do texto, geralmente é melhor manter os valores normal.
  • Acessibilidade: Para usuários com dislexia ou outras dificuldades de leitura, o espaçamento padrão é geralmente o mais seguro. Alterações drásticas podem tornar o texto ilegível.
  • Unidades Relativas: Usar em ou rem para letter-spacing e word-spacing é uma boa prática, pois o espaçamento escalará proporcionalmente com o font-size do texto.
  • text-align: justify;: Quando text-align: justify; é usado, o navegador já ajusta o word-spacing para preencher a linha. Se você também definir word-spacing manualmente, pode interferir nesse comportamento.

As propriedades letter-spacing e word-spacing oferecem um controle fino sobre a microtipografia do seu site, permitindo ajustes sutis que podem refinar a aparência e a legibilidade do seu texto.