The letter-spacing
CSS property sets the horizontal spacing behavior between text characters. This value is added to the natural spacing between characters while rendering the text. Positive values of letter-spacing
causes characters to spread farther apart, while negative values of letter-spacing
bring characters closer together.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Syntax
/* Keyword value */ letter-spacing: normal; /* <length> values */ letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: .3px; /* Global values */ letter-spacing: inherit; letter-spacing: initial; letter-spacing: unset;
Values
normal
- The normal letter spacing for the current font. Unlike a value of
0
, this keyword allows the user agent to alter the space between characters in order to justify text. <length>
- Specifies extra inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.
Accessibility concerns
A large positive or negative letter-spacing
value will make the word(s) the styling is applied to unreadable. For text styled with a very large positive value, the letters will be so far apart that the word(s) will appear like a series of individual, unconnected letters. For text styled with a very large negative value, the letters will overlap each other to the point where the word(s) may be unrecognizable.
Legible letter-spacing must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility.
- MDN Understanding WCAG, Guideline 1.4 explanations
- Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0
Formal definition
Initial value | normal |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Computed value | an optimum value consisting of either an absolute length or the keyword normal |
Animation type | a length |
Formal syntax
normal | <length>
Examples
Setting letter spacing
HTML
<p class="normal">letter spacing</p> <p class="em-wide">letter spacing</p> <p class="em-wider">letter spacing</p> <p class="em-tight">letter spacing</p> <p class="px-wide">letter spacing</p>
CSS
.normal { letter-spacing: normal; } .em-wide { letter-spacing: 0.4em; } .em-wider { letter-spacing: 1em; } .em-tight { letter-spacing: -0.05em; } .px-wide { letter-spacing: 6px; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Text Module Level 3 The definition of 'letter-spacing' in that specification. |
Working Draft | No change. |
CSS Level 2 (Revision 1) The definition of 'letter-spacing' in that specification. |
Recommendation | No change. |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'letter-spacing' in that specification. |
Recommendation | Initial SVG definition. |
CSS Level 1 The definition of 'letter-spacing' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
letter-spacing | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 4 | Opera Full support 3.5 | Safari Full support 1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
SVG support | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 72 | IE Full support 9 | Opera Full support 7 | Safari Full support 5.1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android No support No | Opera Android Full support 10.1 | Safari iOS Full support 5.1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
- No support
- No support