タイポグラフィ（レイアウト）

letter-spacing

文字同士の間隔を指定します

value	description
`normal` (default)	フォントの通常の間隔を適用します	あいうえお
`0px`	文字の間隔を指定する	あいうえお
`2px`	文字の間隔を指定する	あいうえお
`0.2em`	文字の間隔を指定する	あいうえお
`-1px`	文字の間隔に負の値を指定する	あいうえお

Demo

Windowsで「コンピューター」の世界が広がります。

<p>Windowsで<span class="style-0">「コンピューター」</span>の世界が広がります。</p>
<p>Windowsで<span class="style-1">「コンピューター」</span>の世界が広がります。</p>
<p>Windowsで<span class="style-2">「コンピューター」</span>の世界が広がります。</p>
<p>Windowsで<span class="style-3">「コンピューター」</span>の世界が広がります。</p>
<p>Windowsで<span class="style-4">「コンピューター」</span>の世界が広がります。</p>

.style-1 {
  letter-spacing: 1px;
}
.style-2 {
  letter-spacing: 4px;
}
.style-3 {
  letter-spacing: 0.2em;
}
.style-4 {
  letter-spacing: -2px;
}

概要

文字の間隔を指定します。負の値も指定できますが、デザインが崩れる可能性があります。見出し、太字、強調箇所などで文字間隔を広げる場合に用いられます。

このサイトでは、helloのようなコード表記の部分で、letter-spacing: -0.025em;を指定しています。

よく利用される値

px, emを抑えておけば良いでしょう。emを利用すると「0.1 文字分のスペース（0.1em）」のように、文字サイズからの割合で指定することができます。

参照

参照

letter-spacing

Demo

概要

よく利用される値

関連

参照