normalフォントとブラウザーに任せる
初期値です。フォント本来の字間を使い、両端揃えではブラウザーが間隔を調整できます。
letter-spacing
文字と文字のあいだに加える文字の並ぶ方向の間隔を調整するプロパティ。負数から正数まで動かし、読みやすさと印象の変化を比べます。
CSSのletter-spacingとは？
文字どうしの間隔をライブプレビューで狭めたり広げたりしながら、normal・長さ・負の値・継承を初学者向けに解説します。
遊んでみよう
フォント本来の字間へ指定値を加算
LETTER SPACING文字の間隔見て、動かして、比べる。
CSS
.element letter-spacing: 0px;
値のパターン
letter-spacingの構成要素
<length>自然な字間へ長さを加える
pxやemなどで指定します。正の値は広げ、負の値は文字を近づけます。
inherit子要素へ受け継がれる
letter-spacingは継承されるため、親へ指定すると中の文字にも同じ字間が使われます。
早見表
初期値はnormalです。数値を指定するとフォント本来の字間へ加算され、負の値も使えます。まずは小さな値から読みやすさを確認します。
01
normalフォント本来の字間を使う初期値02
0追加する間隔を0にするnormalとは挙動が異なる03
-1px文字を少し近づける負の値04
2px一定の長さだけ広げる固定長05
0.08em文字サイズに合わせて広げる相対長06
inherit親の指定値を受け継ぐグローバルよくある使い方
01
短い見出しの密度を整える
大きな見出しをわずかに詰めると、文字のまとまりを保ちながら横幅を抑えられます。
h1 { letter-spacing: -0.02em; }02
英字ラベルを読み分けやすくする
短い大文字のラベルへ少し広い字間を加えると、一文字ずつの形が見分けやすくなります。
.label { letter-spacing: 0.12em; }03
数値コードの並びを見やすくする
確認コードなどの短い文字列へ一定の間隔を加え、隣り合う文字を読み取りやすくします。
.code { letter-spacing: 0.18em; }ポイント
広げすぎ・詰めすぎは、読みにくさにつながる。
letter-spacingはすべての要素と::first-letter・::first-lineに適用でき、子要素へ継承されます。正負どちらも大きすぎる値は単語のまとまりや文字の判別を壊すため、本文には控えめな値を使います。normalは0と完全に同じではなく、normalでは両端揃えのためにブラウザーが字間を調整できます。日本語を含む多言語の文章では、実際の文字と改行位置で読みやすさを確かめます。
関連するCSSも見てみよう。
letter-spacing と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。