Open In App
Related Articles

How to set letter spacing using CSS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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>

                    

Output: 

Note: This property has some limitations-

  • This property can not use percent units.
  • This property can not be used with justify text.

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!


Last Updated : 06 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads
Complete Tutorials