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>

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>

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
normal Means that there won’t be extra spaces between characters. It is the default value of this property.
length Defines an extra space between characters. Negative values are allowed.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

30.0+ 12.0+ 2.0+ 6.1+ 17.0+


Do you find this helpful?

Related articles