CSS letter-spacing Property
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 property is transitionable, so the spacing changes smoothly when a transition is defined.
INFO
The speed of transition is specified by the animation-timing-function.
| 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
Syntax of CSS letter-spacing Property
letter-spacing: normal | length | initial | inherit;Example of the letter-spacing property:
Example of CSS letter-spacing Property with normal and negative values
<!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:
Example of CSS letter-spacing Property with normal and em values
<!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
- Modern browsers fully support subpixel values for letter-spacing.
- Applying letter-spacing to lowercase letters is generally not recommended, as it can reduce readability due to uneven visual weight.
- You can animate this property using the CSS transitions.
- Note: This property controls spacing between individual characters, unlike
word-spacing, which controls spacing between words.
Values
| Value | Description | Play it |
|---|---|---|
| normal | Means that there won’t be extra spaces between characters. It is the default value of this property. | Play it » |
| length | Defines an extra space between characters. Negative values are allowed. | Play it » |
| initial | Makes the property use its default value. | Play it » |
| inherit | Inherits the property from its parents element. |
Practice
What is the function of the 'letter-spacing' property in CSS?