[Edit]

CSS - set letter spacing

1 contributors

2 contributions

0 discussions

0 points

Created by:

Aleena

694

In this article, we would like to show you how to set letter spacing using CSS.

Quick solution:

xxxxxxxxxx
 
.spacing-1 {
    letter-spacing: normal; /* default value */
}
​
.spacing-2 {
    letter-spacing: 0.1rem; /* using relative length units */
}
​
.spacing-3 {
    letter-spacing: 5px; /* using pixels */
}

Practical example

Edit

In this example, we present how to set letter spacing for the text inside our element using three different values: keyword value, relative length value and pixels.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
​
    .spacing-1 {
        letter-spacing: normal; /* using keyword value (default value) */
    }
​
    .spacing-2 {
        letter-spacing: 0.1rem; /* using relative length units */
    }
​
    .spacing-3 {
        letter-spacing: 5px; /* using pixels */
    }
​
  </style>
</head>
<body>
  <div class="spacing-1">Letter spacing normal</div>
  <div class="spacing-2">Letter spacing 0.1rem</div>
  <div class="spacing-3">Letter spacing 5px</div>
</body>
</html>