Anyone can easily adjust the spacing between characters with CSS. Introduce small tricks!

When creating a website, depending on the type of characters, the spacing between characters may be narrow, making it difficult to read.

It is very important to adjust the spacing between letters to make the text easier to read and to arrange the design .

In this article, I’ll show you how to adjust the spacing between characters displayed in HTML using the CSS letter-spacing property.

When you start learning HTML and CSS, adjusting the spacing between letters doesn’t make much sense, but it’s an important task when it comes to reproducing designs.

Read this article all the way to the end to learn how to properly space letters.

Adjust letter spacing with CSS letter-spacing

To adjust the spacing between letters printed in HTML, use the CSS letter-spacing property .

Letter is a letter and space is an easy-to-remember property because it means an interval.

First, I will show you how to write the letter-spacing property.

How to write the letter-spacing property

The letter-spacing property is written like the code below.

CSS
p{
  letter-spacing: 1px;
}

The value specified in the letter-spacing property becomes the value of the spacing between letters as it is.

In the code above, the spacing between letters will be 1px.

Values ​​that can be specified in the letter-spacing property can also be specified in addition to the absolute value of px.

The values ​​that can be specified for the letter-spacing property are introduced below.

Three values ​​for the letter-spacing property

The following three values ​​can be specified for the letter-spacing property.

You have to use them according to the situation.

For beginners, it will be easier to understand if you specify it in px.

As will be explained later, if you are familiar with HTML and CSS, we recommend specifying with em.

Now, let’s introduce the character spacing when each value is specified.

px (absolute value)

px is often used to create websites.

px is an absolute value, and when viewed on a smartphone or tablet, the spacing between characters is the same as displayed on a computer .

Even if the character size changes, the value specified in px is applied.

CSS
p{
  font-size:16px;
  letter-spacing: 2px;
}

The character spacing in the above code is 2px.

For example, even if the font-size of the p element above is changed, the character spacing will be 2px.

CSS
p{
  font-size: 18px;
  letter-spacing: 2px;
}

At first glance, it looks like the character spacing has increased, but the letter-spacing property value is still 2px, so the character spacing is 2px.

If you specify the letter-spacing value in px, you must also specify the letter spacing in px when the screen width changes .

The reason is that when the screen width changes, the size of the characters also changes in many cases.

You must understand that specifying letter-spacing in px increases the amount of description a little.

em (relative value)

em is a relative value, and specifying em changes the character spacing according to the character size of the parent element .

I will explain with reference to the actual code.

CSS
.mojikan{
  font-size: 16px;
}
p{
  letter-spacing: 0.1em;
}

Since the value of em is determined by multiplying it with the font-size of the parent element, the value of the letter-spacing property in the code above is the same value as 1.6px.

The reason is that the parent element’s mojikan class font-size is 16px and the p element’s letter-spacing value is 0.1em, so 16 x 0.1 = 1.6px.

In this way, em is affected by the parent element, so it is a very useful value when creating websites with responsive design.

A detailed explanation will be provided at the end of the article.

normal (initial value)

The initial value of the letter-spacing property is normal.

If the letter-spacing property is not specified or is specified as normal, letter spacing is determined based on browser and user settings.

Basically it will be the same width as letter-spacing:0px .

However, when you want to restore the letter-spacing property to its initial value, specify normal instead of letter-spacing:0px. This is to reflect browser and user settings.

It is convenient to specify the value of letter-spacing in em

It is recommended to use em when specifying the letter-spacing property.

The reason is that responsive design is the mainstream in current web production .

If the screen width changes, the character size will also change.

At the same time, if the space between characters does not change, the display will become strange.

There is also a method of specifying px, which is an absolute value according to the screen width, but the amount of description increases and lacks maintainability and extensibility, so we recommend using em.

Below is a code example where the character spacing specified by em changes depending on the character size.

CSS(PC画面)
.mojikan{
  font-size: 16px;
}
p{
  background-color: rgb(228, 222, 214);
  letter-spacing: 0.15em;
}

Since 0.15em is specified for letter-spacing, the letter spacing is 16 x 0.15 = 2.4px.

Next, I will introduce the CSS code for the pattern with a narrower screen width.

CSS(スマートフォン)
.mojikan{
  font-size: 12px;
}
p{
  background-color: rgb(228, 222, 214);
  letter-spacing: 0.15em;
}

