The letter-spacing property sets extra space between characters. Positive values spread letters apart; negative values pull them closer. The value is added on top of the font’s normal spacing.
The initial value is normal. It is inherited. Use lengths such as 0.05em or 1px for tracking. Pair with word-spacing for gaps between words, and keep extreme values readable for accessibility.
normal and lengths.Not deprecated. Percentage values exist in newer specs and may vary by browser — prefer em or px for study and production tracking.
letter-spacing: normal | <length> | initial | inherit;Examples: normal, 0.2em, 1px, -0.05em.
| Value | Description | Try it |
|---|---|---|
normal | Font default spacing. Initial value | Try it |
<length> | Extra space such as 0.2em or 1px. May be negative | Try it |
0.05em | Subtle tracking that scales with font size | Try it |
-0.05em | Slightly tighter characters | Try it |
initial | Resets to normal | Try it |
inherit | Inherits from the parent element | Try it |
letter-spacingPick the text, then add a small amount of tracking.
letter-spacing to normal or a length such as 0.05em.em when spacing should scale with font-size.text-transform: uppercase labels.| Piece | Required? | Role |
|---|---|---|
| Text content | Yes | Applies to rendered characters in the element |
| Spacing value | Yes | normal or a length (extra space) |
| Relative units | Recommended | em keeps tracking proportional to font size |
| word-spacing | Separate | Controls gaps between words, not letters |
Only letter-spacing changes on the sample sentence.
Each snippet focuses on letter-spacing only. Use Try It Yourself for a live editor.
Leave tracking at the font default with normal.
<style>
p {
letter-spacing: normal;
}
</style>
<p>Letter spacing</p>letter-spacing: normal is the initial value.normal.Spread characters with a relative length.
<style>
h1 {
letter-spacing: 0.2em;
}
</style>
<h1>WIDE TITLE</h1>0.2em is added between each pair of characters.font-size grows, the tracking grows with it.Pull characters slightly closer with a negative length.
<style>
p {
letter-spacing: -0.05em;
}
</style>
<p>Slightly tighter text</p>-0.05em reduces the gap a little.font-size on screen, not only in the editor.Tracking is easy to overdo. Watch these traps.
Huge positive spacing turns words into scattered letters. Large negatives make glyphs overlap. Keep body text near normal.
normal is not always 0normal may allow justification tweaks. A length such as 0 fixes extra spacing at zero.
Languages such as Arabic expect joined letters. Letter spacing can break those connections — avoid it there.
When spacing is not zero, browsers often skip optional ligatures. That can change how pairs like “fi” look.
Gaps between words belong to word-spacing, not letter-spacing.
letter-spacing is a browser CSS property for typography. Node.js, Deno, and Bun do not apply it.
normal and length values are widely supported across modern browsers. Percentage letter-spacing is newer and not part of these numbers.
Bottom line: Safe for normal, px, and em tracking. Prefer em for scalable headings. Treat percentages as progressive. It is not a runtime API.
normal. Inherited.em values on headings; keep body text near normal.One line: letter-spacing adds tracking between letters — a little goes a long way.
Learn how to set the height of text lines for readable paragraphs.
8 people found this page helpful