How to Adjust Line Spacing & Letter Spacing in CSS ?
Last Updated :
22 Mar, 2024
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:
Line-Height property
Line spacing can be adjusted using the line height property in CSS. Line height helps us to add spaces of a certain length between lines in addition to the default space provided by the browser.
Syntax:
line-height: normal| number| length| percentage| initial| inherit;
- Normal: This is the default line spacing, making text look balanced and easy to read.
- Initial: It sets the line height back to its default value.
- Number: You can set the line height using a number multiplied by the font size. This method helps avoid unexpected changes in spacing.
- Length: With this, you directly specify a fixed spacing between lines.
- Percentage: It sets the line height as a percentage of the current font size. This allows for relative adjustments based on the text size.
Example: To demonstrate adjusting the line spacing using line height property in CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Line Height Properties</title>
<style>
.container {
color: white;
margin-bottom: 4px;
background-color: #28ad43;
border: 1px solid black;
font-size: 23px;
}
.normal {
line-height: normal;
}
.initial {
line-height: initial;
}
.num {
line-height: 1.5;
/* 1.5 times the font size */
}
.length {
line-height: 34px;
/* Fixed spacing between lines */
}
.percentage {
line-height: 250%;
/* 250% of the font size */
}
</style>
</head>
<body>
<div class="container">
<p>Normal (Default)</p>
<p class="normal">This is the default line spacing,
making text look balanced and easy to read.</p>
</div>
<div class="container">
<p>Initial</p>
<p class="initial">
It sets the line height back to its default value.
</p>
</div>
<div class="container">
<p>Number(1.5)</p>
<p class="num">
You can set the line height using a number
multiplied by the font size.
This method helps avoid
unexpected changes in spacing.
</p>
</div>
<div class="container">
<p>Length(34px)</p>
<p class="length">
With this, you directly specify a fixed
spacing between lines.
</p>
</div>
<div class="container">
<p>Percentage(250%)</p>
<p class="percentage">
It sets the line height as a percentage of
the current font size.
This allows for relative
adjustments based on the text size.
</p>
</div>
</body>
</html>
Output:
line-height 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.
HTML
<!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">GeeksforGeeks</div>
<div class="example">GeeksforGeeks</div>
<div class="example_em">GeeksforGeeks</div>
<div class="example_rem">GeeksforGeeks</div>
</body>
</html>
Output:
letter-spacing property.
Share your thoughts in the comments
Please Login to comment...