line-height property.Letter Spacing property
The amount of space between characters in text is referred to as letter spacing in CSS. It gives you control over the amount of space that separates letters within words or text blocks on a webpage. You can alter the text’s appearance to make it appear more compact or more spread out by varying the letter spacing.
To adjust letter spacing in CSS, you can use the ‘letter-spacing‘ property.
Syntax:
letter-spacing: normal| length| initial| inherit;
Usually to adjust the letter spacing we use the ‘length’ property value. It can also have a negative value. A positive value of letter-spacing will cause the text to spread out and negative value will cause the characters in a text to overlap.
Example: To demonstrate adjusting the letter spacing using the letter spacing property in CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Letter Spacing Example</title>
<style>
body {
font-size: 50px;
font-weight: 600;
text-align: center;
}
.example-neg {
letter-spacing: -5px;
color: green;
}
.example {
letter-spacing: 4px;
color: green;
}
.example_em {
letter-spacing: 0.5em;
color: green;
}
.example_rem {
letter-spacing: 2rem;
color: green;
}
</style>
</head>
<body>
<div class="example-neg">w3wiki</div>
<div class="example">w3wiki</div>
<div class="example_em">w3wiki</div>
<div class="example_rem">w3wiki</div>
</body>
</html>
Output:
letter-spacing property.
How to Adjust Line Spacing & Letter Spacing in CSS ?
Line spacing and letter spacing are two significant factors in improving a website’s readability. They can be utilized to make stunning and intuitive web pages.
Below are the approaches to adjust line spacing and letter spacing in CSS:
Table of Content
- Line-Height property
- Letter Spacing property