letter-spacing：文字同士の間隔を指定する

letter-spacingプロパティの説明

letter-spacingは、文字同士の間隔を指定します。この値に正の数値が指定された場合は文字と文字の隙間が広がり、負の数値が指定された場合は文字と文字の隙間が狭まります。

半角スペースで区切られた単語同士の間隔指定するには、word-spacingを使用して下さい。カーニングの規則を変える場合は、font-kerningというプロパティが用意されています。

letter-spacingに指定できる値

normal

既定値どおりの字間でフォントを並べます。この値はユーザーエージェントが文字列を両端揃えするために字間を変えることを許可します。

<length>

既定の字間に加える空間の寸法を表します。CSSで使用できる単位つきの数値が使用可能です。負の値を使用して字間を詰めることも可能ですが、ブラウザの実装に依存します。この値はユーザーエージェントが文字列を両端揃えするために字間を増減させることを制限します。

letter-spacingの使い方とサンプル

letter-spacingプロパティの構文は以下の通りです。

/* キーワード値 */
letter-spacing: normal;

/* <length>値 */
letter-spacing: 3px;
letter-spacing: 0.3em;
letter-spacing: -1px;

/* グローバル値 */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;

letter-spacingの実例

それでは実際にletter-spacingプロパティの書き方を見ていきましょう。段落を複数配置し、フォントの既定値と比較した時の字間を確かめます。以下の例は、英文の字間を広げた場合と狭めた場合の結果です。

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box > h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
.samp_box > p {
	margin: 0;
	padding: .5rem;
	background-color: #fff;
}
#ls_n {
	letter-spacing: normal;
}
#ls_em {
	letter-spacing: 0.3em;
}
#ls_px {
	letter-spacing: -3px;
}

<section class="samp_box">
	<h2>letter-spacing: normal;</h2>
	<p id="ls_n">Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.</p>
	<h2>letter-spacing: 0.3em;</h2>
	<p id="ls_em">Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.</p>
	<h2>letter-spacing: -3px;</h2>
	<p id="ls_px">Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.</p>
</section>