CSS letter-spacing Property Tutorial

In this section, we will learn what the letter-spacing property is and how to use it in CSS.

Click here to run the example of letter-spacing property.

CSS Character Spacing: CSS letter-spacing Property Definition and Usage

Depending on the type of font and style of a text content, sometimes it’s a good idea to increase the space between letters of a text to help and increase the readability of that content.

Now, CSS provided a property named `letter-spacing` by which we can adjust the space between letters.

FYI: “Kerning” is the process of adjusting the spacing between characters in a correct and most suitable relationship to a font.

CSS letter-spacing Property Syntax

letter-spacing: normal|length|initial|inherit;

CSS letter-spacing Property Value

The value we set for this property can take every CSS supported units including px, em, rem etc. but it’s best to use “em” unit because by increasing and decreasing the font size, the space between letters will increase and decrease as well.

Note: this property, by default, inherits its value from its parent.

Example: letter-spacing in CSS

See the Pen letter-spacing in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.


Top Technologies