What is letter-spacing?
Letter-spacing, also called tracking, is the adjustment of the space between characters in text. The CSS letter-spacing property adds to or subtracts from a font’s natural spacing, in units such as em or px: positive values spread letters apart, negative values pull them together. Designers use it to tune legibility in headings and all-caps text.
More About letter-spacing
You might use letter-spacing to make a title stand out or fit more text into a limited space.
Negative values create tight text: h1 { letter-spacing: -0.5px; } pulls the characters of a large headline closer together. Positive values create loose text with more breathing room: letter-spacing: 0.3em; opens up an all-caps label. Values in em scale with the font size, while px values stay fixed, so em is usually the safer choice for text that changes size across screens.
Letter-spacing (tracking) vs. kerning
Letter-spacing and kerning both affect the space between characters, but they work at different levels:
- Letter-spacing (tracking) applies one uniform amount of space across a whole run of text.
- Kerning adjusts the gap between one specific pair of letters, such as the ‘A’ and ‘V’ in ‘AVENUE’, and is built into the font by its designer.
- CSS letter-spacing is added on top of whatever kerning the font already applies, so the two work together rather than replacing each other.
Values the letter-spacing property accepts
To adjust letter-spacing in HTML, you use the CSS property ‘letter-spacing’. It takes the keyword normal or a length or percentage value, such as 0.3em, 3px, -0.5px, or 50%, and negative values are allowed. Percentages are measured against the width of the font’s space character. Browser support is not a worry: MDN’s reference lists the property as widely available across browsers since July 2015.
normal is not the same as 0. With normal, the browser may adjust the space between characters when it justifies text; with 0 or any other fixed value, it keeps your spacing exactly as set.
Two companion properties cover the other directions: ‘word-spacing’ adjusts the gap between words, and ‘line-height’ adjusts the spacing between lines of text.
Where letter-spacing goes wrong
Extreme values are the fastest way to hurt readability. Very large positive values turn a word into a row of unconnected letters, and very large negative values make letters overlap until words are unrecognizable. Because character widths differ between font families, no single value keeps every font legible.
Web accessibility guidance approaches spacing from the reader’s side. WCAG Success Criterion 1.4.12 (Text Spacing) requires that no content or functionality is lost when a user overrides letter spacing to at least 0.12 times the font size. It doesn’t prescribe one ideal value for you to set; it tests that your layout tolerates user-set spacing without clipped, overlapping, or hidden text.
Two less obvious failure modes: any non-zero letter-spacing stops browsers from applying optional ligatures (the ‘liga’ and ‘clig’ OpenType features), which changes how some fonts render unless you re-enable them with font-feature-settings. And connected scripts such as Arabic expect letters to stay visually joined, so letter-spacing should not be applied to them at all. For the wider work of keeping text readable for everyone, see our guide to designing an accessible website.
A good default: leave body text at normal and reserve tracking adjustments for headings, all-caps labels, and very small text. To see where letter-spacing fits into the wider craft of setting type, start with our typography entry.
Frequently Asked Questions
What is the ideal letter spacing?
No single value works for every font: character widths differ between families, so a setting that looks right in one font can look loose or cramped in another. Test your exact font at real sizes; as a starting point, all-caps text usually benefits from slight extra spacing.
How do I change letter-spacing in WordPress?
Select the block, open Typography in the block settings sidebar, and set Letter spacing; if it’s hidden, click the Typography options three-dot menu to reveal it. Settings differ from block to block, and you can switch units between px, %, em, rem, vw, and vh.
How do I add letter-spacing in HTML?
Letter-spacing is a CSS property, so you apply it through CSS. For a quick one-off tweak, use the style attribute inline (style="letter-spacing: 1px;"). For consistent spacing across your site, put the rule in a stylesheet instead, which is what MDN recommends.
