Open In App

CSS letter-spacing Property

Last Updated : 14 Oct, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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

PropertyDescriptionExample
letter-spacingAdjusts the space between characters in text.letter-spacing: 2px;
normalApplies the default letter spacing for the current font (no extra space between characters).letter-spacing: normal;
lengthAdds or subtracts space between characters using a specified length (positive or negative).letter-spacing: 1em;
initialResets the property to its default value (normal).letter-spacing: initial;
inheritInherits the letter-spacing value from the parent element.letter-spacing: inherit;
Positive valueIncreases the space between characters.letter-spacing: 3px;
Negative valueDecreases 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:


Similar Reads