CSS - letter-spacing
The letter-spacing CSS property specifies spacing behavior between text characters.
Examples
HTML Content
HTML
Copy Code
<p class="first-example"> letter spacing </p> <p class="second-example"> letter spacing </p> <p class="third-example"> letter spacing </p> <p class="fourth-example"> letter spacing </p>
CSS Content
CSS
Copy Code
.first-example { letter-spacing: 0.4em; } .second-example { letter-spacing: 1em; } .third-example { letter-spacing: -0.05em; } .fourth-example { letter-spacing: 6px; }
Syntax
CSS
Copy Code
/* <length> values */ letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: .3px; /* Keyword values */ letter-spacing: normal; /* Global values */ letter-spacing: inherit; letter-spacing: initial; letter-spacing: unset;
Values
normal- The spacing is the normal spacing for the current font. Unlike a value of 0, this value allows the user agent to alter the space between characters in order to justify text.
<length>- Indicates 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.
See<length>values for possible units.
Formal syntax
CSS
Copy Code
normal <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a>
Description
The letter-spacing CSS property specifies spacing behavior between text characters.
| 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 |
| Animatable | yes, as a length |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser Compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| HTML support | 1.0 | 1.0 (1.7 or earlier) | 4.0 | 3.5 | 1.0 (85) |
| SVG support | (Yes) | No support (bug 371787) | ? | (Yes) | (Yes) |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| HTML support | ? | ? | ? | ? | ? |
| SVG support | ? | ? | ? | ? | ? |
See Also
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Text 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 |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/letter-spacing