How to set letter spacing using CSS ?

Last Updated : 06 Jun, 2023

In this article, we will see how to set letter spacing using CSS. We can define letter spacing as the amount of space between adjacent characters. The default letter-spacing can’t change this means it is equivalent to a 0 value.

Approach: The letter-spacing CSS property is used to set the horizontal spacing behavior between the text characters. This value is added to the natural spacing between characters while rendering the text. Positive values help expand the text while negative values help contract the text.

Syntax:

/* Keyword value */
letter-spacing: normal;

/* <length> values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;

/* Global values */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .div1 {
            letter-spacing: .2rem;
        }
        .div2 {
            letter-spacing: 1px;
        }
        .div3 {
            letter-spacing: normal;
        }
        .div4 {
            letter-spacing: -1px;
        }
    </style>
</head>
 
<body>
    <div class="div1">
        GeeksforGeeks (letter-spacing: .2rem)
    </div>
    <div class="div2">
        GeeksforGeeks (letter-spacing: 1px)
    </div>
    <div class="div3">
        GeeksforGeeks (letter-spacing: normal)
    </div>
    <div class="div4">
        GeeksforGeeks (letter-spacing: -1px)
    </div>
</body>
 
</html>