The letter-spacing
CSS property sets the spacing behavior between text characters.
/* 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;
normal
0
, this keyword allows the user agent to alter the space between characters in order to justify text.<length>
normal | <length>
<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>
.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; }
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.
Specification | Status | Comment |
---|---|---|
CSS Text Module Level 3 The definition of 'letter-spacing' in that specification. | Working Draft | No change. |
CSS Transitions The definition of 'letter-spacing' in that specification. | Working Draft | Defines letter-spacing as animatable. |
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. |
Initial value | normal |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Media | visual |
Computed value | an optimum value consisting of either an absolute length or the keyword normal
|
Animation type | a length |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 1 | 4 | 3.5 | 1 |
SVG support | Yes | ? | No | ? | Yes | Yes |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | Yes | 4 | ? | ? | ? |
SVG support | ? | ? | ? | ? | ? | ? | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing