このページで解説するコードの実行結果。

letter-spacing: normal;
|| Letter Spacing
|| Letter Spacing
letter-spacing: 1em;
|| Letter Spacing
|| Letter Spacing
letter-spacing: 20px;
|| Letter Spacing
|| Letter Spacing
letter-spacing: -3px;
|| Letter Spacing
|| Letter Spacing

なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。

CSS : デフォルトCSS
div {
    border:             2px solid blue; /*  境界線  */
    margin:             5px;            /*  外側の余白 */
    padding:            5px;            /*  内側の余白  */
    background-color:   #ffe;           /*  背景色  */
}
.lg {
    font-size:          150%;           /*  文字の大きさ  */
    background-color:   #fef;           /*  背景色  */
}

letter-spacingの概要

文字の間隔を指定する。

指定する値は「 normal (デフォルト値) 」か「数値(+ 単位)」。

normalはブラウザやフォント・ファミリーに依存するが、一般的に0と同値である。

なお、単語の間隔はword-spacingで指定する。

CSsプロパティ指定する間隔
letter-spacing文字の間
word-spacing単語の間

無指定、normal0

以下の場合、letter-spacingはデフォルトになる。

  • letter-spacingの指定が無い場合
  • normal
  • 0
HTML : 適用するHTML
<div class="sample">    || Letter Spacing   </div>
<div class="sample lg"> || Letter Spacing   </div>
実行結果
|| Letter Spacing
|| Letter Spacing
CSS : normal
.sample  {
    letter-spacing: normal;
}
実行結果
|| Letter Spacing
|| Letter Spacing
CSS : normal
.sample  {
    letter-spacing: 0;
}
実行結果
|| Letter Spacing
|| Letter Spacing

相対的な数値

emなどの相対的な数値を設定すると、フォント・サイズに対する広さになる。 つまり、フォントを大きくすると文字間も広くなる。

CSS : 1em
.sample  {
    letter-spacing:     1em;
}
実行結果
|| Letter Spacing
|| Letter Spacing
CSS : 2em
.sample  {
    letter-spacing:     2em;
}
実行結果
|| Letter Spacing
|| Letter Spacing

絶対的な数値

pxなどの絶対的な数値を設定すると、単語間は一定の広さになる。 つまり、フォント・サイズと無関係。

CSS : 10px
.sample  {
    letter-spacing:     10px;
}
実行結果
|| Letter Spacing
|| Letter Spacing
CSS : 20px
.sample  {
    letter-spacing:     20px;
}
実行結果
|| Letter Spacing
|| Letter Spacing

負の値

負の値を入れると、文字が重なる。

CSS : -3px
.sample  {
    letter-spacing:     -3px;
}
実行結果
|| Letter Spacing
|| Letter Spacing

Emmet : lts

記述Visual Studio Code
ltsletter-spacing: normal;
lts5letter-spacing: 5px;