letter-spacing

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

letter-spacingCSS のプロパティで、テキストの水平方向の字間のスペースに関する挙動を設定します。この値はテキストを描画する際に文字間の自然な空間に追加されます。 letter-spacing が正の値であった場合は、文字と文字の間が開き、 letter-spacing が負の値であった場合は、文字と文字が互いに近づきます。

試してみましょう

構文

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

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

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

normal

現在のフォントでの通常の字間になります。 0 の値とは異なり、この値はユーザーエージェントが文字列を両端揃えするために字間を変えることを許可します。

<length>

既定の字間に加える字間のスペースを指定します。負の値も指定可能ですが、実装に依存した制限があるかもしれません。ユーザーエージェントは文字列を両端揃えするために、字間スペースをさらに増減させることはありません。

アクセシビリティ

正と負のどちらでも、大きすぎる値を letter-spacing に指定すると、スタイル設定が適用された語句が読みにくくなります。 とても大きな正の値でスタイル設定されたテキストの場合、文字と文字の間隔が広すぎて、語句がバラバラの文字の集まりとして現れることがあります。 とても大きな負の値でスタイル設定されたテキストの場合、文字と文字が重なり合って、語句が認識できなくなることがあります。

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

国際化の考慮

書き言葉の中には、字間を適用してはいけないものがあります。例えば、アラビア文字を使用する言語では、次の例のように、つながった文字が視覚的につながったままであることが求められます。字間スペースを適用すると、テキストが壊れたように見えてしまいます。

شسيبتنمك

公式定義

初期値normal
適用対象すべての要素。 ::first-letterおよび::first-line にも適用されます。
継承あり
計算値絶対的な長さまたはキーワード normal のどちらかから成る最適値
アニメーションの種類length

形式文法

letter-spacing = 
normal |
<length>

字間の設定

HTML

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

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;
}

結果

仕様書

Specification
CSS Text Module Level 3
# letter-spacing-property
Scalable Vector Graphics (SVG) 2
# LetterSpacingProperty

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
letter-spacing
normal
On SVG elements

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報