Text
letter-spacing
letter-spacing adds space between characters. Negative values pull them closer together.
Syntax
normal | <length-percentage>Preview
Presets
Drag the bottom-right corner to resize
Code
.box {
letter-spacing: 0.2em;
}Controls
letter-spacing0.2em
About
Use em to scale with the text
A value in em, such as 0.1em, is relative to the font size, so the look stays balanced when font-size changes. In px, the gap stands out more on small text. The initial normal keeps the font’s own spacing.
The last letter gets space too
The space is added after each character, including the last one on the line. With text-align: center the text looks shifted to the left by that amount; add the same padding-left to balance it.
Tightening Japanese text
For Japanese headings, font-feature-settings: "palt", which uses the per-character spacing built into the font, often looks more natural than a uniform negative letter-spacing (with fonts that support it).