font-kerning

A propriedade CSS font-kerning controla o o uso da informação de kerning, que é, o controle de como as letras serão espaçadas. A informação de kerning é armazenada na fonte, e se a fonte é well-kerned, essa caracteristica permite que o espaçamento entre caracteres seja muito parecido, independente dos caracteres.

Example of font-kerning

font-kerning: auto;
font-kerning: normal;
font-kerning: none;

/* Global values */
font-kerning: inherit;
font-kerning: initial;
font-kerning: unset;

Initial value	`auto`
Aplica-se a	all elements. It also applies to `::first-letter` and `::first-line`.
Inherited	yes
Midia	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

Values

auto: This keyword defers to the browser regarding whether to use kerning. When the font size is small, font kerning may look strange and browsers will disable it. This is the default value.
normal: This keyword requires kerning to be applied.
none: This keyword prevents the browser from using the kerning information stored in the font.

Formal syntax

auto | normal | none

Examples

p {
  font-kerning: none;
}

Specifications

Specification	Status	Comment
CSS Fonts Module Level 3 The definition of 'font-kerning' in that specification.	Candidata a Recomendação	Initial definition

Browser Compatibility

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

Desktop
Dispositivo móvel

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	32^[1]	(Yes)	34 (34)^[2]	10^[3]	?	7

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	34.0 (34)^[2]	?	?	7

[1] Requires prefix -webkit-font-kerning. First version supporting this property is not known.

[2] Experimental implementation was available since Gecko 24. It was governed by the preference layout.css.font-features.enabled defaulting to true on Nightly and Aurora only.

[3] OpenType layout features might be supported using font-feature-settings property, however individual font-kerning property is not supported.

Kerning Demo

HTML Content

<div id="kern"></div>
<div id="nokern"></div>
<textarea id="input">AV T. ij</textarea>

CSS Content

#nokern, #kern {
  font-size: 2rem;
  font-family: serif;
}
#nokern {
  font-kerning: none;
}
#kern {
  font-kerning: normal;
}

JS Content

var input  = document.getElementById('input'),
    kern   = document.getElementById('kern'),
    nokern = document.getElementById('nokern');
input.addEventListener('keyup', function() {
  kern.textContent = input.value; /* Update content */
  nokern.textContent = input.value;
});
kern.textContent = input.value; /* Initialize content */
nokern.textContent = input.value;