CSS letter-spacing Property

The CSS letter-spacing property allows specifying the spaces between letters/characters in a text.

Values supported by letter-spacing include parent-relative values (percentage), font-relative values (em, rem), absolute values (px) and the normal property, which resets to the font's default.

The letter-spacing property supports negative values.

The letter-spacing is transitionable that's why the spacing will change smoothly if a transition is defined.

The speed of transition is specified by the animation-timing-function.

Initial Value	normal
Applies to	All elements. It also applies to ::first-letter and ::first-line.
Inherited	Yes.
Animatable	Yes.
Version	CSS1
DOM Syntax	object.style.letterSpacing = "5px";

Syntax

letter-spacing: normal | length | initial | inherit;

Example of the letter-spacing property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        letter-spacing: normal;
      }
      .spacing {
        letter-spacing: 4px;
      }
      .spacing-negative {
        letter-spacing: -4px;
      }
    </style>
  </head>
  <body>
    <h2>Letter-spacing property example</h2>
    <p>This is a paragraph.</p>
    <p class="spacing">This is a paragraph.</p>
    <p class="spacing-negative">This is a paragraph.</p>
  </body>
</html>

Try it Yourself »

Result

In the given example the first one is a normal paragraph, for the second paragraph the letter-spacing is set to 4px, and for the third paragraph a negative value is set (-4px).

In the example below the letter-spacing is used with the transition property. You need to hover over the text to see the transition.

Example of the letter-spacing property with the transition property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #fff;
        color: #666;
        font-size: 1em;
        font-family: Roboto, Helvetica Sans-serif;
      }
      .example1 {
        background-color: #666;
        color: #eee;
        padding: 1em;
        letter-spacing: .5em;
        -webkit-transition: letter-spacing .5s ease;
        transition: letter-spacing .5s ease;
      }
      .example1:hover {
        letter-spacing: normal;
      }
      .example2 {
        background-color: #eee;
        color: #666;
        padding: 1em;
      }
    </style>
  </head>
  <body>
    <h2>Letter-spacing property example</h2>
    <div class="example1">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus earum ut alias doloremque esse. Porro maxime dicta veniam molestias sed modi sunt sapiente eum nostrum consequatur accusantium facilis blanditiis nihil.
      </p>
      <div class="example2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, facilis, sed, consectetur incidunt quia sint accusamus obcaecati quisquam asperiores officiis mollitia explicabo est ratione. Qui id ipsa ratione inventore nam!
      </div>
    </div>
  </body>
</html>

Try it Yourself »

Additional information

In almost all the browsers, if you define a value computing to less than 1px (subpixel values), the letter-spacing property will not be applied.
Letter-spacing lowercase letters is not a good idea.
You can animate this property using the CSS transitions.

Values

Value	Description	Play it
normal	Means that there won’t be extra spaces between characters. It is the default value of this property.	Play it »
length	Defines an extra space between characters. Negative values are allowed.	Play it »
initial	Makes the property use its default value.	Play it »
inherit	Inherits the property from its parents element.