letter-spacing

  • Revision slug: Web/CSS/letter-spacing
  • Revision title: letter-spacing
  • Revision id: 494251
  • Created:
  • Creator: kscarfone
  • Is current revision? No
  • Comment Updated tags

Revision Content

{{CSSRef}}

Summary

The letter-spacing CSS property specifies spacing behavior between text characters.

{{cssbox('letter-spacing')}}

Syntax

Formal syntax: {{csssyntax("letter-spacing")}}
letter-spacing: normal

letter-spacing: 0.3em
letter-spacing: 3px
letter-spacing: .3px

letter-spacing: inherit

Values

normal
The spacing is the normal spacing for the current font. This value allows the user agent to alter the space between characters in order to justify text. That's the difference to the length value 0.
<length>
Indicates inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.
See {{Xref_csslength}} values for possible units.

Examples

Having a css style of:

p { letter-spacing: 0.4em }

and a webpage with the code:

<p> letter spacing </p>

will produce the following:

letter spacing


Here are some more letter spacing examples:

letter-spacing: 0.1em
letter-spacing: 0.5em
letter-spacing: 0.8em
letter-spacing: 1em
letter-spacing: -0.05em
letter-spacing: 6px

Specifications

Specification Status Comment
{{SpecName('CSS3 Text', '#letter-spacing', 'letter-spacing')}} {{Spec2('CSS3 Text')}} Replace the previous values with a <spacing-limit> value that allows up to three values describing the optimum, minimum, and maximum value.
{{SpecName('CSS3 Transitions', '#animatable-css', 'letter-spacing')}} {{Spec2('CSS3 Transitions')}} Defines letter-spacing as animatable.
{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}} {{Spec2('CSS2.1')}} No change.
{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}} {{Spec2('SVG1.1')}} Initial SVG specification.
{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}} {{Spec2('CSS1')}} Initial specification

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
HTML support 1.0 {{CompatGeckoDesktop(1.0)}} 4.0 3.5 1.0 (85)
SVG support {{CompatVersionUnknown}} {{CompatNo}} ({{bug(371787)}}) {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
HTML support {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
SVG support {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

See also

  • {{CSS_Reference:Text}}

Revision Source

<div>
 {{CSSRef}}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <code>letter-spacing</code> CSS property specifies spacing behavior between text characters.</p>
<p>{{cssbox('letter-spacing')}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("letter-spacing")}}
</pre>
<pre>
letter-spacing: normal

letter-spacing: 0.3em
letter-spacing: 3px
letter-spacing: .3px

letter-spacing: inherit
</pre>
<h3 id="Values" name="Values">Values</h3>
<dl>
 <dt>
  <code>normal</code></dt>
 <dd>
  The spacing is the normal spacing for the current font. This value allows the user agent to alter the space between characters in order to justify text. That's the difference to the length value<code> 0</code>.</dd>
 <dt>
  <code>&lt;length&gt;</code></dt>
 <dd>
  Indicates inter-character space <strong><em>in addition to</em></strong> the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.<br />
  See {{Xref_csslength}} values for possible units.</dd>
</dl>
<h2 id="Examples" name="Examples">Examples</h2>
<p>Having a css style of:</p>
<pre class="brush: css">
p { letter-spacing: 0.4em }
</pre>
<p>and a webpage with the code:</p>
<pre class="brush: html">
&lt;p&gt; letter spacing &lt;/p&gt;
</pre>
<p>will produce the following:</p>
<div class="pre-hack" style="white-space: pre; padding: 1em; background-color: #f6f6f2; border: 1px dotted #cbc8b9">
 <span style="letter-spacing: 0.4em;">letter spacing</span></div>
<p><br />
 Here are some more letter spacing examples:</p>
<div class="pre-hack" style="white-space: pre; padding: 1em; background-color: #f6f6f2; border: 1px dotted #cbc8b9">
 <span style="letter-spacing: 0.1em;">letter-spacing: <strong>0.1em</strong></span><br />
 <span style="letter-spacing: 0.5em;">letter-spacing: <strong>0.5em</strong></span><br />
 <span style="letter-spacing: 0.8em;">letter-spacing: <strong>0.8em</strong></span><br />
 <span style="letter-spacing: 1em;">letter-spacing: <strong>1em</strong></span><br />
 <span style="letter-spacing: -0.05em;">letter-spacing: <strong>-0.05em</strong></span><br />
 <span style="letter-spacing: 6px;">letter-spacing: <strong>6px</strong></span></div>
<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', 'letter-spacing')}}</td>
   <td>{{Spec2('CSS3 Text')}}</td>
   <td>Replace the previous values with a <code>&lt;spacing-limit&gt;</code> value that allows up to three values describing the optimum, minimum, and maximum value.</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 specification.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Initial specification</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>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari (WebKit)</th>
   </tr>
   <tr>
    <td>HTML support</td>
    <td>1.0</td>
    <td>{{CompatGeckoDesktop(1.0)}}</td>
    <td>4.0</td>
    <td>3.5</td>
    <td>1.0 (85)</td>
   </tr>
   <tr>
    <td>SVG support</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatNo}} ({{bug(371787)}})</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
    <td>{{CompatVersionUnknown}}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Mobile</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>HTML support</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
   </tr>
   <tr>
    <td>SVG support</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
    <td>{{CompatUnknown}}</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
 <li>{{CSS_Reference:Text}}</li>
</ul>
Revert to this revision