How to set letter spacing using CSS ?
Last Updated :
29 Oct, 2024
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 rem, giving you fine control over how text is displayed.
Key Points of the letter-spacing Property
This property accepts values in units such as pixels (px), ems (em), or root ems (rem), giving you precise control over the spacing between characters to achieve a tailored text appearance. Here’s how it works:
- Positive Values: Increase the space between characters, creating an expanded look that can improve readability, especially for headings and titles.
- Negative Values: Reduce the space between characters, which can be useful for compact designs or stylized text
Using letter-spacing property
The letter-spacing CSS property is used to set the horizontal spacing behavior between the text characters. This value is added to the natural spacing between characters while rendering the text. Positive values help expand the text while negative values help contract the text.
Syntax:
/* Keyword value */
letter-spacing: normal;
/* <length> values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;
/* Global values */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;
Example: In this example demonstrating different letter-spacing values applied to div elements: .div1 (.2rem), .div2 (1px), .div3 (normal), and .div4 (-1px).
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
letter-spacing: 0.2rem;
}
.div2 {
letter-spacing: 1px;
}
.div3 {
letter-spacing: normal;
}
.div4 {
letter-spacing: -1px;
}
</style>
</head>
<body>
<div class="div1">GeeksforGeeks (letter-spacing: .2rem)</div>
<div class="div2">GeeksforGeeks (letter-spacing: 1px)</div>
<div class="div3">GeeksforGeeks (letter-spacing: normal)</div>
<div class="div4">GeeksforGeeks (letter-spacing: -1px)</div>
</body>
</html>
Output:
Limitations of the letter-spacing Property
The letter-spacing property works well for adjusting character spacing, but it has a few limitations:
- It cannot use percentage units.
- It doesn't work well with justified text, as it can create uneven spacing.
- Different browsers may show the spacing slightly differently.
While letter-spacing is helpful, keeping these limitations in mind will help you use it effectively for a more consistent design.
Similar Reads
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
How to Adjust Line Spacing & Letter Spacing in CSS ? 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
3 min read
How to set Line Height in Percent using CSS? The line-height property in CSS is used to set the line height in percentage by using the line-height: percent; property. This percentage is calculated based on the element's font size, allowing for flexible spacing between lines of text relative to their size.Syntaxline-height: percent;Example 1: D
2 min read
How to Insert Spaces/Tabs in Text using HTML and CSS? When building web pages, controlling the spacing between elements and text is essential for creating visually appealing and well-structured content. HTML and CSS offer several ways to insert spaces and tabs in text. While HTML provides basic methods for adding spaces, CSS gives more control over lay
4 min read
How to Insert Spaces/Tabs in Text using HTML and CSS? When building web pages, controlling the spacing between elements and text is essential for creating visually appealing and well-structured content. HTML and CSS offer several ways to insert spaces and tabs in text. While HTML provides basic methods for adding spaces, CSS gives more control over lay
4 min read
How to Insert Spaces/Tabs in Text using HTML and CSS? When building web pages, controlling the spacing between elements and text is essential for creating visually appealing and well-structured content. HTML and CSS offer several ways to insert spaces and tabs in text. While HTML provides basic methods for adding spaces, CSS gives more control over lay
4 min read