The letter-spacing property in CSS is used to control the spacing between characters in a text element. It helps improve readability and allows developers to create unique text styling effects.
- Supports both positive and negative values to increase or decrease character spacing.
- Commonly used in headings, titles, and paragraphs for better text appearance.
- Helps enhance typography and create visually appealing web designs.
Syntax
letter-spacing: normal | length | initial | inherit;Property Values
| Property | Description | Example |
|---|---|---|
letter-spacing | Adjusts the space between characters in text. | letter-spacing: 2px; |
normal | Applies the default letter spacing for the current font (no extra space between characters). | letter-spacing: normal; |
length | Adds or subtracts space between characters using a specified length (positive or negative). | letter-spacing: 1em; |
initial | Resets the property to its default value (normal). | letter-spacing: initial; |
inherit | Inherits the letter-spacing value from the parent element. | letter-spacing: inherit; |
| Positive value | Increases the space between characters. | letter-spacing: 3px; |
| Negative value | Decreases the space between characters, pulling them closer together. | letter-spacing: -1px; |
CSS letter-spacing Property Examples
Here are some examples of the CSS letter-spacing property:
Example 1: Using letter-spacing with normal value
Here, we apply the letter-spacing: normal; property to a paragraph, which means the text will use the default character spacing for the font. No additional space is added between characters. The page also features centered text with a green heading.
<!DOCTYPE html>
<html>
<head>
<title>CSS letter-spacing Property</title>
<style>
p {
letter-spacing: normal;
}
</style>
</head>
<body style="text-align: center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
CSS letter-spacing Property
</h2>
<p>
This paragraph has letter-spacing: normal;
</p>
</body>
</html>
Example 2: Spreading out the text
Here, we apply the letter-spacing: 5px; property to the paragraph, which increases the space between characters by 5 pixels. The text will appear more spaced out, creating a wider gap between each character in the paragraph. The text is also centered, with a green heading.
<!DOCTYPE html>
<html>
<head>
<title>CSS letter-spacing Property</title>
<style>
p {
letter-spacing: 5px;
}
</style>
</head>
<body style="text-align: center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
CSS letter-spacing Property
</h2>
<p>
This paragraph has letter-spacing: 5px;
</p>
</body>
</html>