Espaçamento entre letras, palavras e linhas - letter-spacing, word-spacing e line-height Tutorial

Em todos os outros tutoriais de CSS de nossa apostila, na seção de formatação de texto, aprendemos como mudar as características das fontes, como cor, tamanho, itálico, negrito, maiúsculo, minúsculo, dentre outras propriedades.

Neste tutorial vamos fazer algo um pouco diferente, não vamos alterar nada nas fontes, e sim do espaçamento entre elas: distância entre as letras, entre as palavras e entre as linhas de um texto.

• Apostila HTML Progressivo: Fazer download

Espaçamento entre letras em CSS - letter-spacing: px;

Neste tutorial de nossa apostila você vai notar como o CSS, aliado ao HTML, se torna uma ferramenta extremamente poderosa (pois podemos estilizar qualquer coisa em um site), flexível (é fácil de alterar os estilos CSS) e simples (formatamos textos com poucos códigos em uma folha de estilos).

Uma dessas funcionalidades do CSS é a capacidade de escolhermos o espaço, a distância entre uma letra e outra de qualquer texto na hora de se criar um site.

Isso é feito de uma maneira bem simples, através da propriedade letter-spacing:

letter-spacing: Xpx;

Onde x é um número correspondente a distância, do espaçamento entre as letras, dado em pixels.
O espaçamento padrão é 0 pixel.

Se colocarmos um valor positivo, como 4px por exemplo, aumentaremos o espaçamento para este valor, veja o código:

<div style="letter-spacing: 4px;">Espaçamento de 4 pixels</div>

O resultado é:

Espaçamento de 4 pixels

Porém, podemos também alterar o valor do espaçamento para menos, aproximando as letras uma das outras.
Para isso, colocamos um valor negativo de pixels.

Por exemplo, a seguinte frase tem espaçamento de -2 pixels:
Código: <div style="letter-spacing: -2px;">Espaçamento de -2 pixels</div>

Coloque esse código em um documento .html e veja o interessante resultado.

Espaçamento entre palavras em CSS - word-spacing: px;

Letras muito espaçadas uma das outras não são muito comuns, pois há pouca utilidade em distanciar os caracteres, afinal um texto onde as letras estão muito distantes é difícil de se ler.

Na prática, o mais comum é distanciar as palavras entre si.
Se quiser ver palavras mais espaçadas que o comum, veja algum texto de jornal ou tente justificar um texto no Word, por exemplo.

Para espaçar palavras, vamos usar a propriedade word-spacing, cuja sintaxe é:

word-spacing: Xpx;

E assim como na propriedade do CSS letter-spacing, x é um número correspondente a distância, do espaçamento entre as letras, dado em pixels.

O espaçamento padrão é 0 pixel, se colocar um valor acima de 0 px, você irá acrescentar uma distância no espaçamento padrão.
Se colocar um valor negativo de pixel, você irá reduzir o espaçamento entre as palavras.

Por exemplo, o seguinte estilo CSS aplicado vai espaçar as palavras em 5 pixels usando a propriedade word-spacing:

<div style="word-spacing: 5px;">Tutorial completo de CSS</div>

Onde o resultado é:

Tutorial completo de CSS

Agora vamos aproximar em  6 px a distância entre as palavras:
Código: <div style="word-spacing: -6px;">Tutorial completo de CSS</div>
Resultado:

Tutorial completo de CSS

Espaçamento entre Linhas em CSS - line-height: %

E por fim, vamos estudar um outro tipo de espaçamento que é muito importante para trabalharmos com liberdade na formatação dos textos de nossos websites, que é o espaçamento entre uma linha e outra.

Para definirmos o espaçamento entre uma linha e outra, usamos a propriedade line-height (altura da linha, em inglês).

Lembrando que você pode usar outras medidas de distância, como em, porcentagem e keywords como valores, como o valor "normal" para colocar o espaçamento padrão de seu browser/sistema, igual como fizemos em nosso tutorial sobre tamanho de fontes em CSS.

Veja diferentes sintaxes para definir o tamanho do espaçamento entre linhas em CSS:

<p style="line-height: 100%">line-height = <br>100%</p>
<p style="line-height: 16px">line-height = <br>16px</p>
<p style="line-height: 1.5">line-height = <br>1.5</p>
<p style="line-height: 2em">line-height = <br>2em</p>

Cujo efeito é o seguinte:

line-height =
100%

line-height =
10px

line-height =
1.5

line-height =
2em