The CSS letter-spacing property allows specifying the spaces between letters/characters in a text.
Values supported by letter-spacing include parent-relative values (percentage), font-relative values (em, rem), 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 that’s why the spacing will change smoothly if a transition is defined.
| 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 of the letter-spacing property:
<!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>Result
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).
In the example below the letter-spacing is used with the transition property. You need to hover over the text to see the transition.
Example of the letter-spacing property with the transition property:
<!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>Additional information
- In almost all the browsers, if you define a value computing to less than 1px (subpixel values), the letter-spacing property will not be applied.
- Letter-spacing lowercase letters is not a good idea.
- You can animate this property using the CSS transitions.