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

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

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

💡 コーディングの練習なら模写修行！

無料教材もあります！

【こんな方におすすめ】

• 実務のレベル感を知りたい
• プロの制作フローを学びたい
• 基礎学習中、もしくは終えたばかり
• CSS設計やSCSSを使った書き方を学びたい

公式サイトを見る

コーディング教材の【模写修行】は他の教材と何が違うのか？

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文字の右側にもスペースが入るので、中央揃えや右揃えする際はその分調整しないといけません。

中央揃えする際の調整方法

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

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

.hoge{
    ...
    text-align: center;
    letter-spacing: .5em;
    padding-left: .5em;
}

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行目の最初にしか余白が入らない
• ネガティブマージンは問題なし

右揃えする際の調整方法

<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もあります。参考記事を載せておくので、興味がある方は見てみてください。

超実務向け！コーディングの練習が出来るサービス作りました 🎉

模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。

こんな方におすすめ！

• 実務のレベル感を知りたい
• プロの制作フローを学びたい
• 何を考えながらコードを書くのか知りたい
• 基礎学習中、もしくは終えたばかり
• CSS設計やSCSSを使った書き方を学びたい

模写修行ではデザインデータ(FigmaとXD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで答え合わせ&さらに深く学ぶことができるサービスです。

他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。

コーディング教材の【模写修行】は他の教材と何が違うのか？

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！

嬉しい声もいただいています！

自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました！
TwitterでDMいただきました！🙇

---

classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです！解説記事もわかりやすい...！
Tweet

---

デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet

---

答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet

---

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！