CSSのletter-spacingでテキストの文字の間隔を狭くする方法

キャッチコピーをバンと表示したいけど、微妙に2文字だけ改行されてしまう！！

なんてことないですか？

 

こういった場合には文字を小さくするという対応方法もありますが、文字と文字の間の微妙な隙間を狭くすることで改行せずに全体を表示させる方法を紹介します。

CSSのletter-spacingでテキストの文字の間隔を狭くする方法

結論から言うと、CSSの letter-spacing というプロパティを使います。

初期状態は値に normal が指定されています。

letter-spacing: normal;

この値にマイナスの値を指定すると文字間隔が狭まります。

値の単位は px や em などを使います。

 

たとえば次のようなHTMLがあるとします。

<p id="sampletext">あいうえお</p>

表示すれば次のようになりますね。

あいうえお

 

この #sampletext に対し、letter-spacing: -3px; を指定してみます。

#sampletext {
  letter-spacing: -3px;
}

すると次のように表示されます。

あいうえお

 

間隔が狭まって表示されていることが分かると思います。

文字の間隔を広くする方法

letter-spacing はプラスの値を指定すると間隔を広げることができます。

さっそくやってみましょう。

 

まず通常の状態です。

<p id="sampletext">あいうえお</p>

上のHTMLを表示すると

あいうえお

になります。

 

これ letter-spacing: 5px; を指定してみます。

#sampletext {
  letter-spacing: 5px;
}

すると次のように表示されます。

あいうえお

 

間隔が広がったことが分かりますね！

letter-spacingの値の単位

上の例では px を使いました。

px はピクセルのことで文字サイズやブロックの幅などを指定するときに使う単位です。

分かりやすいかと思ったので px で参考コードを書きました。

 

文字サイズなんかでは em を使う場合も多いです。

emはエムと読むそうです。イーエムって読んでた…恥ずかしい。

emは文字の高さを基準にした単位です。

letter-spacingで文字幅を指定するとき、文字の大きさに対し相対的に値を指定できるので実際に使う場合はこちらのほうがおすすめです。

パソコンとスマホで文字のサイズが異なる場合も文字の大きさに合わせて幅が変動してくれます。

 

他にも vw なんてのもあります。

vw は画面の幅に対して大きさが変動します。

スマホやタブレット表示のときのように画面いっぱいにコンテンツを表示する場合にはなかなか使えます！

パソコンで画面いっぱいに表示しない場合は使い勝手が悪いように感じます。

まとめ

文字の間隔をCSSで指定する場合は letter-spacing プロパティを使う。

単位は px か em が一般的で em のほうが文字サイズに応じた値が設定できるのでおすすめ。

マイナスの値を指定すれば文字幅が狭まり、プラスの値を指定すれば広がる。