Propriedade CSS letter-spacing
Aprenda a usar a propriedade CSS letter-spacing, que define o espaçamento entre letras/caracteres. Veja os valores e exemplos.
A propriedade CSS letter-spacing controla o espaçamento horizontal (conhecido como tracking) entre os caracteres de um texto. Ela adiciona espaço além do espaçamento padrão que a fonte já fornece, em vez de substituí-lo.
Isso é mais útil para ajustar títulos, rótulos em maiúsculas e textos no estilo de logotipo, onde o tracking padrão parece muito apertado ou muito solto. Para longos parágrafos de texto corrido, deixe em normal — mesmo pequenos ajustes prejudicam a legibilidade.
letter-spacing aceita um <length> (px, em, rem, etc.) ou a palavra-chave normal. Valores de comprimento podem ser negativos, o que aproxima os caracteres entre si. Como o valor é um comprimento (não uma proporção), usar em é conveniente: o espaçamento então escala com o tamanho de fonte do elemento.
A propriedade é animável, portanto o espaçamento muda suavemente quando uma transition é definida.
A velocidade da transição é especificada pela animation-timing-function.
| Valor Inicial | normal |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter e ::first-line. |
| Herdado | Sim. |
| Animável | Sim. |
| Versão | CSS1 |
| Sintaxe DOM | object.style.letterSpacing = "5px"; |
Sintaxe
Sintaxe da Propriedade CSS letter-spacing
letter-spacing: normal | length | initial | inherit;Exemplo da propriedade letter-spacing:
Exemplo da Propriedade CSS letter-spacing com valores normal e negativos
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
letter-spacing: normal;
}
.spacing {
letter-spacing: 4px;
}
.spacing-negative {
letter-spacing: -4px;
}
</style>
</head>
<body>
<h2>Letter-spacing property example</h2>
<p>This is a paragraph.</p>
<p class="spacing">This is a paragraph.</p>
<p class="spacing-negative">This is a paragraph.</p>
</body>
</html>Resultado
No exemplo acima, o primeiro parágrafo usa o espaçamento normal padrão, o segundo define letter-spacing: 4px (caracteres mais afastados) e o terceiro define um valor negativo, -4px (caracteres aproximados, podendo até se sobrepor).
No próximo exemplo, letter-spacing é combinado com a propriedade transition. Passe o mouse sobre o texto para ver o espaçamento animado.
Exemplo da propriedade letter-spacing com a propriedade transition:
Exemplo da Propriedade CSS letter-spacing com valores normal e em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #fff;
color: #666;
font-size: 1em;
font-family: Roboto, Helvetica Sans-serif;
}
.example1 {
background-color: #666;
color: #eee;
padding: 1em;
letter-spacing: .5em;
-webkit-transition: letter-spacing .5s ease;
transition: letter-spacing .5s ease;
}
.example1:hover {
letter-spacing: normal;
}
.example2 {
background-color: #eee;
color: #666;
padding: 1em;
}
</style>
</head>
<body>
<h2>Letter-spacing property example</h2>
<div class="example1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus earum ut alias doloremque esse. Porro maxime dicta veniam molestias sed modi sunt sapiente eum nostrum consequatur accusantium facilis blanditiis nihil.
</p>
<div class="example2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, facilis, sed, consectetur incidunt quia sint accusamus obcaecati quisquam asperiores officiis mollitia explicabo est ratione. Qui id ipsa ratione inventore nam!
</div>
</div>
</body>
</html>Quando usar letter-spacing
- Títulos e rótulos em maiúsculas. Textos em caixa alta são definidos de forma compacta pela maioria das fontes; adicionar
0.05em–0.1emde espaçamento facilita a leitura e dá uma aparência refinada e "projetada". - Versalete e siglas. Um pouco de tracking extra separa os glifos capitais densos.
- Efeitos de hover e foco. Como a propriedade é animável, fazer a transição do espaçamento cria um efeito de revelação sutil em links e botões.
- Evite em texto corrido. Espaçar parágrafos longos desacelera a leitura. Deixe textos longos em
normal.
Informações adicionais
- Os navegadores modernos suportam totalmente valores de subpixel (fracionários), como
0.5px. - Valores negativos reduzem o espaçamento e podem fazer os caracteres se sobreporem — útil para títulos compactos no estilo de logotipo, mas teste com cuidado.
- Usar
emfaz o espaçamento escalar com ofont-sizedo elemento; usarpxmantém fixo independentemente do tamanho da fonte. letter-spacingé herdado, portanto os elementos filhos recebem o valor a menos que o redefinam paranormal.- Esta propriedade controla o espaçamento entre caracteres individuais; para espaçar palavras inteiras, use word-spacing.
Valores
| Valor | Descrição | Experimente |
|---|---|---|
| normal | Significa que não haverá espaços extras entre os caracteres. É o valor padrão desta propriedade. | Experimente » |
| length | Define um espaço extra entre os caracteres. Valores negativos são permitidos. | Experimente » |
| initial | Faz a propriedade usar seu valor padrão. | Experimente » |
| inherit | Herda a propriedade de seu elemento pai. |