letter-spacing
Definition
The letter-spacing property is used to adjust the space between characters in a text element. It applies to inline-level elements and the text within them. Increasing the value of letter-spacing increases the space between characters, while decreasing the value reduces the space between characters. This property affects all characters, including whitespace.
Examples
Setting letter-spacing to 1px:
p {
letter-spacing: 1px;
}
Setting letter-spacing to -2px:
h1 {
letter-spacing: -2px;
}
Setting letter-spacing to 0.5em:
span {
letter-spacing: 0.5em;
}
Values
| Value | Description |
|---|---|
normal | Default value. Specifies normal spacing between characters. |
<length> | Sets the space between characters to a specific length value (e.g. 1px). |
<percentage> | Sets the space between characters to a percentage value of the font size (e.g. 50%). |
inherit | Specifies that the letter spacing should be inherited from the parent element. |
unset | The letter spacing is set to its inherited value if any, otherwise it is set to the default value. |
Best Practices
- Use letter-spacing to adjust the space between characters in text elements.
- Use positive values to increase the space between characters and negative values to decrease it.
- Avoid using large values for letter-spacing as it can make text difficult to read.
- Use em or rem units for responsive typography.
- Test the readability of the text with different values of letter-spacing to find the optimal spacing.
Browser Compatibility
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |