HTML一覧CSS一覧CSS関数FlexboxシミュレーターCSS一覧

文字

letter-spacing 文字と文字の間隔を変える

重要度3 / 5

意味

文字と文字のあいだを広げたり、詰めたりするときに使います。見出しを少し広げると、単語のまとまりが見えやすくなることがあります。文章の本文を広げすぎると、読みにくくなります。

0.04em のように、文字サイズに対する割合で書くと、font-size を変えても間隔の印象が残りやすいです。

コード

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML
<h2>文字の間隔を少し広げた見出し</h2>
CSS
h2 {
  letter-spacing: 0.08em;
}

プレビュー

ブラウザ対応

主要ブラウザの対応状況
ブラウザ対応
Chrome1〜
Firefox1〜
Safari1〜
Edge12〜
Chrome Android18〜
Safari iOS1〜

出典: MDN Web Docs(`@mdn/browser-compat-data`)