模写修行メディア

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

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

この記事をシェア:

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

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

letter-spacing とは

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

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

文字間隔の調整はカーニングとも呼ばれ、グラフィックデザインなどでは必須で行います。グラフィックデザイナーもやっている方は、webでも文字間隔の調整をする印象があります。

<p class="hoge">テストです</p>
.hoge{
    ...
    letter-spacing: 20px;
}

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

letter-spacingで文字間隔を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と同じ */
}
letter-spacing の値
example0120 × 1 = 20px
example0220 × 0.5 = 10px

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

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

PhotoshopとXDの文字間隔をする箇所のスクリーンショット

上のスクリーンショットのように、PhotoshopとXDでは赤枠の部分で文字間隔を設定します。この値をCSSのemに変換する計算方法は1000で割れば良いだけです。

  • 1000 に設定されていた場合、1000/1000 = 1em
  • 750 に設定されていた場合、750/1000 = 0.75em

例えば、上のような計算です。

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

letter-spacingで文字間隔を20px空けた図

冒頭の画像を再度添付します。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-wrapoverflow: 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設計を意識したコーディングを学びたい)
  • 実務と同じようにXDのデータを見ながらコーディングの練習をしたい
  • 現役で制作をやっている人のコードを見たい

基礎学習を終えた方が次にやるべきことは、実践に近い形でたくさん練習することです。そして、わからないことがあれば、その都合調べて理解する。この繰り返しでコーディングやプログラミングは上達します。

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

この記事をシェア:

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材