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.
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>
letter-spacing: normal | length | initial | inherit;
| 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. |
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>
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 |
