CSS letter-spacing Property
Description
The letter-spacing property controls the extra space inserted between characters (glyphs) in rendered text, effectively adjusting the text’s tracking. It operates uniformly across the selected text: whatever adjustment is applied is added to (or subtracted from) the advance widths of the glyphs, so the visual rhythm of letters changes without altering glyph shapes. This property participates in the cascade and is inherited by descendants, so a spacing change on a container will typically affect all contained text unless overridden on a child.
From a typographic and design perspective, small adjustments to letter-spacing are a powerful way to tune readability and tone. Increasing spacing can open up dense type in display headings or all-caps text, while decreasing it can tighten loose headlines or logos; however, overly wide or tight spacing harms legibility. These effects depend heavily on other font choices, so you should always test spacing in context with the chosen size and face — particularly with different values of font-size and font-family, because metrics and perceived spacing vary between typefaces and sizes.
On a technical/layout level, changing letter-spacing affects the inline box metrics: it changes the computed width of text runs, which in turn influences wrapping, overflow, and justification. It works alongside spacing-related properties rather than replacing them — for example, use it together with word-spacing when you need to balance inter-letter and inter-word gaps, and be aware of interactions with line-height since very tight or very loose letters can change perceived vertical density. Also note that typographic kerning performed by fonts is separate; if you need to control automatic kerning behavior explicitly, consider using font-kerning.
In practice, apply letter-spacing sparingly and test across devices and at multiple sizes. Small visual adjustments often suffice for headings, buttons, and branding, while body copy usually benefits from default spacing tuned by the font designer. Watch punctuation and letter collisions when reducing spacing, and remember that any change will ripple through line breaks, alignment, and measurement calculations, so verify layout after introducing spacing adjustments.
Definition
- Initial value
- normal
- Applies to
- All elements
- Inherited
- Yes
- Computed value
- An absolute length
- Animatable
- Yes
- JavaScript syntax
- object.style.letterSpacing
Interactive Demo
Syntax
letter-spacing: normal | <length>
Values
- normalNo additional spacing is applied.
- <length>Specifies additional spacing between characters. Values may be negative, but there may be implementation-dependent limits.
- inherit
Example
Browser Support
The following information will show you the current browser support for the CSS letter-spacing property. Hover over a browser icon to see the version that first introduced support for this CSS property.
This property is supported by all modern browsers.
Desktop
Tablets & Mobile
Last updated by CSSPortal on: 1st January 2026
