letter-spacingプロパティの説明
CSSの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プロパティの書き方を見ていきましょう。段落を複数配置し、フォントの既定値と比較した時の字間を確かめます。以下の例は、英文の字間を広げた場合と狭めた場合の結果です。
<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>
.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;
}