Propriedade CSS font-kerning
A propriedade CSS font-kerning controla as informações de kerning da fonte. Conheça os valores e veja exemplos práticos.
A propriedade CSS font-kerning controla se o navegador usa as informações de kerning armazenadas em uma fonte.
Kerning é o ajuste do espaçamento entre pares específicos de caracteres para que o texto pareça equilibrado visualmente. Sem kerning, cada glifo mantém seu espaço lateral padrão, o que pode deixar lacunas indesejadas após letras como A, V, T ou W. Os designers de tipos enviam uma fonte com uma tabela de pares de kerning (por exemplo, AV, To, We) instruindo o renderizador a aproximar essas letras. font-kerning decide se essa tabela é aplicada.
O kerning trata exclusivamente do espaço entre glifos. Não confunda com letter-spacing, que adiciona uma quantidade fixa de espaçamento a todos os caracteres, independentemente do par.
Quando usar
Na maioria das páginas, você nunca precisa alterar font-kerning — os navegadores modernos ativam o kerning por padrão para o texto do corpo. Você o utiliza em duas situações:
- Forçar kerning em textos pequenos. Alguns navegadores desativam o kerning abaixo de um determinado tamanho por questões de desempenho. Definir
font-kerning: normalfaz com que ele seja aplicado em todos os tamanhos — útil para tipografia refinada como títulos ou citações destacadas. - Desativar o kerning com
font-kerning: none. Isso é ocasionalmente necessário para layouts monoespaçados, dados tabulares ou quando você mede a largura do texto manualmente e deseja avanços previsíveis e sem kerning.
Se a fonte não tiver uma tabela de kerning, a propriedade não terá efeito visível.
| Valor Inicial | auto |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter e ::first-line. |
| Herdado | Sim. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.fontKerning = "none"; |
Sintaxe
Sintaxe da propriedade CSS font-kerning
font-kerning: auto | normal | none;Comparando kerning ativado e desativado
Os pares AV, WA e To mostram o kerning com mais clareza. No exemplo abaixo, o primeiro bloco força o kerning ativado e o segundo o desativa, para que você possa ver as lacunas aumentarem:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
font-family: serif;
font-size: 60px;
}
div.kerned {
font-kerning: normal;
}
div.unkerned {
font-kerning: none;
}
</style>
</head>
<body>
<h2>font-kerning property example</h2>
<div class="kerned">AVATAR WAVE To</div>
<div class="unkerned">AVATAR WAVE To</div>
</body>
</html>A diferença é mais perceptível em tamanhos grandes e em fontes serifadas, que geralmente possuem tabelas de kerning mais ricas.
Valores
font-kerning aceita uma das três palavras-chave:
| Valor | Descrição |
|---|---|
auto | Deixa o navegador decidir se aplica o kerning. Este é o valor padrão. Os navegadores geralmente o ativam, mas podem desativá-lo em tamanhos muito pequenos. |
normal | Sempre aplica as informações de kerning da fonte. |
none | Desativa o kerning; os glifos mantêm seu espaçamento padrão. |
Propriedades relacionadas
font-kerning faz parte dos controles de tipografia OpenType no CSS. Estas propriedades combinam bem com ela:
letter-spacing— adiciona ou remove espaço uniforme entre todas as letras.font-feature-settings— acesso de baixo nível aos recursos OpenType (kerné o recurso quefont-kerningexpõe com um nome mais amigável).font-familyefont-variant— escolha e refine a tipografia.
Comportamento padrão do navegador
Como o valor inicial é auto, deixar a propriedade sem definição é adequado para a maioria dos textos — o kerning ainda acontece. Defina-a explicitamente apenas quando precisar garantir um comportamento específico em todos os navegadores, como font-kerning: normal em títulos de exibição.