CSS letter-spacing Property

letter-spacing specifies the spacing between text characters.

This property accepts any length value, such as, px, pt, em, etc.

Both positive and negative values are allowed.

Example

#

Two paragraphs each with different letter-spacing settings.

A paragraph with increased letter spacing.


A paragraph with decreased letter spacing.

<p style="letter-spacing: 2px;
          border: 1px solid steelblue; padding: 15px;">
  A paragraph with increased letter spacing.
</p>
<br />
<p style="letter-spacing: -1.5px;
          border: 1px solid steelblue; padding: 15px;">
  A paragraph with decreased letter spacing.
</p>

Syntax

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

Values

#

Value Description
normal Default. Standard spacing between characters.
length Sets the space between characters. Nnegative values are allowed.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Did you know?

Did you know?

Animating letter-spacing

A nice effect can be created by animating the letter-spacing.
To see, hover your mouse cursor over the text below.

HELLO WORLD

<style>
  .transition {
    font-size: 30px;
    letter-spacing: 0px;
    transition: letter-spacing 2s ease;
  }

  .transition:hover {
    letter-spacing: 20px;
    cursor: pointer;
  }
</style>

<p class="transition">
  HELLO WORLD
</p>

Browser support

This table shows when letter-spacing support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like

Guides