Back
Você está aqui: Home 
Tutoriais HTML/CSS CSS As propriedades CSS Letter-spacing e word-spacing
Tutoriais HTML/CSS CSS As propriedades CSS Letter-spacing e word-spacing
CSS
As propriedades CSS Letter-spacing e word-spacing
letter-spacing
A propriedade letter-spacing altera o espaço entre as letras.
A sua sintaxe é:
letter-spacing: normal
letter-spacing: comprimento
As unidades podem ser quaisquer uma das unidades válidas para tamanho de fontes (pt, px, pc, cm, in, mm, em e ex). Na tipografia, é mais comum usar "em" como medida de espaçamento por ser proporcional ao tamanho da fonte.
Pode-se usar também valores negativos para sobrepor caracteres, criar ligaduras (usadas em kerning) e caracteres especiais (por exemplo, sobrepondo / com \).
Exemplo:
letter-spacing: normal
letter-spacing: comprimento
As unidades podem ser quaisquer uma das unidades válidas para tamanho de fontes (pt, px, pc, cm, in, mm, em e ex). Na tipografia, é mais comum usar "em" como medida de espaçamento por ser proporcional ao tamanho da fonte.
Pode-se usar também valores negativos para sobrepor caracteres, criar ligaduras (usadas em kerning) e caracteres especiais (por exemplo, sobrepondo / com \).
Exemplo:
<html>
<head>
<style type="text/css">
<!--
h2 {letter-spacing: 1.2em;}
p {letter-spacing: 0.4cm;}
-->
</style>
</head>
<body>
<h2> Este é o cabeçalho</h2>
<p> Este é o parágrafo</p>
</body>
</html>
Veja como fica:
<head>
<style type="text/css">
<!--
h2 {letter-spacing: 1.2em;}
p {letter-spacing: 0.4cm;}
-->
</style>
</head>
<body>
<h2> Este é o cabeçalho</h2>
<p> Este é o parágrafo</p>
</body>
</html>
Veja como fica:
O suporte a letter-spacing nos principais browsers ainda é inconsistente. O Netscape (versão 4) não o suporta.
word-spacing
O Espaçamento entre palavras em CSS é feito pela propriedade word-spacing quem contem apenas dois valores possível: normal ou um valor geralmente em pixel para determinar a distância ou o espaçamento entre as palavras.
Exemplo:
<html>
<head>
<style type="text/css">
<!--
h2 {word-spacing: 1.8em;}
p {word-spacing: 80px;}
-->
</style>
</head>
<body>
<h2> Veja o texto </h2>
<p> Veja o texto</p>
</body>
</html>
<html>
<head>
<style type="text/css">
<!--
h2 {word-spacing: 1.8em;}
p {word-spacing: 80px;}
-->
</style>
</head>
<body>
<h2> Veja o texto </h2>
<p> Veja o texto</p>
</body>
</html>
Veja como ficou:
