[CSS] How to use letter-spacing?

To specify letter spacing in CSS, use letter-spacing.

“How do you calculate it?” “What should I do when it doesn’t work?”

Some people may have such a problem.

This time, for those who want to set letter spacing using CSS letter-spacing,

I will explain according to the above items.

Read this article to learn more about CSS letter-spacing .

What is letter-spacing? What do you use when?

letter-spacing is a CSS property that specifies the spacing between letters.

It is used when you want to widen or narrow the gap between characters .

Specifically, it is described as follows.

.sample {
  letter-spacing: 0.5em;
}

Let’s take a closer look at the values.

letter-spacing value

There are four possible values ​​for letter-spacing :

normal is the initial value, and it will be this value if nothing is specified. Your browser will automatically decide how to display it.

After that, it is a method to specify by numerical value and unit, just like when deciding size etc.

This number can also be negative . Negative values ​​make the characters spaced closer together.

Why we recommend “em” and how to calculate it

It is recommended to use the unit “em” when specifying letter-spacing values .

An em is a relative unit, calculated by the font size.

1em is the same size as the font size, for example 0.5em is half the size of the font size.

Since the character spacing is automatically determined according to the font size, you can save the trouble of specifying it for each element.

If you specify different values ​​for different elements, the inter-letter spacing may become uneven and readability may decrease.

There is also the advantage that calculations are made according to the character size even when the browser is enlarged or reduced on the viewer’s side.

% is also a relative unit, but since the character spacing is determined according to the element, there are few opportunities to use it.

How to remove trailing whitespace

Letter-spacing actually creates a space at the end of the sentence.

You can see it better if you add a background color as shown below.

<div class="sample">
  <p>文末にも空白ができてしまう</p>
</div>

.sample {
  text-align: center;
  white-space: nowrap;
}
.sample p {
  display: inline-block;
  background: blue;
  color: white;
  letter-spacing: 0.5em;
}

You can see that there is a space at the end of the text.

When you want to align the characters in the center, etc., they will be displayed shifted by the space. Since the size itself is small, I don’t think you need to worry about it, but some people may want to modify it.

This can be resolved by giving a negative value to margin, which specifies the padding .

<div class="sample">
  <p>
    <span>文末の空白を削除する</span>
  </p>
</div>

.sample {
  text-align: center;
  white-space: nowrap;
}
.sample p {
  display: inline-block;
  background: blue;
  color: white;
  letter-spacing: 0.5em;
}
.sample p span {
  margin-right: -0.5em;
}

Now there is no whitespace at the end of the text.

Causes and solutions when letter-spacing does not work

There are times when letter-spacing is specified, but it is not displayed properly.

I will explain why letter-spacing does not work and how to deal with it.

Make sure you are not using special fonts such as ligatures

If letter-spacing doesn’t work, it’s a good idea to check what font you’re using.

Depending on the font, strings such as “ff” and “fi” may be combined into a single character called a ligature.

This is also used in the design of logos and packages, and was born to make sentences that are difficult to read due to consecutive fs easier to read.

In these cases , letter-spacing does n’t work because there is no space between letters .

You need to change the font or specify “font-variant-ligatures:none” to remove the ligature feature.

Check for spelling mistakes with the developer

If the above method does not solve the problem, there is a possibility that you simply made a mistake in the specification due to a spelling mistake or the like .

Chrome and Firefox have developer tools available in the browser.

Let’s open the tool and see if letter-spacing is working. For Chrome, incorrect statements are crossed out.

Summary: Master letter-spacing

This time, I explained how to use and recommended values ​​for letter-spacing in CSS .

I also explained why it doesn’t work and how to fix it.

Since it is often specified in a batch, there may be some people who have not been conscious of it until now.

I hope this article will help you in your future coding.