CSS ・ 文字・フォント
letter-spacing
文字の間隔
文字と文字の間隔を広げたり狭めたりします。見出しやロゴ、英字の小さな見出しの調整によく使います。
01
サンプルコード
HTML
1<p class="normal">LETTER SPACING ふつう</p>
2<p class="wide">LETTER SPACING 広め</p>
3<p class="tight">LETTER SPACING 狭め</p>
CSS
1.wide {
2 letter-spacing: .2em;
3}
4.tight {
5 letter-spacing: -.03em;
6}
02
実行結果
ブラウザでの表示
03
解説
letter-spacing は文字と文字の間隔（字間）を調整するプロパティです。正の値で広く、負の値で狭くなります。
em で指定すると文字サイズに比例した間隔になるため、文字の大きさを変えてもバランスが崩れません。
英字の小さな見出し（キッカー）は字間を広げると読みやすく、大きな見出しは少し詰めると引き締まって見えます。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
normal | フォント標準の字間 |
.1em | 文字サイズの0.1倍だけ広げる |
-.02em | 少し詰める |
2px | 固定の値で広げる |
英字のキッカーをつくる
小さく、大文字で、字間を広げた見出しの定番スタイルです。
HTML
1<p class="kicker">Dictionary</p>
CSS
1.kicker {
2 font-size: 12px;
3 text-transform: uppercase;
4 letter-spacing: .16em;
5 color: #a06f24;
6}
注意点
- 01本文の字間を大きく広げると、単語のまとまりが分かりにくくなります。
- 02letter-spacing は最後の文字の後ろにも付くため、中央揃えではわずかに右にずれます。