---
title: font-kerning
slug: Web/CSS/font-kerning
translation_of: Web/CSS/font-kerning
---
<div>{{CSSRef}}</div>

<p>A propriedade CSS <strong><code>font-kerning</code></strong> 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 é <em>well-kerned</em>, essa caracteristica permite que o espaçamento entre caracteres seja muito parecido, independente dos caracteres.</p>

<p><img alt="Example of font-kerning" src="https://mdn.mozillademos.org/files/8455/font-kerning.png" style="display: block; height: 84px; margin: auto; width: 180px;"></p>

<pre class="brush:css no-line-numbers">font-kerning: auto;
font-kerning: normal;
font-kerning: none;

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

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<h3 id="Values">Values</h3>

<dl>
 <dt><code>auto</code></dt>
 <dd>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.</dd>
 <dt><code>normal</code></dt>
 <dd>This keyword requires kerning to be applied.</dd>
 <dt><code>none</code></dt>
 <dd>This keyword prevents the browser from using the kerning information stored in the font.</dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

{{csssyntax}}

<h2 id="Examples">Examples</h2>

<pre class="brush:css">p {
  font-kerning: none;
}</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Fonts', '#propdef-font-kerning', 'font-kerning')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser Compatibility</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>32<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("34")}}<sup>[2]</sup></td>
   <td>10<sup>[3]</sup></td>
   <td>{{ CompatUnknown() }}</td>
   <td>7</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("34")}}<sup>[2]</sup></td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>7</td>
  </tr>
 </tbody>
</table>
</div>

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

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

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

<h2 id="Kerning_Demo" name="Kerning_Demo">Kerning Demo</h2>

<h3 id="HTML_Content">HTML Content</h3>

<pre class="brush: html">&lt;div id="kern"&gt;&lt;/div&gt;
&lt;div id="nokern"&gt;&lt;/div&gt;
&lt;textarea id="input"&gt;AV T. ij&lt;/textarea&gt;</pre>

<h3 id="CSS_Content">CSS Content</h3>

<pre class="brush: css">#nokern, #kern {
  font-size: 2rem;
  font-family: serif;
}
#nokern {
  font-kerning: none;
}
#kern {
  font-kerning: normal;
}</pre>

<h3 id="JS_Content">JS Content</h3>

<pre class="brush: js">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;
</pre>

<p>{{ EmbedLiveSample('Kerning_Demo') }}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>{{cssxref("font-variant")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-synthesis")}}, {{cssxref("letter-spacing")}}.</li>
</ul>