文字の間隔 letter-spacing

letter-spacing

1文字の後の、次の文字までの間隔。

値

normal
または数値+単位(emやpx)

.normal{
letter-spacing: normal;
}

.hiroi{
letter-spacing: 2em;
}

//*マイナスも有効*//
.semainasu1{
letter-spacing: -0.2em;
}

.semainasu2{
letter-spacing: -0.5em;
}

//*IEでは、letter-spacingを指定した改行が連続すると、1つ無効になる*//
//*normalか0を指定しておく*//
br{
letter-spacing: 0;
}

<p class="normal">
文字間隔について<span class="normal">(これはノーマル)</span>
</p>
<p class="hiroi">
文字間隔について<span class="normal">(2em　文字の後に間隔が現れる)</span>
</p>
<p class="semainasu1">
文字間隔について<span class="normal">(これは−0.2em)</span>
<p class="semainasu2">
文字間隔について<span class="normal">(これは−0.5em　読めなくなった)</span>
</p>
</html>

文字間隔とフォントサイズの関係

<p style="letter-spacing: 0.5em; font-size: 1em;">文字詰め</p>

<p style="letter-spacing: 0; font-size: 1em;">文字詰め</p>

<p style="letter-spacing: -0.1em; font-size: 1em;">文字詰め</p>


<p style="letter-spacing: 0.5em; font-size: 2em;">文字詰め</p>

<p style="letter-spacing: 0; font-size: 2em;">文字詰め</p>

<p style="letter-spacing: -0.1em; font-size: 2em;">文字詰め</p>