CSS - letter-spacing Property

Quiz

CSS letter-spacing property specifies the space between the letters or characters that make up a word or text. If positive values are given, the spacing between the letters or characters increases and if negative values are given, the spacing between the letters or characters decreases.

Syntax

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

Property Values

Value	Description
normal	It represents the normal amount of space between letters. Default.
length	It specifies the spacing between letters in length units (px, em, rem etc.). Negative values are allowed.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Letter Spacing Property

The following examples explain the line-spacing property with different values.

Letter Spacing Property with Normal Value

To have normal spacing between the letters or characters in a word or text, we use the normal value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      h3 {
         color: red;
      }

      .px {
         letter-spacing: 5px;
      }

      .normal {
         letter-spacing: normal;
      }
   </style>
</head>

<body>
   <h2>
      CSS letter-spacing property
   </h2>
   <h4>
      letter-spacing: 5px
   </h4>
   <h3 class="px">
      Observe the spacing in this line of text.
   </h3>
   <h4>
      letter-spacing: normal
   </h4>
   <h3 class="normal">
      Observe the spacing in this line of text.
   </h3>


</body>

</html>

Letter Spacing Property with Positive Values

To have larger space between the letters or characters in a word or text, we specify positive values using length units (e.g. px, cm, rem etc.). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      h3{
         color: red;
      }
      .px{
            letter-spacing: 7px;
      }
      .cm{
            letter-spacing: 1cm;
      }
      .rem{
            letter-spacing: 1rem;
      }
   </style>
</head>

<body>
   <h2>
      CSS letter-spacing property
   </h2>
   <h4>
      letter-spacing: 7px
   </h4>
   <h3 class="px">
      Observe the spacing in this line of text.
   </h3>
   <h4>
      letter-spacing: 1cm
   </h4>
   <h3 class="cm">
      Observe the spacing in this line of text.
   </h3>
   <h4>
      letter-spacing: 1rem
   </h4>
   <h3 class="rem">
      Observe the spacing in this line of text.
   </h3>
    
</body>

</html>

Letter Spacing Property with Negative Values

To have smaller space between the letters or characters in a word or text, we specify negative values using length units (e.g. px, cm, rem etc.). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      h3 {
         color: red;
      }

      .px1 {
         letter-spacing: -1px;
      }

      .px2 {
         letter-spacing: -2px;
      }

      .rem {
         letter-spacing: -1rem;
      }
   </style>
</head>

<body>
   <h2>
      CSS letter-spacing property
   </h2>
   <h4>
      letter-spacing: -1px
   </h4>
   <h3 class="px1">
      Observe the spacing in this line of text.
   </h3>
   <h4>
      letter-spacing: -2px
   </h4>
   <h3 class="px2">
      Observe the spacing in this line of text.
   </h3>
   <h4>
      letter-spacing: -1rem
   </h4>
   <h3 class="rem">
      Observe the spacing in this line of text.
   </h3>

</body>

</html>

Supported Browsers

Property
letter-spacing	1.0	4.0	1.0	1.0	3.5

css_reference.htm

Print Page