The CSS letter-spacing property
The CSS letter-spacing property adjusts the space between characters — known as tracking. A positive value like 0.05em opens the text up; a negative value like -0.02em tightens it. Using em units keeps the spacing proportional to the font size. It is most useful for small caps and large display headings.
Overview
letter-spacing controls the gap between individual characters, what typographers call tracking. The default, normal, uses the spacing the font designer intended; a length nudges every gap wider (positive) or narrower (negative).
Two situations call for it. All-caps text — labels, buttons, small headings — almost always reads better with a little extra tracking, because capital letters are designed to sit within words, not in a tight row of their own; something like 0.05em gives them room to breathe. Large display headings, on the other hand, can look loose at their default spacing, so a small negative value like -0.02em tightens them into a more solid, confident shape.
Reach for em rather than px so the tracking scales with the font size — 0.05em stays proportional whether the text is 14px or 40px. And use it sparingly on body text: small adjustments are invisible, larger ones quickly hurt readability rather than help it.
Syntax
selector {
letter-spacing: 0.05em;
}
/* breathing room for all-caps */
.label {
text-transform: uppercase;
letter-spacing: 0.08em;
}Values
The letter-spacing property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.
| Value | Description |
|---|---|
normal |
The font's default spacing. The default value. |
length (em) |
Proportional spacing such as 0.05em that scales with the font size. Recommended. |
length (px) |
A fixed spacing such as 1px (does not scale with font size). |
negative |
Negative values like -0.02em tighten the characters together. |
Example
<style>
p { margin: 0 0 8px; font-family: system-ui, sans-serif; }
.tight { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.label { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #1c7ce9; }
</style>
<p class="tight">Tight display heading</p>
<p class="label">Spaced uppercase label</p>Best practices
- Add positive tracking (around
0.05em) to uppercase labels and buttons so the capitals do not crowd. - Tighten large headings slightly with a small negative value for a more solid look.
- Use
emunits so the spacing stays proportional to the font size. - Leave body text close to
normal— heavy tracking on running text harms readability more than it helps.
Accessibility
Spacing affects how easily text can be read, and the WCAG text-spacing criterion expects content to survive when users increase letter spacing themselves (up to 0.12em) through a reading tool or custom stylesheet. Build flexibly — avoid fixed-height containers that would clip text once spacing grows, so a reader can widen the tracking without losing words.
Be cautious with negative values: pulling characters too close together can make letters blur into one another, which is hardest on readers with low vision or dyslexia. A little tightening on big headings is fine; tightening body text is not.
Frequently asked questions
How do I add space between letters in CSS?
letter-spacing, e.g. letter-spacing: 0.05em. Positive values widen the gaps; em units keep the spacing proportional to the font size.Should I use em or px for letter-spacing?
em is usually better because it scales with the font size, so the tracking stays proportional whether the text is small or large.Why does my all-caps text look cramped?
letter-spacing, around 0.05em, to open it up.