CSS Letter Spacing Previewer
Preview letter-spacing values for display and interface text.
Tune letter-spacing by eye
Letter-spacing (tracking) has a big effect on how text reads — a touch of extra spacing lifts small uppercase labels, while too much hurts body text. This previewer applies letter-spacing values to real text so you can judge the effect directly.
Because good tracking is a matter of feel, comparing values against actual copy beats picking a number blind. Adjust the spacing for display headings, buttons, or labels until it looks balanced, then copy the letter-spacing value.
Tracking, previewed
Small uppercase labels benefit from a little positive tracking, while body text usually does not — the live preview makes the call obvious. Runs in your browser.
Frequently asked questions
Should letter-spacing be in em or px?
em. It scales with the font size, so 0.08em stays proportional if the heading size changes at different breakpoints.
What tracking suits headings versus labels?
Large headings often look better slightly tight (−0.01em to −0.03em). Small uppercase labels usually need extra space, around 0.05em to 0.1em, to stay legible.
Does letter-spacing affect accessibility?
WCAG 1.4.12 requires layouts to survive users increasing letter spacing to 0.12em, so avoid fixed-width containers that clip text when spacing grows.
Related tools
Practical utilities for front-end design and implementation work.