Letter-spacing property
Last updated: 2026-09-13
letter-spacing Letter-spacing property
The letter-spacing CSS property sets the spacing between characters in text. Positive values increase the gap and negative values tighten it. It is often used in headings or to improve readability of uppercase English text.
| Category | |
|---|---|
| Initial Value | normal |
| Inherited | Yes |
| Applies To | |
| Animation Type | |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
letter-spacing: normal | <length>;⚙️ Values
| Value | Type | Description |
|---|---|---|
normal | Keyword | Default letter spacing |
<length> | Type | A fixed letter-spacing value |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| letter-spacing | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： For all-caps English text, adding 0.05em–0.1em of letter spacing noticeably improves readability.
❓ FAQ
QDoes the letter-spacing property work correctly with Chinese text?
AYes. Adding 0.5px to 1px between Hanzi makes body text feel more airy and headings more designed, but more than 2px breaks the reading rhythm. letter-spacing applies uniformly to all characters, Chinese and English alike.
QDoes the letter-spacing property affect text alignment in justified text?
AYes. The spacing occupies extra width after every character, and with text-align: justify the leftover space is distributed via spacing, so gaps can look uneven. For all-caps English, a modest increase actually improves readability.
QCan the letter-spacing property accept negative values in a CSS rule?
AYes. Negative values pull characters closer together — for example -0.05em tightens large heading text; but too small a value overlaps glyphs and hurts readability. In responsive layouts prefer em, which scales with the font size.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
