Introduction to CSS Letter Spacing
Letter spacing in CSS is defined as the quantity of space that should be specified between the letters in the elements or block of characters. This property is used in increasing or decreasing the space between the letters of the set of characters or text. It takes values like normal, length, initial, and inherit. This property has positive or negative value letter-spacing which also helps in the styling of the elements in any layout that contains text or block of texts. So if the values are positive then they are clear whereas if they are negative then they are not clear.
How does the Letter Spacing property work in CSS?
Letter-spacing of CSS property is usually used to give better styling of the character’s space between them. This property also includes values like font-relative values (em), parent-relative values (percentage), absolute values (px), and normal or length or initial or inherit property.
- This property is used for identifying the clear font size which determines on a case-by-case basis as different font families have different character width. There is no single value that has a fixed font family where this property does it automatically. We should also note that the value is once given as default value to the letter-spacing property then it does not change but instead, it adds the present value to the default value according to the browser font metrics.
- In this property, there are also subpixel values provided by this property where values less than 1px will give the output where there is no letter-spacing. So it’s the better practice of using this letter-spacing property in lower case letters.
Syntax #1
letter-spacing: normal | length | initial | inherit
- normal: this means the letter spacing is normal where no extra spaces are provided and this value is the default value.
- length: in this, it specifies some extra spaces where we can also specify negative values in this.
- initial: as the name suggests it uses the value specified at the beginning or it will take the default value.
- inherit: This value inherits the value from its parent element.
Syntax #2
letter-spacing: em | px
- em: This specifies the relative font size.
- px: it specifies the pixel values.
Example to Implement CSS Letter Spacing
Let us see an example of the letter-spacing property as normal.
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<title>Educba Training</title>
</head>
<body>
<h1>
CSS Letter-spacing property
</h1>
<p style = "letter-spacing: normal;">
This paragraph has letter-spacing: normal;
</p>
</body>
</html>
Output:
Explanation: In the above program, we can see that we have set the paragraph text to have normal value for space between the letters. In many cases, letter-spacing value with normal value is the default value. This value gives the normal spacing between the letters and is easily readable.
Example #2
Now let us see an example of pixel values that can be specified for the letter-spacing property for the set of characters.
Syntax:
Letter-spacing: value in pixels in px;
Code:
<!DOCTYPE html>
<html>
<head>
<title>Educba Training</title>
</head>
<body>
<h1>
CSS Letter-spacing property
</h1>
<p style = "letter-spacing: 5px;">
This paragraph has letter-spacing: positve pixel values;
</p>
<p style = "letter-spacing: 8.87px;">
This paragraph has letter-spacing: decimal values;
</p>
<p style = "letter-spacing: -1.5px;">
This paragraph has letter-spacing: negative pixel values;
</p>
</body>
</html>
Output:
Explanation: In the above program, we have seen that we are specifying the letter-spacing value using pixel values. In the above example, we have specified the values of letter-spacing property in positive or negative pixel values where positive values are clear than negative pixel values. In the above example, we can see that the last statement specifies “-1.5px” where it displays the sentence which is not clear at all.
Example #3
Now let us see other font-relative value for the letter-spacing property such as “em” which usually allows the spacing which is relative to the font size. So we can see the below example that uses em.
Syntax:
letter-spacing: em;
Code:
<!DOCTYPE html>
<html>
<head>
<title>Educba Training</title>
</head>
<body>
<h1>
CSS Letter-spacing property
</h1>
<p style = "letter-spacing: 2em;">
This paragraph has letter-spacing: positve pixel values;
</p>
<p style = "letter-spacing: 0.87em;">
This paragraph has letter-spacing: decimal values;
</p>
<p style = "letter-spacing: -0.1em;">
This paragraph has letter-spacing: negative pixel values;
</p>
</body>
</html>
Output:
Explanation: In the above example, we have specified the letter-spacing value in em which can be positive or negative values where positive values can again give the clear spacing between the letters whereas negative values are not clear which means they become less readable. In the above example, we can see the last statement is specified with negative value as “-0.1em” which is not clear or not readable to the users. If we have positive values such as “2em” gives the spacing as displayed in the above output.
This letter-spacing property is not supported by many browsers such as firefox for android where other browsers like firefox, chrome, internet explorer, etc.
Conclusion
In this article, we conclude that the letter-spacing is the property of CSS which will provide the spacing style for the characters or set of characters in any element. This property provides few values such as font relative values like em, pixels (px) these can have both positive and negative values. There are other values used for letter-spacing like normal, length, initial, inherit and these also have both positive and negative values. In this article, we saw positive values are readable and clear, whereas negative values are not clear and unrecognizable.
Recommended Articles
This is a guide to CSS Letter Spacing. Here we discuss an introduction to CSS Letter Spacing, how does it works with examples for better understanding. You can also go through our other related articles to learn more –
