CSS letter-spacing Property

The letter-spacing property in CSS is used to adjust the space between characters in a block of text. It helps to control the spacing, allowing you to increase or decrease the space for better readability or to create a specific visual effect. This property is especially useful when fine-tuning the appearance of headings or paragraphs.

Syntax

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

Property Values

Property	Description	Example
`letter-spacing`	Adjusts the space between characters in text.	`letter-spacing: 2px;`
`normal`	Applies the default letter spacing for the current font (no extra space between characters).	`letter-spacing: normal;`
`length`	Adds or subtracts space between characters using a specified length (positive or negative).	`letter-spacing: 1em;`
`initial`	Resets the property to its default value (normal).	`letter-spacing: initial;`
`inherit`	Inherits the `letter-spacing` value from the parent element.	`letter-spacing: inherit;`
Positive value	Increases the space between characters.	`letter-spacing: 3px;`
Negative value	Decreases the space between characters, pulling them closer together.	`letter-spacing: -1px;`

CSS letter-spacing Property Examples

Here are some examples of the CSS letter-spacing property:

Example 1: Using letter-spacing with normal value

In this example, we apply the letter-spacing: normal; property to a paragraph, which means the text will use the default character spacing for the font. No additional space is added between characters. The page also features centered text with a green heading.

html

<!DOCTYPE html>
<html>

<head>
    <title>CSS letter-spacing Property</title>
    <style>
        p {
            letter-spacing: normal;
        }
    </style>
</head>

<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <h2>
        CSS letter-spacing Property
    </h2>

    <p>
        This paragraph has letter-spacing: normal;
    </p>
</body>

</html>

Output: letterspacing

Example 2: Spreading out the text

In this example, we apply the letter-spacing: 5px; property to the paragraph, which increases the space between characters by 5 pixels. The text will appear more spaced out, creating a wider gap between each character in the paragraph. The text is also centered, with a green heading.

html

<!DOCTYPE html>
<html>

<head>
    <title>CSS letter-spacing Property</title>
    <style>
        p {
            letter-spacing: 5px;

        }
    </style>
</head>

<body style="text-align: center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>

    <h2>
        CSS letter-spacing Property
    </h2>

    <p>
        This paragraph has letter-spacing: 5px;
    </p>
</body>

</html>

Output:

letterspacing

Supported Browsers

The browser supported by letter-spacing property are listed below:

Google Chrome (5.0 versions+)
Edge (12 versions+)
Mozilla (4.0 versions+)
Safari (5.0 versions+)
Opera (11.1 versions+)