CSS letter spacing

CSS letter spacing is a CSS property that is used to create space between text characters or to reduce the space already created. We have some examples to teach you in a better way, after seeing which you can also learn.

p {
	letter-spacing: 4px;
}

h1 {
	letter-spacing: 2px;
}

div {
	letter-spacing: 3px;
}

H4 {
	letter-spacing: 1em;
}


OR

p, h1, div{
	letter-spacing: 4px;
}


<p>letter spacing is used to create space between text </p>
<h1> letter spacing css </h1>
<div> letter spacing is used to create space between text </div>
<h4> letter spacing css </h4>

You can use letter spacing in 3 ways with Keyword value, <length> value, and Global value.

p {
	letter-spacing: normal;
}

h1 {
	letter-spacing: 1em;
}

div {
	letter-spacing: inherit;
}

<p>letter spacing is used to create space between text </p>
<h1> letter spacing css </h1>
<div> letter spacing is used to create space between text </div>

But if you want to reduce your text space, then for that you have to follow the example given below.

p {
	letter-spacing: -2px;
}

h1 {
	letter-spacing: -2px;
}

<p>letter spacing is used to create space between text </p>
<h1> letter spacing</h1>

CSS Letter Spacing Examples

p {
	letter-spacing: 2px;
}
h1 {
	letter-spacing: 3px;
}
button {
	letter-spacing: 5px;
}
span {
	letter-spacing: 5px;
}
.myclass{
	letter-spacing: 4px;
}
.myclass p{
	letter-spacing: 2px;
}
.myclass h1{
	letter-spacing: 2px;
}

Browser Support

  • Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari
  • Edge
Live Demo Of CSS Letter Spacing

Frequently Asked Questions

We have answers to some questions that people search on the Internet everyday. Let us know what are those questions and what are their answers.

What is letter spacing?

This Property is used to create space between text characters.

What does line height do in CSS?

The line height is used to reduce or increase the height of the text line.

What is font weight in CSS?

The font weight is used to make the text thicker or thinner.

What is font family in CSS?

CSS font family are types of font. Different types of font family are used to decorate the text with the family names.

What are the 3 types of CSS?

There are 3 types of CSS such as internal, external and inline CSS.

How do I link CSS to HTML?

To link CSS with html, you can place your file inside the head tag. For example link rel = “stylesheet” href = “mystyle.css”

How do you put a full background image on HTML?

If you want to apply the full background image, then you can apply the image above your body tag. for example Background-image: url (“myimage.jpg”).

Note: All the examples shown in this article, we have tested before, you can use these examples without any difficulty.

Related: 11 Easiest Examples Of HTML List