This property specifies the spacing behavior between individual letters in words of text. It is used to increase or decrease the default amount of space between the letters inside a word.
The letter-spacing property is listed as an animatable property in the CSS Transitions spec, which means that you can transition its value from one to another using CSS transitions or animations. The speed at which the transition occurs is specified by a CSS timing function.
Trivia & Notes
The letter-spacing property can be used to remove white space between inline-block elements inside an element by setting it to a value of -0.31em or 4px.
The letter-spacing property cascades, so you need to remember to reset the letter spacing value to normal on the inline-block elements if you don’t want them to inherit the same value as their container.
Official Syntax
- Syntax:
letter-spacing: word-spacing: normal | <length> | inherit
- Initial: normal
- Applies To: all elements
- Animatable: yes
Values
- normal
- The spacing is the normal spacing for the current font. This value allows the user agent to alter the space between characters in order to justify text.
- <length>
- This value indicates inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits. Browsers may not further increase or decrease the inter-character space in order to justify text.
- inherit
- The property takes the same specified value as the property for the element’s parent.
Examples
The following rule increases the space between the letters inside the <blockquote> element by 0.1em.
blockquote {
letter-spacing: 0.1em;
}
Live Demo
View this demo on the Codrops PlaygroundBrowser Support
The letter-spacing property is supported in Chrome, Firefox, Safari, Opera and IE4+, Android and iOS.
Notes
Details on mobile support is available in the mobile compatibility table on QuirksMode.
