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

今回はCSSで字間を調整する方法と、おすすめの値をまとめていきます。

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

.example {
  letter-spacing: 0.05em;
}

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

この図のように、letter-spacingでは文字と文字の間のスペースを設定します。

letter-spacingの値

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

初期値はnormalですが、親の指定を継承している場合もあります。normalは追加の字間を設けず、0に算出されます。letter-spacing:0も追加する間隔が0という意味です。どちらも字形どうしの見える隙間がなくなるという意味ではなく、フォントが持つ字形や文字幅による隙間は残ります。

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

文字サイズに応じて追加する字間を決めたい場合は、emが便利です。ただし、指定した要素のfont-sizeを基に長さへ計算され、その長さが子へ継承されます。親16pxで0.1emなら1.6pxとなり、子のfont-sizeを変えただけでは字間は再計算されません。letter-spacingの場合、相対的な比率で指定するときは単位にemを使います。

emの字間の考え方

letter-spacingの1emは、その要素のfont-sizeと同じ長さです。見える字形の高さとは限りません。font-sizeが16pxなら0.1emは1.6px、0.5emは8pxの追加間隔です。

おすすめのletter-spacingの値

通常の字間（normal）でも読みやすい場合があります。字間を広げたいときは、0.05em〜0.1emなどを試す出発点にできますが、適切な値はフォント、文字サイズ、言語、文章や用途によって異なります。

letter-spacing: 0.05emの場合

<p>これは例文です（指定なし）</p>
<p class="font_space">これは例文です（0.05em）</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.1emにしてみます↓。

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

.font_space {letter-spacing: -0.1em;}

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

font-feature-settingsで文字詰め

font-feature-settings: "palt"は、対応フォントが持つプロポーショナルな文字幅の情報を有効にする指定です。文字の組合せごとに間隔を調整するカーニングと同義ではありません。効果はフォントのpalt機能や対象文字によって異なります。

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

こちらは過去の検証記事です。掲載当時の対応情報として参照し、現在使うフォントとブラウザで表示を確認してください。

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

こちらも2016年公開の検証記事です。当時の表示例として参考になります。

用途に合わせて文字詰めを確認する

僕もいろいろと試してみましたが、font-feature-settings: "palt"だけを設定すると、詰まりすぎて読みにくくなるような気がしています（使いどころによるかと思いますが）。
letter-spacingを広めに設定しておくと良いのかもしれませんが、そうするとfont-feature-settingsが効かなかった場合に字間が広がりすぎてしまいます。
採用する場合はpaltが使えるフォントと、使えない場合の両方で読みやすさを確認しましょう。