CSSで文字間隔を調整できるletter-spacingの使い方を紹介！

webサイトの文字間隔は、読みやすさやサイトの印象に影響を与えることがあります。このサイトもデフォルトより、ほんの少し文字間隔を空けています。

この記事ではCSSのletter-spacingを使って文字間隔を調整する方法を紹介します。意外と見落としがちな注意点も紹介します。

letter-spacing とは

letter-spacingは文字間隔を調整出来るプロパティです。

読み方はレタースページングで、letter(レター)は文字、spacing(スペーシング)は間隔という意味です。

文字間隔の調整はカーニングとも呼ばれ、グラフィックデザインなどでは必須で行います。

<p class="hoge">テストです</p>

.hoge{
    ...
    letter-spacing: 20px;
}

例えば上のように指定をすると、各文字の右側に20pxのスペースが空くことになります。

図にするとこのようになります。

最後の文字の右側にもスペースが空く点に注意してください。後述しますが、この仕様のせいで中央揃えや右揃えする際には調整が必要になります。

文字間隔の調整で読みやすさや印象は変わる？

文字間隔の調整で読みやすさが変わるかどうかの感じ方は、人それぞれだと思います。参考までに調整したものと、デフォルトのままの比較画像を2つ紹介します。

画像では、ほとんど分かりませんね...

こちらは結構印象が変わるのではないでしょうか。実際にサイトを見ると調整していない方は、かなり違和感があります。

letter-spacingで使える単位とおすすめ

letter-spacingの初期値はnormalで、ほとんどの環境でスペースは入りません。

使える単位には、px / em / rem などがありますが、おすすめはemです。

あまり機会はないかもしれませんが、letter-spacing: -20px;のように、マイナスの値も使えます。また、デフォルトに戻したい場合は、letter-spacing: normal;で上書きすれば良いです。

単位はemがおすすめの理由

emはfont-sizeを基準とした、相対的な値です。

具体例を紹介します。

.example01{
    font-size: 20px;
    letter-spacing: 1em; /* 20pxと同じ */
}

.example02{
    font-size: 20px;
    letter-spacing: .5em; /* 10pxと同じ */
}

font-sizeを変更すると、それに応じてletter-spacingの値も変更されるので、pxなどの絶対値よりもemの方が便利です。

FigmaとXDの文字設定をCSSのemに変換する計算方法

上のスクリーンショットのように、FigmaとXDでは赤枠の部分で文字間隔を設定します。この値をCSSのemに変換する計算方法を紹介します。

• Figmaの場合：赤枠の値 / 100 = 10 / 100 = 0.1em
• XDの場合：赤枠の値 / 1000 = 100 / 1000 = 0.1em

letter-spacingを指定したテキストを中央揃えや右揃えする際の注意点

冒頭の画像を再度添付します。letter-spacingは、最後の1文字の右側にもスペースが入るので、中央揃えや右揃えする際はその分調整しないといけません。

padding-left / text-indentを使う調整方法

中央揃えするテキストが必ず、1行におさまる場合は、letter-spacing分の余白をテキストの先頭に入れれば良いです。

<p class="text">文字間隔を調整</p>

.hoge{
    ...
    text-align: center;
    letter-spacing: .5em;
    padding-left: .5em;
    <!-- 下記でもOK -->
    text-indent: .5em;
}

理由は後述しますが、paddingとtext-indentで調整する方法は、テキストが改行する場合は使えません。

ネガティブマージンを使う調整方法

<div class="text-wrap">
    <p class="text">文字間隔を調整</p>
</div>

.text-wrap{
    ...
    overflow: hidden;
}

.text{
    ...
    text-align: center;
    letter-spacing: .5em;
    margin-right: -0.5em;
}

.text-wrapのoverflow: hidden;がないと、横スクロールしてしまうので注意が必要です。

調整方法の比較

改行する可能性がある場合、上の図のようなことが起きます。

• paddingとtext-indentは先頭に余白が入る分、はやく改行する
• text-indentは1行目の最初にしか余白が入らないので2行目の位置に違和感がある
• ネガティブマージンは問題なし

右揃えする際の調整方法

<div class="text-wrap">
    <p class="text">文字間隔を調整</p>
</div>

.text-wrap{
    ...
    overflow: hidden;
}

.text{
    ...
    text-align: right;
    letter-spacing: .5em;
    margin-right: -0.5em;
}

右揃えする際の調整方法は、中央揃えする際のネガティブマージンを使う方法と同じです。

letter-spacingのおすすめの指定は？

一般的に本文は、0.05em ~ 0.1emが読みやすいとされているようです。

しかし、読みやすさだけではなく、デザイン性を重視するケースもあり、サイトによって適切な値は異なります。

例えば、お堅めなサイトであれば、あまり広くとらないかデフォルトのままが良いかもしれません。美容室･サロン･エステ･ヨガなどのジャンルでは広めに取ることも多いです。

ジャンル別にどれくらいのスペースを取っているか、ギャラリーサイトで見てみると良いです。

自動で調整もできる

自動で文字間隔をいい感じ？に調整できる、font-feature-settingsもあります。参考記事を載せておくので、興味がある方は見てみてください。

カラクリ無しの完全無料！あなた専属のメンターが付く？