Home >CSS >CSS reference – properties, selectors, functions >letter-spacing

letter-spacing

letter-spacing: normal | <length>

Adds (or removes) space between characters – tracking in typography. It suits short texts in capital letters, labels and headings; in ordinary text it rather worsens readability.

Values

normal – the default: spacing by the font.
length – the added space, even negative: 0.1em, 2px, -0.02em. The em unit adapts to the font size.

Initial value: normal. Inherited: yes. Applies to: all elements.

Examples

A tracked label in capitals and a slightly tightened large heading:

<span class="label">New</span>
<h3 class="heading">A large heading</h3>

.label {
  padding: 2px 8px;
  background: #e91e63;
  color: #fff;
  font: 700 12px Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.heading {
  margin: 10px 0 0;
  font: 700 32px Arial, sans-serif;
  letter-spacing: -0.02em;
}

result

New

A large heading

Things to watch out for

The space is also added after the last letter – centered tracked text is therefore slightly shifted to the left. A padding of the same size or a negative margin at the start fixes it.
Tracking breaks up ligatures (fi, fl) and in scripts with connected strokes (Arabic, script fonts) it breaks the shapes.
For accessibility (WCAG) it must be possible to increase the letter spacing to 0.12 times the font size without losing content.
Percentages (10%) are new – Chrome supports them only since version 145; use em for now.

Browser support

Baseline – widely available: works in all major browsers and has for a long time (since 2015 at the latest). Since version: Chrome 1, Firefox 1, Safari 1. As of October 2026 (MDN browser-compat-data).