O HTML Progressivo agora faz parte do Programação Progressiva!
Este conteúdo foi atualizado e movido para o nosso novo endereço.
Redirecionando para: Clique aqui se não for redirecionado
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.
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;
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%
100%
line-height =
10px
10px
line-height =
1.5
1.5
line-height =
2em
2em