The screen width has been narrowed and the character size has been changed to 12px.

However, the letter-spacing is still 0.15em.

When the above screen width is narrowed, the character spacing is 12 x 0.15 = 1.8px.

In this way, specifying the letter-spacing property with em reduces the amount of description and improves maintainability .

Therefore, it is recommended to use em when adjusting letter spacing in CSS.

How to increase letter spacing with CSS letter-spacing

Now you know how to adjust letter spacing using the CSS letter-spacing property.

Next, here is a code example when the character spacing is widened.

CSS
.mojikan{
  font-size: 16px;
}
p{
  background-color: rgb(228, 222, 214);
  letter-spacing:1em;
}

The code above inserts a character spacing equal to the character size.

Websites don’t insert letter spacing that large.

However, depending on the type of font, the spacing between letters must be adjusted.

This is because the character spacing changes depending on the type of font specified .

The letter spacing increases as the letter-spacing value in the CSS description increases.

When actually coding CSS, try to adjust the character spacing while looking at the implementation screen.

How to reduce letter spacing using CSS letter-spacing

The letter-spacing property can be used to reduce letter spacing as well as increase letter spacing.

The initial value of the letter-spacing property is normal, similar to 0px.

If you want to close the character spacing, just specify the value with a negative value .

I will explain while looking at the actual code.

CSS
.mojikan{
  font-size: 16px;
}
p{
  background-color: rgb(228, 222, 214);
  letter-spacing:normal;
}

Specify a negative value for letter-spacing for the above HTML p element.

CSS
.mojikan{
  font-size: 16px;
}
p{
  background-color: rgb(228, 222, 214);
  letter-spacing: -1px;
}

You can see that the character spacing is reduced by 1px.

There are not many situations where the method of closing the space between characters is actually used.

However, it is an effective method when the space between characters becomes wide due to the type of font, so let’s remember it.

If the space between characters is too close, it will be difficult to read

Letter spacing can be shortened simply by specifying a negative value for the letter-spacing property.

However, if the space between characters is too close, it becomes difficult to see, so be careful.

Here is an example of when the spacing between characters is too tight.

CSS
.mojikan{
  font-size: 16px;
}
p{
  background-color: rgb(228, 222, 214);
  letter-spacing: -3px;
}

As you can see from the image above, if the spacing between letters is too close, the letters become difficult to read.

Be sure to code the CSS while checking the implementation screen.

Introducing recommended values ​​for character spacing

So far, we have introduced how to adjust the spacing between characters and how to specify a value.

But after all, you may be wondering how much letter spacing is good.

The conclusion is that 0.05em~0.1em is good .

Let’s actually compare and consider the display of each value.

.mojikan{
  font-size: 16px;
}
p{
  background-color: rgb(228, 222, 214);
  letter-spacing: normal;
}

CSS(0.05emの場合)
.mojikan{
  font-size: 16px;
}
p{
  background-color: rgb(228, 222, 214);
  letter-spacing: 0.05em;
}

CSS(0.5emの場合)
.mojikan{
  font-size: 16px;
}
p{
  background-color: rgb(228, 222, 214);
  letter-spacing: 0.5em;
}

There seems to be no problem with the default value of normal, but with 0.05em, the readability will change if the character spacing is slightly increased.

0.5em is too wide and hard to read.

Character spacing may be increased to make titles and headings easier to read.

However, for normal text, specifying 0.05em makes the text easier to read.

Specify letter-spacing in body

Writing the letter-spacing property for each sentence that you want to adjust the letter spacing takes time.

Plus, if you have to fix it, it also takes time.

Therefore, when using the letter-spacing property, it is a good idea to first specify the standard letter spacing for the body tag .

This is because writing the letter-spacing property in the body tag gives the whole website a sense of unity.

Furthermore, it is possible to modify the entire website simply by changing the character spacing value in the body tag.

Unless there is a special character spacing specification, try to write the value in the body tag.

Why it’s better not to use spaces for character spacing

There is a way to use full-width and half-width spaces in HTML without using the letter-spacing property.

For example, even if it is implemented in the following HTML, it is possible to display characters with space between them

CSS
.mojikan{
  font-size: 16px;
}
p{
  background-color: burlywood;
}

The above implements character spacing using single-byte spaces.

