CSS letter-spacing Property

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

Values supported by letter-spacing include font-relative values (em, rem), parent-relative values (percentage), 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 so 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

<!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>

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).

See another example where the letter-spacing is used with the transition property. You need to hover over the text to see the transition.

Example

<!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>

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.




Related articles