2022-09-05

CSS: 文字の間隔を調整する letter-spacing

CSSで文字と文字の間隔（スペース）を調整する場合は、 「letter-spacing」を使用します。

特定の文字列を目立たせたい場合などに、フォントサイズを大きくして、 文字の間隔をあけて表示させることがあります。

letter-spacing 使用例

letter-spacing: 10px;

上の場合は文字間隔が10pxになります。 単位はpxかemを指定します。

letter-spacing サンプル

文字間隔が10pxと20pxの文字列を表示します。

HTML

<p><span class="le-space10">文字間隔10px</span></p>

<p><span class="le-space20">文字間隔20px</span></p>

CSS

<style>

.le-space10 {
	letter-spacing: 10px;
	font-size: 18px;
	font-weight: bold;
}

.le-space20 {
	letter-spacing: 20px;
	font-size: 18px;
	font-weight: bold;
}
</style>