【CSS】letter-spacingとおすすめ単位紹介

「文章が読みやすい」と感じるWebサイトは、letter-spacingを適切な値で適用しています。letter-spacingは文字と文字の間のスペースを調整するためのものです。この値しだいで文章が読みづらくも読みやすくもなります。

適切な値を設定して、ユーザーが読みやすい文章になるようにしてあげましょう！

今回はletter-spacingの解説とおすすめの単位について学習していきます。

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

letter-spacingは文字間を調整するプロパティ

letter-spacingは文字間の隙間を調整するプロパティです。

letter-spacingの基本的な書式は以下になります。

基本書式

セレクタ　{
  letter-spacing: 値;
}

これだけでは想像しにくいと思いますので、実際に使ってみましょう。
まずHTMLのpタグに以下のような文章があるとします。

<p>letter-spacingを指定しました。</p>

こちらのpタグにCSSでletter-spacingを適用します。

p {
  font-size: 24px;
  letter-spacing: 8px;
}

出力結果

このように、文字と文字の間が広がりました。letter-spacingを指定しない場合はブラウザの既定値に設定されます。

letter-spacingで文字間を調整する

先程の例をもう少しわかりやすくするために値を変えて比較してみましょう。

  <p class="spacing1">letter-spacingを1pxで指定しました。</p>
  <p class="spacing2">letter-spacingを-1pxで指定しました。</p>
  <p class="spacing3">letter-spacingを0.1pxで指定しました。</p>
  <p class="spacing4">letter-spacingを0.01pxで指定しました。</p>

p {
  font-size: 24px;
}

.spacing1 {
  letter-spacing: 1px;
}
.spacing2 {
  letter-spacing: -0.01px;
}
.spacing3 {
  letter-spacing: 0.1px;
}
.spacing4 {
  letter-spacing: 0.01px;
}

出力結果

値を変更すれば文字間が広くなったり狭くなったりします。マイナスの値をつければ、文字間は狭くなります。

部分的に変更したければ、変更したい箇所をspanタグで囲ってspanタグにletter-spacingを適用するようにしましょう。

letter-spacingのおすすめ単位 「em」

ここまではletter-spacingの値の単位をpxで指定しましたが、letter-spacingでよく使われるのはem(エム)という単位です。pxではなくemで指定した場合の例を見てみましょう。

  <p class="font1">letter-spacingを1emで指定しました。</p>
  <p class="font2">letter-spacingを-1emで指定しました。</p>
  <p class="font3">letter-spacingを0.1emで指定しました。</p>
  <p class="font4">letter-spacingを0.01emで指定しました。</p>

p {
  font-size: 16px;
}

.font1 {
  letter-spacing: 1em;
}
.font2 {
  letter-spacing: -0.01em;
}
.font3 {
  letter-spacing: 0.1em;
}
.font4 {
  letter-spacing: 0.01em;
}

letter-spacingをpxで指定した場合は文字間が固定されます。対してemは相対的な比率なのでフォントサイズに応じて文字間が変わります。

emは相対的な比率で、現在のフォントサイズに対する比率となります。上記の例でいえばフォントサイズが16pxなので、letter-spacingの1emがフォントサイズと同じになります。つまり、1emで指定すると文字と文字の間が16pxも離れてしまいます。

そして同じくフォントサイズが16pxでletter-spacingが0.1emの場合は、1.6pxのスペースができることになります。

  <p class="font1">フォントサイズが16pxで、letter-spacingを0.1emで指定しました。</p>
  <p class="font2">フォントサイズが32pxで、letter-spacingを0.1emで指定しました。</p>

.font1 {
  font-size: 16px;
  letter-spacing: 0.1em;
}
.font2 {
  font-size: 32px;
  letter-spacing: 0.1em;
}

上記の例のように同じ0.1emを適用していたとしても、フォントサイズが変わればemは想定的な値なので文字間もそれに応じて変化します。フォントサイズが32pxの場合は、0.1emは3.2px程度ということになります。

letter-spacingにpxを指定する場合は、固定値になるのでフォントサイズが大きくなっても小さくなってもletter-spacingは変わりません。

  <p class="font1">フォントサイズが16pxで、letter-spacingを0.1pxで指定しました。</p>
  <p class="font2">フォントサイズが32pxで、letter-spacingを0.1pxで指定しました。</p>

.font1 {
  font-size: 16px;
  letter-spacing: 0.1px;
}
.font2 {
  font-size: 32px;
  letter-spacing: 0.1px;
}

出力結果

pxで固定にしてしまうと、フォントサイズが大きくなったときや長文になったときなど少し違和感を感じることがあります。基本的には、letter-spacingには相対値であるemを使うことがおすすめです。

まとめ

文字間を少し変えるだけで、文章の読みやすさは劇的に変化します。ユーザ―目線を考えて調整するようにしましょう。

細かい配慮でユーザビリティが良くなるので、適切な単位と適切な値を指定し、文章が読みやすいWebサイトを作成しましょう。

letter-spacingプロパティまとめ

• letter-spacingは文字間を調整するプロパティ
• letter-spacingを使用時おすすめの数値＋単位：「0.05~0.1」 + 「em」

プログラミング学習でこのような経験はありませんか？

1. 目標に向けて何を学べば良いかわからない
2. 調べても解決策が見つからない
3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

1. なんでも相談できる専属メンター
2. いつでも技術相談ができるプロ講師
3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー