---
title: letter-spacing
slug: Web/CSS/letter-spacing
translation_of: Web/CSS/letter-spacing
---
<div>{{CSSRef}}</div>

<p>A propriedade CSS <strong><code>letter-spacing</code></strong> específica o comportamento do espaçamento entre caracteres de texto.</p>

<div>{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}</div>



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

<pre class="brush:css no-line-numbers">/* Keyword value */
letter-spacing: normal;

/* &lt;length&gt; values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;

/* Global values */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;
</pre>

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

<dl>
 <dt><code>normal</code></dt>
 <dd>O espaçamento de letras normal para a fonte atual. Ao contrário de um valor de 0, essa palavra-chave permite que o {{glossary("agente do usuário")}} altere o espaço entre os caracteres para justificar o texto.</dd>
 <dt>{{cssxref("&lt;length&gt;")}}</dt>
 <dd>Especifica o espaço adicional entre caracteres, além do espaço padrão entre os caracteres. Os valores podem ser negativos, mas pode haver limites específicos da implementação. Os agentes de usuário podem não aumentar ou diminuir o espaço inter-personagem para justificar o texto.</dd>
</dl>

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

{{csssyntax}}

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

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

<pre class="brush: html">&lt;p class="normal"&gt;letter spacing&lt;/p&gt;
&lt;p class="em-wide"&gt;letter spacing&lt;/p&gt;
&lt;p class="em-wider"&gt;letter spacing&lt;/p&gt;
&lt;p class="em-tight"&gt;letter spacing&lt;/p&gt;
&lt;p class="px-wide"&gt;letter spacing&lt;/p&gt;
</pre>

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

<pre class="brush: css">.normal   { letter-spacing: normal; }
.em-wide  { letter-spacing: 0.4em; }
.em-wider { letter-spacing: 1em; }
.em-tight { letter-spacing: -0.05em; }
.px-wide  { letter-spacing: 6px; }
</pre>

<h3 id="Result">Result</h3>

<p>{{ EmbedLiveSample('Examples', 440, 185) }}</p>

<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 Text', '#letter-spacing-property', 'letter-spacing')}}</td>
   <td>{{Spec2('CSS3 Text')}}</td>
   <td>No change.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'letter-spacing')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Defines <code>letter-spacing</code> as animatable.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>No change.</td>
  </tr>
  <tr>
   <td>{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}</td>
   <td>{{Spec2('SVG1.1')}}</td>
   <td>Initial SVG definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

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

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("css.properties.letter-spacing")}}</p>

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

<ul>
 <li>{{cssxref("font-kerning")}}</li>
</ul>