This CSS attribute is employed to manage the distance between each letter within an element or a text block. It defines the spacing arrangement among the characters within the text. By utilizing this attribute, we have the ability to expand or reduce the gap between the characters of the text.
It alters the spacing between neighboring characters.
Syntax
letter-spacing: normal | length | initial | inherit;
Possible values
It represents the standard value that maintains no spacing between characters and retains the default letter spacing. This is akin to setting the value to zero.
The length attribute is employed to define an extra gap between characters. It permits negative values to compress the text rather than expand it. A higher length indicates a wider space between the characters. This attribute accommodates font-relative units such as em and rem, as well as absolute units like pixels (px).
Example
In this instance, we will experiment with various settings of the letter-spacing property to observe the diverse outcomes. Additionally, we will utilize various length values to analyze the spacing between individual characters.
This illustration will demonstrate how to adjust the spacing between characters.
<!DOCTYPE html>
<html>
<head>
<title>CSS letter-spacing Property</title>
</head>
<body style = "text-align: center;">
<h1 style = "color: blue;">
Welcome to the C# Tutorial
</h1>
<h2>
This is an example of CSS letter-spacing Property
</h2>
<p style= "letter-spacing: normal;">
This paragraph has letter-spacing: normal;
</p>
<p style= "letter-spacing: 7px;">
This paragraph has letter-spacing: 7px;
</p>
<p style= "letter-spacing: 0.7em;">
This paragraph has letter-spacing: 0.7em;
</p>
<p style= "letter-spacing: -1px;">
This paragraph has letter-spacing: -1px;
</p>
</body>
</html>
A significant negative or positive adjustment in letter-spacing can render the text illegible. When a considerably high positive value is applied, the letters may seem disjointed and disconnected. Conversely, an extremely negative value will result in letters overlapping each other, leading to the word becoming unidentifiable.