Skip to content
Related Articles

Related Articles

Improve Article
How to set letter spacing using CSS ?
  • Difficulty Level : Medium
  • Last Updated : 31 Mar, 2021

In this article, we will see how to set letter-spacing using CSS.

Approach: The letter-spacing CSS property is iused 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: 

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.



My Personal Notes arrow_drop_up
Recommended Articles
Page :