What is the CSS Letter Spacing Tool?
Preview letter-spacing values on your text and generate the right em-based value. Compare tracking at different font sizes with a live demo.
Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.
Using the CSS Letter Spacing Tool
Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.
Enter sample text
Type a heading, label, or body paragraph in the preview field. Real words show tracking issues that placeholder text hides.
Adjust the slider
Drag from -0.05em to 0.2em. Negative values tighten display text. Positive values open up labels and uppercase text.
Copy the CSS value
Click Copy to grab the letter-spacing value in em units, ready to paste into your stylesheet.
What the generated code looks like
Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.
/* Headings: slightly tight tracking */
h1, h2 { letter-spacing: -0.02em; }
/* Labels and UI caps: wide tracking */
.label, .caption {
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.75rem;
}
/* Body text: default (no change needed) */
p { letter-spacing: normal; } /* or 0 */Use em values so letter-spacing scales proportionally when font-size changes. px values become too tight or too loose at different sizes.
Pro tips for better results
Large headings benefit from negative tracking
At 32px and above, default letter-spacing can make words look spaced out. -0.02em to -0.04em tightens display headings without affecting readability.
Uppercase labels need wider tracking
All-caps text at small sizes is hard to read without extra spacing. 0.05em to 0.1em is typical for uppercase UI labels and captions.
Do not track body text
letter-spacing greater than 0.02em on body paragraphs disrupts the word-spacing rhythm readers expect. Leave body text at normal unless a specific typeface requires adjustment.
Use em, not px
letter-spacing: 0.05em scales with font-size changes. letter-spacing: 2px does not - it becomes too tight on large text and too wide on small text.
Frequently asked questions
From the blog
Read more →Modern CSS techniques every developer should know
A practical tour of the CSS features that replaced yesterday’s hacks.
From design to code without the friction
How visual generators speed up the build without sacrificing clean output.
Writing CSS that scales with your project
Tokens, naming, and structure that keep large stylesheets maintainable.