CSS
🎯 What is letter-spacing?
The letter-spacing property is used to control the space between letters in a text.
In other words, it defines how close or how far apart characters appear inside words.
This property is commonly used to improve readability, typography balance, and visual design quality.
🔹 Basic Usage
p {
letter-spacing: 2px;
}
➡️ In this example, 2px space is added between each letter.
🔸 Values
1. normal
This is the default value and uses the browser’s normal spacing.
2. length
Defines custom spacing using units like px, em, or rem.
h1 {
letter-spacing: 4px;
}
p {
letter-spacing: -1px;
}
➡️ Positive values increase spacing, negative values reduce spacing.
3. initial
Resets the property to its default value (normal).
4. inherit
The element inherits the letter-spacing value from its parent element.
💡 Summary Table
| Value | Description |
|---|---|
| normal | Default browser letter spacing |
| length | Custom spacing (px, em, rem) |
| initial | Resets to default value |
| inherit | Inherits from parent element |
-
🧠 Summary
- The letter-spacing property controls spacing between characters.
- Main effects:
- Positive values → wider text
- Negative values → tighter text
- 0 or normal → default spacing
- This property is useful for typography, branding, and UI design.