2 demos of Understanding CSS letter and word spacing

The letter-spacing property

The letter-spacing property is used to increase or decrease the space between the letters in the specified text. The default value of letter-spacing CSS property is normal.

The negative value will decrease the spacing between letters whereas positive value will increase it.

A demo of CSS letter-spacing property

The example below uses the letter-spacing property in two elements. One is the heading 1 (h1) where a positive value is given to increase the spacing between letters.

The other is a paragraph, where a negative value is given to decrease the spacing between letters in the letter-spacing property.

CSS letter spacing property

Experience this example online

CSS word-spacing property

The word-spacing property is used to specify the space between words in the specified text.

As in the case of letter-spacing, the negative value will decrease the spacing between words while a positive value will increase the white spacing between words as using the word-spacing CSS property.

A demo of using word-spacing property

The following example is almost like the above example, except we will use the spacing between the words. The example uses the word-spacing in two elements.

One is the heading, using a positive value to increase the spacing between the words. While the paragraph is using a negative value to decrease the spacing between the words in the word-spacing property.

See the output by clicking the link below:

CSS word spacing property

Experience this example online


Read more: CSS vertical-align property