Should letter-spacing be set in em or px?

em is almost always the better choice because it scales with font-size — a heading and a caption using the same em value keep proportional spacing, while a fixed px value would look too tight on large text and too loose on small text.

Why do all-caps headings usually need extra letter-spacing?

Uppercase letters have less visual variation in shape than mixed case, so tightly-set caps can feel cramped and harder to scan. A small positive tracking value (around 0.05em–0.12em) opens the letters up and is a common pattern in UI labels, buttons, and eyebrow headings.

Can negative letter-spacing ever be a good idea?

Yes, for large display headings — many typefaces have proportions tuned for body text, and at very large sizes the natural spacing can look loose. A slight negative value (around -0.01em to -0.03em) tightens big headlines without hurting readability, since there's less need to distinguish characters at that size.

Does letter-spacing affect accessibility?

Some readers benefit from slightly increased letter-spacing for readability, which is why WCAG's text-spacing success criterion requires content to remain usable when a user's browser or assistive tool overrides letter-spacing up to 0.12em — avoid using overly tight or negative spacing on body copy that people need to read at length.

Does this tool store or upload my text?

No — everything happens locally in your browser using CSS applied live to the text you type. Nothing is sent to a server.

LETTER SPACING CALCULATOR

Preview letter-spacing live and convert between em and px, then copy the CSS.

Letter spacing preview

Font size: 24px

Letter spacing: 0em

Uppercase

.tracked-text {
  font-size: 24px;
  letter-spacing: 0em;
}

How to set letter-spacing

1
Type your own preview text (or use the default).
2
Pick a preset — Tight, Normal, Wide, or an all-caps tracking value — or drag the slider.
3
Adjust the font size to see how spacing reads at different sizes.
4
Switch between em and px to see the equivalent value.
5
Copy the generated letter-spacing CSS.

Questions

Should letter-spacing be set in em or px?: em is almost always the better choice because it scales with font-size — a heading and a caption using the same em value keep proportional spacing, while a fixed px value would look too tight on large text and too loose on small text.
Why do all-caps headings usually need extra letter-spacing?: Uppercase letters have less visual variation in shape than mixed case, so tightly-set caps can feel cramped and harder to scan. A small positive tracking value (around 0.05em–0.12em) opens the letters up and is a common pattern in UI labels, buttons, and eyebrow headings.
Can negative letter-spacing ever be a good idea?: Yes, for large display headings — many typefaces have proportions tuned for body text, and at very large sizes the natural spacing can look loose. A slight negative value (around -0.01em to -0.03em) tightens big headlines without hurting readability, since there's less need to distinguish characters at that size.
Does letter-spacing affect accessibility?: Some readers benefit from slightly increased letter-spacing for readability, which is why WCAG's text-spacing success criterion requires content to remain usable when a user's browser or assistive tool overrides letter-spacing up to 0.12em — avoid using overly tight or negative spacing on body copy that people need to read at length.
Does this tool store or upload my text?: No — everything happens locally in your browser using CSS applied live to the text you type. Nothing is sent to a server.