However, there are three reasons why it’s better not to use spacing between characters with spaces.

I will explain each reason.

It takes time and effort

Implementing character spacing using single-byte spaces is very time-consuming.

It may be good for short sentences, but if you try to insert half-width spaces in long sentences, no matter how much time you have, it will not be enough.

In addition, when the website needs to be modified, the work of re-inserting half-width spaces will occur .

Can negatively affect SEO

SEO is an abbreviation for “Search Engine Optimization”, which means search engine optimization in Japanese.

SEO measures are important when creating a website, and it is essential to have your website viewed.

If you implement character spacing with half-width spaces, you may not be able to accurately grasp the meaning of the sentence .

For example, when there is a sentence “Adjust the character spacing”, insert the character spacing with a half-width space.

In this case, instead of recognizing the word “character”, there is a possibility that it will be recognized as one character each of “sentence” and “character”.

In SEO measures, you cannot get a proper evaluation unless you understand the meaning of the text.

In this way, let’s understand that inserting character spacing with half-width spaces may adversely affect SEO.

Poor usability

Usability means whether or not users who visit the website are satisfied.

One of the parts that affect usability when character spacing is inserted with half-width spaces is the read-aloud function.

For example, if you insert a half-width space between characters in “character”, the reading function will read “bun, ji”.

The space between letters makes it unrecognizable as an idiom .

As introduced so far, the method of adjusting the space between characters with half-width spaces has only disadvantages, so it is better not to use it.

Basically, it’s okay to know that you don’t use spaces in HTML.

How to adjust word spacing

Letter spacing when using English on a website must be considered beyond simply using the letter-spacing property.

For example, there is the following English display.

HTML
    <div class="mojikan">
        <p>I am studying programming</p>
    </div> 

CSS
.mojikan{
  font-size: 16px;
}
p{
  letter-spacing: 0.2em;
  background-color: burlywood;
}

For English notation, you need to put spaces between words.

The letter-spacing property alone cannot adjust word-to-word spacing.

So, use the CSS word-spacing property to adjust word-to-word spacing.

Adjust the English spacing above.

CSS
.mojikan{
  font-size: 16px;
}
p{
  letter-spacing: 0.2em;
  word-spacing: 0.5em;
  background-color: burlywood;
}

I specified 0.5em for the word-spacing, which added a sense of 8px between words.

As with the letter-spacing property, the wprd-spacing property can also be specified in em as well as px.

Also remember that if your website requires English notation, you can adjust the width between words with the word-spacing property.

How to fill characters with font-feature-settings

If you adjust the letter spacing with the letter-spacing property, all letters will have the same width.

However, in the case of Japanese, it is said that it is easier to see if the space between the small characters “ya, yu, yo” and punctuation marks are narrowed .

This is called kerning.

Here’s how to do kerning in CSS.

First, here’s an example using only the letter-spacing property.

HTML
    <div class="mojikan">
        <p>きょうは本を読みましょう。エッセイを読んでもいいかもしれません。たくさんのしゅるいの本があります。</p>
    </div> 

CSS
.mojikan{
  font-size: 16px;
}
p{
  letter-spacing: 0.1em;
  background-color: burlywood;
}

The same 0.1em spacing is used for small letters and punctuation marks.

For the code above, use the font-feature-settings property for kerning.

Below is the code and example implementation for kerning with the font-feature-settings property.

CSS
.mojikan{
  font-size: 16px;
}
p{
  letter-spacing: 0.1em;
  background-color: burlywood;
  font-feature-settings: "palt"1;
}

Just write font-feature-settings: “palt”1 in CSS and it will automatically implement kerning.

The number 1 is a number to determine whether to set kerning.

A value of 0 turns off kerning.

But sometimes the font-feature-settings property doesn’t work.

It’s a pattern that the font doesn’t support.

Note that the font-feature-settings property does not work for sadaai.comGothic, MS Mincho, Meiryo, and Noto Sans .

summary

I explained how to adjust the spacing between letters with CSS, focusing on the letter-spacing property.

Character spacing is not necessarily something that must be set, but it can be said that it is an essential property in order to create a website that is easy for users to see .

In addition, websites use different font types, so you need to use different letter spacing.

In addition to the letter-spacing property, let’s also remember the existence of the word-spacing property that adjusts the width between words and the font-feature-settings property that adjusts the width according to the type of Japanese.