Letter Spacing and Kerning in CSS: Practical Tracking

Letter spacing can make a short heading feel deliberate or make an ordinary paragraph exhausting. The difference is rarely the size of the CSS rule alone. The typeface, capitalization, text size, and length of the passage determine whether extra spacing helps. Before adjusting it, distinguish the spacing designed into the font from the spacing you are adding on top.

Identify the spacing problem first

Set the text at its intended size and remove custom tracking. Check a whole sentence, not just an attractive brand name. If the problem is that the text feels cramped at a tiny size, first try a more suitable size or font. Tracking cannot restore details that are too small to distinguish.

Use the px-to-rem converter to confirm that your proof uses the same relative font sizes as the implementation. Then test letter spacing in em so the adjustment scales with the text. Tracking is relative to context: a value that works for a 14px uppercase label can be excessive in a paragraph.

Collect words with varied shapes, including pairs such as AV, To, and Wa. Add punctuation and numbers. You need to see both difficult pairs and ordinary text before deciding whether a global adjustment is justified.

Separate tracking from kerning

Kerning adjusts particular pairs of glyphs. Tracking applies a broader spacing adjustment across text. A font can have excellent kerning and still benefit from a small global adjustment in a large display setting. Conversely, loosening all letters will not precisely repair one awkward pair.

The MDN font-kerning documentation describes the browser control for using kerning information. In most projects, leave normal font behavior alone until you can identify a real defect. Disabling kerning to make text appear more mechanical can create visible gaps in prominent headings.

A wordmark may require individual letter treatment, but ordinary editable headings should not become a collection of separately positioned characters. That approach is difficult to maintain, may interfere with shaping, and fails when copy changes. Choose a typeface whose default spacing handles the majority of your content well.

Remember that font quality is part of spacing quality. If every specimen requires aggressive corrections, a different family may be more appropriate than increasingly complicated CSS.

Apply small, scalable adjustments

Use em for tracking when the adjustment should follow the font size. At 20px, 0.02em represents 0.4px of extra spacing; at 50px it represents 1px. Start with small changes and compare them side by side with the unmodified text.

.article-title {
font-kerning: normal;
letter-spacing: -0.015em;
}
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.06em;
}
.article-body {
letter-spacing: normal;
}

The values are trial settings, not a universal recipe. A display face may already contain tight spacing; negative tracking could make its letters collide. Likewise, some uppercase designs need little additional space. The MDN letter-spacing reference explains syntax and behavior in more detail.

Do not set a negative global value on the document root. That forces paragraphs, controls, captions, and unfamiliar scripts to inherit a display-oriented choice. Scope adjustments to specific text roles and reset them where those roles contain differently styled content.

Test capitals, small text, and paragraphs separately

Short uppercase labels often tolerate modest positive tracking because their repeated rectangular shapes can appear dense. However, widely spaced capitals become harder to read as strings grow longer. Test the longest actual navigation label, not just a three-letter abbreviation.

Large headings sometimes benefit from slightly tighter spacing because default text-oriented spacing can appear loose at display sizes. View them at the rendered size rather than zooming a screenshot. A pleasing compressed shape should not come at the cost of ambiguous letters or punctuation collisions.

For body copy, start from the font's defaults. If it feels congested, compare line height, measure, weight, and family before adding tracking. These variables often explain the problem better. You can review broader reading decisions in the typography category.

Test buttons and chips after any change. Extra letter spacing increases the width of a label and can force unexpected wrapping. Do not compensate by shrinking the label until it is uncomfortable to read. Reconsider padding, available space, or the spacing value itself.

Respect scripts and reader overrides

Avoid blanket tracking across languages. Scripts with joining behavior and complex shaping do not respond like Latin capitals. A visual treatment chosen for an English label should not automatically apply to Arabic, Devanagari, or a mixed-script product name. Ask fluent reviewers to inspect localized samples before shipping.

User styles may also increase spacing. The W3C text spacing guidance explains conditions under which content should remain usable when spacing is overridden. Its test values are not default design recommendations. The relevant lesson is to let text expand without being clipped or hidden.

Prepare a stress sample with long words, diacritics, numerals, and punctuation. Increase browser zoom and check whether letters remain distinct. Inspect the sample in more than one browser or operating system if your audience spans them; rasterization and font availability can change perceived spacing.

Document a narrow set of approved tracking roles, such as display title and short uppercase eyebrow. Keep the default for ordinary paragraphs unless testing supports a change. Add the specimens to the team's design reference area so a future font replacement triggers a spacing review rather than silently inheriting unsuitable adjustments.

One final check is to remove every custom spacing declaration temporarily. If the hierarchy becomes weaker but the text becomes easier to read, some values were doing too much. Restore only adjustments that solve a specific, reproducible problem. Subtle tracking works best when readers notice the clarity rather than the technique.

Key takeaways

• Diagnose size and font suitability before changing spacing.
• Keep pair kerning distinct from global tracking.
• Use small em-based adjustments on clearly scoped roles.
• Test the longest label and real multi-line headings.
• Preserve language shaping and tolerate reader spacing overrides.