Use the free Letter Spacing Tester below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
Tracking and Leading: The Two Spacings That Shape Text
Two spacing controls shape how text feels more than any font choice. Tracking, the CSS letter-spacing property, is the space between letters. Leading, the line-height property, is the space between lines. Small changes to either can turn cramped text into elegant text, or turn a strong heading into a scattered mess. The tool above lets you drag both sliders over live sample text and copy the CSS when it looks right.
Start with the sample as it is, then move one slider at a time. Changing both at once makes it hard to tell which change helped. Watch the whole block, not a single word: good spacing shows in the texture of the paragraph, in whether the eye moves smoothly or stumbles.
Tracking: When to Add Air, When to Tighten
Uppercase headings almost always benefit from extra tracking. Capital letters are wide and uniform, so a little air between them, roughly 0.05em to 0.2em, makes them read as a designed label rather than a shout. This is why luxury brands, wedding invitations and award certificates all use widely tracked capitals.
Body text is the opposite. Normal sentence text needs almost no tracking, and anything above about 0.02em starts to break words apart. Tightening, or negative tracking, can help very large display type feel bold and modern, but it quickly harms readability at small sizes, where letters collide. As a rule: track headings, leave body text alone, and tighten only large display words.
Leading: The Space Between Lines
Leading controls how easily the eye finds the next line. For body text, 1.5 to 1.7 times the font size is the comfortable zone for most fonts. Below 1.4, lines feel crowded, especially in fonts with long descenders. Above 1.8, the paragraph loosens and loses its sense of a single block.
Headings can take tighter leading, around 1.1 to 1.3, because they run to only one or two lines and the tightness makes them feel solid. Multi-line headings are the exception: if a heading wraps to three lines, loosen it slightly so the lines do not collide. The tool lets you test both cases by typing your own heading into the sample box.
How Tracking and Leading Work Together
The two spacings interact. Wide tracking makes each line longer, which can push words onto extra lines, which then need a touch more leading to stay comfortable. Tight tracking shortens lines and can tolerate slightly tighter leading. When you change one, re-check the other rather than treating either as finished in isolation.
Font choice changes the balance too. Narrow fonts tolerate wider tracking; wide fonts need less. Fonts with tall ascenders need more leading. There is no universal perfect pair, which is why a live tester beats a table of recommended values: your font, your size and your text decide the answer.
Practical Settings to Start From
For a section heading in capitals, try 24 pixels, 0.08em tracking and 1.2 leading. For body text, try 18 pixels, zero tracking and 1.6 leading. For a hero headline, try 44 pixels, negative 0.01em tracking and 1.1 leading. Use these as starting points, test them in the tool with your real words, and adjust until the block reads smoothly at a glance. Copy the CSS and use the same pair everywhere that element appears, so your site stays consistent.
Finally, test spacing in context, not in isolation. A pair that looks perfect on a blank preview can feel different inside a real layout, beside images and other headings. Paste the CSS into a draft page, read it as a visitor would, and adjust once more if the texture feels off. Good spacing is judged by reading, not by measuring.
Pingback: Modular Type Scale Calculator - Perfect Heading Sizes