Espaçamento entre letras e palavras com CSS

Como dar espaço entre letras e palavras com CSS

Aprenda a definir o espaçamento entre letras, palavras e linhas e CSS, através das propriedades letter-spacing, word-spacing e line-height.

Neste artigo eu vou amostrar algumas formatações de texto utilizando algumas propriedades do css .

Letter-spacing – Espaçamento entre letras.

A propriedade CSS letter-spacing aumenta ou diminui o espaço entre caracteres em um texto

Word-spacing – Espaçamento entre palavras.

A propriedade CSS word-spacing aumenta ou diminui o espaço branco entre as palavras.

Text-align – Alinhamento do texto.

A propriedade é usada para definir o alinhamento horizontal de um texto. text-align

Um texto pode ser alinhado à esquerda ou à direita, centrado ou justificado.

Text-transform– Forma das letras.

Propriedade de transformação de texto.

Transforme o texto em diferentes elementos veja abaixo.

Text-transform:none – Sem letras maiúsculas. O texto é renderizado como está. Este é o padrão

Text-transform:capitalize: Transforma o primeiro caractere de cada palavra em maiúsculas

text-transform:uppercase: Transforma todos os caracteres em maiúsculas

Text-transform:lowercase: – Transforma todos os caracteres em minúsculas

Vamos adicionar o Css:

.mais-espaco-entre-letras  { letter-spacing:10px; }
.menos-espaco-entre-letras { letter-spacing:-1px; }

.mais-espaco-entre-palavras  { word-spacing:10px; }
.menos-espaco-entre-palavras { word-spacing:-1px; }

.mais-espaco-entre-palavras  { word-spacing:10px; }
.menos-espaco-entre-palavras { word-spacing:-1px; }

.linhamento-do-texto { text-align:left; } /*vocÊ pode usar text-align:right; ou text-align:center; */

.texto-none       { text-transform: none; }
.texto-uppercase  { text-transform: uppercase; }
.texto-capitalize { text-transform: capitalize; }
.texto-lowercase  { text-transform: lowercase; }

Vamos Adicionar o Html:

<p> 

    <strong>Letter-spacing</strong> - <span class="mais-espaco-entre-letras"> 
    Mais Espaço entre as letras</span> 

</p><br>

<p> 

    <strong>Letter-spacing</strong> - <span class="menos-espaco-entre-letras"> 
     Menos Espaço entre letras</span> 

</p><br>

<p> 

    <strong>Word Spacing</strong> - <span class="mais-espaco-entre-palavras"> 
    Mais Espaço entre palavras</span> 

</p><br> 

<p> 

    <strong>Word Spacing</strong> - <span class="menos-espaco-entre-palavras"> 
    Menos Espaço entre palavras</span> 

</p><br>  

<p class="linhamento-do-texto"> 

    <strong>Text Align</strong> - Texto Alinhado a Esquerda 
    ( Basta trocar para: <b>center, left, ou right</b>)

</p><br>

<p> 

    <strong>Text-transform none; </strong> - <span class="texto-none"> 
    Sem letras maiúsculas. O texto é renderizado como está. Este é o padrão</span> 

</p><br> 

<p> 

    <strong>Text-transform uppercase; </strong> - <span class="texto-uppercase"> 
    Transforma todos os caracteres em maiúsculas</span> 

</p><br> 

<p> 

    <strong>Text-transform lowercase; </strong> - <span class="texto-lowercase"> 
    Transforma Todos os Caracteres EM Minúsculas</span> 

</p><br> 

<p> 

    <strong>Text-transform capitalize; </strong> - <span class="texto-capitalize"> 
    Transforma o primeiro caractere de cada palavra em maiúsculas</span> 

</p><br>  

Viu como dar Espaçamento entre letras e palavras com CSS é bem fácil.

Veja o Resultado

Baixar Código Veja Funcionando