Letter-spacing

CSS letter-spacing property allows us 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.

CSS Syntax

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

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
      <style>
            p{letter-spacing: normal;}
            .spacing{letter-spacing: 4px;}
            .spacing-negative{letter-spacing: -4px;}
      </style>
   </head>
   <body>

      <p>This is a paragraph.</p>
      <p class="spacing">We put more space between letters in this paragraph.</p>
      <p class="spacing-negative">But here we gave negative value and the letters almost merged.</p>

   </body>
</html>

Here the result is:



Property Values

Value Descriptions
normal It means that there won't be extra spaces between characters. It is the default value of this property.
length It defines an extra space between characters and we can use negative values.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.