EN
CSS - set letter spacing
0
points
In this article, we would like to show you how to set letter spacing using CSS.
Quick solution:
.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
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.
// ONLINE-RUNNER:browser;
<!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>