Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

CSS letter-spacing Property

The letter-spacing property in CSS is known for setting the horizontal spacing behavior between the text characters. This property value is added to the natural spacing between characters while rendering the text.

Positive values of this property cause the characters to spread farther apart. And the negative values of this property bring characters closer together. This property may be specified as one of the keywords like normal and length.

Syntax

letter-spacing: normal|length|initial|inherit;

Example: CSS letter-spacing Property

In the example below, we are using the letter-spacing property to given space in between the letters of the text according to the values specified by us.

<!DOCTYPE html>
<html>
<head>
	<title>The letter-spacing property in CSS</title>
	<style type="text/css">
		.normal   { letter-spacing: normal; }
	.em-wide  { letter-spacing: 0.4em; }
	.em-wider { letter-spacing: 1em; }
	.em-tight { letter-spacing: -0.05em; }
	.px-wide  { letter-spacing: 6px; 
		color: green;
	}
	</style>
</head>
<body>
	<p class="normal">letter spacing</p>
	<p class="em-wide">letter spacing</p>
	<p class="em-wider">letter spacing</p>
	<p class="em-tight">letter spacing</p>
	<p class="px-wide">letter spacing</p>
</body>
</html>

Output

Example 2: CSS letter-spacing Property

Here in this second example below, we have given the letter-spacing property value as 1px. So, the letters get aligned in-text leaving a space of 1px in between.

<!DOCTYPE html>
<html>
<head>
	<title>The letter-spacing property in CSS</title>
	<style type="text/css">
		.normal   { 
			letter-spacing: 1px; 
		color: red;
		font-weight: 20px;
	}
	</style>
</head>
<body>
	<p class="normal">Study Tonight</p>
</html>

Output

Live Example

Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.

Browser Compatibility

The term browser compatibility indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.

Name of Browser Background size contain and cover
Chrome 1 1
Edge 12 12
Firefox 1 1
Internet Explorer 4 4
Opera 3.5 3.5
Safari 1 1
Webview Android 37 37
Chrome Android 18 18
Firefox Android 4 4
Opera Android 10.1 10.1
IOS Safari 1 1
Samsung Internet 1.0 1.0

Conclusion

The initial value for the letter-spacing property in CSS is normal. This property is applicable to all the elements and also to the ::first-line and ::first-letter. It is an inherited property. The computed value for this property is an optimum value that consists of either an absolute length or the keyword normal. The animation type for this property is length.