letter-spacing

CSSletter-spacing プロパティは、テキストの字間のスペースに関する挙動を設定します。

構文

/* キーワード値 */
letter-spacing: normal;

/* <length> 値 */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;

/* グローバル値 */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;

normal
現在のフォントでの通常の字間になります。 0 の値とは異なり、この値はユーザーエージェントが文字列を両端揃えするために字間を変えることを許可します。
<length>
既定の字間に加える字間のスペースを指定します。負の値も指定可能ですが、実装に依存した制限があるかもしれません。ユーザーエージェントは文字列を両端揃えするために、字間スペースをさらに増減させることはありません。

形式文法

normal | <length>

HTML

<p class="normal">letter spacing</p>
<p class="em-wide">letter spacing</p>
<p class="em-wider">letter spacing</p>
<p class="em-tight">letter spacing</p>
<p class="px-wide">letter spacing</p>

CSS

.normal   { letter-spacing: normal; }
.em-wide  { letter-spacing: 0.4em; }
.em-wider { letter-spacing: 1em; }
.em-tight { letter-spacing: -0.05em; }
.px-wide  { letter-spacing: 6px; }

結果

アクセシビリティへの配慮

正と負どちらでも、大きすぎる値を letter-spacing に指定すると読みづらくなってしまいます。正の値として大きすぎる場合、文字と文字が離れすぎるせいでひとつの単語ではなくバラバラの文字に見えてしまいます。負の値として大きすぎる場合、文字と文字が重なり合うせいで何が書いてあるのか分からなくなってしまいます。

フォントの文字幅は種類ごとに異なるため、読みやすい letter-spacing もそれぞれ異なります。すべてのフォントで読みやすさを提供してくれる単一の設定値というものはありません。

仕様書

仕様書 状態 備考
CSS Text Module Level 3
letter-spacing の定義
草案 変更なし。
CSS Transitions
letter-spacing の定義
草案 letter-spacing をアニメーション可能として定義。
CSS Level 2 (Revision 1)
letter-spacing の定義
勧告 変更なし。
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
letter-spacing の定義
勧告 SVG での初回定義
CSS Level 1
letter-spacing の定義
勧告 初回定義
初期値normal
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承あり
メディア視覚
計算値an optimum value consisting of either an absolute length or the keyword normal
アニメーションの種類length
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
letter-spacingChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
SVG supportChrome 完全対応 1Edge 完全対応 12Firefox 未対応 なしIE 完全対応 10Opera 完全対応 ありSafari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
未対応  
未対応

関連情報