CSS letter-spacing

This CSS property used to control the space between every letter inside an element or the block of text. It sets the spacing behavior between the characters of the text. Using this property, we can increase or decrease the space between the characters of the text.

It modifies the space between the adjacent characters.

Syntax

Possible values

normal: It is the default value that does not provide any space between the characters. It does not change the default spacing between the letters. It is similar to set the value to 0.

length: It is used to specify an additional space between the characters. It allows the negative values that tighten the text appearance instead of loosening it. The greater length implies the maximum space between the letters. This value supports the font-relative values (em, rem), absolute values (px).

Example

In this example, we are going to try different values of letter-spacing property in order to see the different results. We will also use the possible length values to see the spacing between the characters.

This example will illustrate the setting of space between the characters.

A large negative or positive value of letter-spacing will make the word unreadable. If we apply a very large positive value, it will cause the appearance of letters like a series of unconnected and individual letters. A very large negative value will overlap the letter to each other, which makes the word unrecognizable.