【CSS】letter-spacingで字間を調整する方法まとめ

CSSで文字間を調整する方法

{letter-spacing: 値}

次は文字どうしの間隔（＝字間）の設定方法を解説します。CSSでは字間の調整をletter-spacingというプロパティにより設定します。

letter-spacingの値

値の指定の仕方は以下のようになります。

初期値はnormalなので、とくに何も指定をしなければnormalとなっています。normalではブラウザが自動で決めてくれるというようになっているももの、実際のところnormal だと字間ゼロ（letter-spacing: 0）になっています。

「em」で指定するのがおすすめ

letter-spacingもpxで指定するより、相対的な比率で指定したほうが良いでしょう。文字のサイズに応じて字間を変えてくれるからです。letter-spacingの場合、相対的な比率で指定するときは単位にemを使います。

emの字間の考え方

1em＝「文字の高さ」となります。たとえば、0.1emだと「文字の高さの1/10の大きさ」の字間ができるということになります。0.5emだと「文字の高さの1/2の大きさ」の字間ができるということですね。

おすすめのletter-spacingの値

個人的には初期値の状態でも（字間0でも）十分見やすいかと思います。指定するのであれば、おすすめは0.05em〜0.1emくらいです。これ以下だとほとんど違いが分からず、これ以上だとスカスカに見えます。

letter-spacing: 0.05emの場合

<p>これは例文です（指定なし）</p>
<p class="font_space">これは例文です（0.02em）</p>

.font_space {letter-spacing: 0.05em}

↑例文だと違いがいまいち分かりませんが、実際に長文に適用してみると結構印象が変わります。

letter-spacing: 0.1emの場合

<p>これは例文です（指定なし）</p>
<p class="font_space">これは例文です（0.1em）</p>

.font_space {letter-spacing: 0.1em}

↑0.1emだと結構字間が広めになります。これ以上広げると文章が読みづらくなってしまうので、0.1em以下にするのが良いでしょう。

値をマイナスにすると字間が狭くなる

値は0より小さくしてもOKです。その場合、何も指定していないときよりも字間が狭くなります。たとえば、字間を-0.1emにしてみます↓。

<p>これは例文です（指定なし）</p>
<p class="font_space">これは例文です（-0.1em）</p>

.font_space {letter-spacing: -0.1em}

実際にWebサイトやブログで指定するときには、いくつかの値を入れてみて、どれがベストか吟味すると良いでしょう。

font-feature-settingsで文字詰め

最近ではCSSで自動で文字間を詰めてくれる（カーニングといいます）プロパティも登場しています。具体的にはfont-feature-settings: "palt"という指定をします。

文字詰めできるCSSのfont-feature-settingsプロパティについて検証

こちらの記事で各ブラウザの対応状況がまとめられています。使用するフォント種類やOSによって適用されたり、されなかったりするです。

文字詰めが出来るCSS「font-feature-settings」を試してみた

実際にどんな見た目になるのかは、こちらの記事が参考になります。

個人的には不必要かな？という感想

僕もいろいろと試してみましたが、font-feature-settings: "palt"だけを設定すると、詰まりすぎて読みにくくなるような気がしています（使いどころによるかと思いますが）。
letter-spacingを広めに設定しておくと良いのかもしれませんが、そうするとfont-feature-settingsが効かなかった場合に字間が広がりすぎてしまいます。
もう少し様子見した方が良いのかもしれませんね。