How to Adjust Line Spacing & Letter Spacing in CSS ?
Last Updated :
18 Jun, 2024
Adjusting line spacing and letter spacing in CSS enhances readability and aesthetics of text on web pages. Line spacing, controlled by line-height, sets space between text lines, while letter spacing, controlled by letter-spacing, adjusts space between characters, ensuring a visually balanced layout.
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. This property adds 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: In this example we demonstrates various line-height settings (normal, initial, number, length, percentage) applied to paragraphs within containers, showcasing different spacing behaviors relative to text size.
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.Letter Spacing property
Letter spacing refers to the amount of space between characters in text. It gives you control over the spacing within words or text blocks on a webpage, allowing you to create a more compact or spread-out appearance.
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: In this example we demonstrates letter-spacing adjustments (-5px, 4px, 0.5em, 2rem) applied to text in different units and colors, centered with a large font size.
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.
Similar Reads
How to set letter spacing using CSS ?
The CSS letter-spacing property controls the space between characters in text, which helps improve both readability and makes the text more visually appealing. By adjusting the space between characters, you control the text's appearance.This property accepts values in units such as pixels, em, or re
2 min read
How to Change Line Spacing in CSS?
The line-height property in CSS is used to adjust line spacing between lines of text.Syntaxline-height: value;Example 1: In this example, we will increase the line height using the CSS line-height property.HTML<h3>Paragraph with Default Line Spacing</h3> <p> HTML stands for HyperTe
2 min read
How to set font-size-adjust property in CSS ?
The purpose of this article is to set the font-size-adjust property using CSS. Approach: The font-size-adjust property sets the size of lower-case letters relative to the current font size of the upper-case letters. The size difference between the uppercase letters and the lowercase letters is known
2 min read
Tailwind CSS Letter Spacing
This class accepts lots of value in tailwind CSS in which all the properties are covered as in class form. It is the alternative to the CSS letter-spacing property. This class is used to set the spacing behavior between text characters i.e, increasing or decreasing the space between characters in a
2 min read
Interesting Facts About CSS Text Styling
CSS text styling provides a wide range of options to enhance and customize the text in your layouts. Let’s explore some interesting facts and tricks to improve your text styling skills.1. Use text-shadow for Subtle EffectsThe text-shadow property is often underused but can add a nice depth to the te
3 min read
How to fix browser-specific styling issues in CSS ?
In this article, we will learn how to approach fixing browser-specific styling issues. You can approach the problem by inspecting the page and when you find a bug or an area that you want to change or modify the inspect tool will ease your work by finding the location of the element and the dimensio
3 min read
Bootstrap Spacing Margin and padding
Bootstrap Spacing Margin and Padding refer to predefined utility classes provided by Bootstrap for managing the spacing around elements. Margin classes control the space outside the element's border, while padding classes control the space inside the border. These classes help in easily adding consi
2 min read
How to create Underline Input Text Field using CSS ?
Input Text Field can be underlined by implementing different approaches to applying a bottom border to an input text field, using various methods such as HTML and CSS. Styling input text fields is a crucial aspect of web development, and adding a bottom border is a common way to enhance the visual a
2 min read
How to prevent line breaks in the list of items using CSS?
The display:inline-block property is used to show an element in the inline-level block container. It converts the block of elements into an inline element. Use height and width property to set an inline element. The display property is used to prevent a line break of a list of items. Syntax: element
1 min read
How to Add Padding to All Sides in Tailwind CSS ?
Tailwind CSS is a utility-first CSS framework that provides a vast array of classes to design your website directly in your markup. It emphasizes speed, efficiency, and reduces the time you spend styling in CSS files. One of the most common styling tasks in web development is adding padding to eleme
3 min read