今回は、文字間の調整を行うletter-spacingプロパティのおすすめ単位と使い方について簡単に解説します。

letter-spacingとは

letter-spacingは文字間のスペースの大きさを調整することができるプロパティです。
テキスト部分に指定することで行間を調整できます。

letter-spacingのおすすめ単位

単位はemがおすすめ

文字の大きさに基づいて、相対的に文字間を調整できるemを使用するのがおすすめです。
pxやremで指定を行うと、レスポンシブ対応で文字サイズが変化した際、その都度値を変更しなくてはいけません。
このように、絶対値による指定だとコーディングの手間が増えてしまいます。

範囲は0.05~0.12emがおすすめ

emの指定範囲は0.05~0.12の間がおすすめです。
文字サイズの5%から12%分の文字間があると、文章の可読性が上がります。

letter-spacingの使い方

全体に指定すると影響範囲が大きくなる

body {
  letter-spacing: 0.05em;
}

上記のようにbodyにletter-spacingを指定すると、サイト全体のテキストに文字間が生じます。
サイト内にあるすべてのテキストの文字間が統一されているなら問題ないのですが、そのようなサイトは少ないです。

テキストによっては文字間が不要なこともあるので、一つずつ打ち消さないといけなくなり少々面倒です。

各々のテキストの指定するのが無難

h2 {
  letter-spacing: 0.12em;
}
p {
  letter-spacing: 0.08em;
}
span {
  letter-spacing: 0.05em;
}

上記例のように、見出しや文章などテキストの用途によって文字間の値を調整するのがおすすめです。

テキスト箇所によって文字間の値が異なるデザインカンプは多いので、各々のテキストにletter-spacingを指定するのが無難です。

まとめ

文字間の調整は読者の可読性（読みやすさ）やデザイン性にも影響を与えるので、一つ一つ慎重に指定を行いましょう！