1. css
  2. /properties
  3. /letter-spacing

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

ValueDescription
normalDefault 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%).
inheritSpecifies that the letter spacing should be inherited from the parent element.
unsetThe 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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes