CSSで文字間を調整する方法と、最適な使い方についてまとめました。

文字間を調整するプロパティ「letter-spacing」

letter-spacing　は、文字と文字の間のスペースを調整する為のプロパティです。

 

 

基本的な構文は以下の通りです。

セレクタ {
letter-spacing: 値;
}

値の指定パターン

normal
ブラウザによって自動的に文字間が設定されます。
基本的には文字間が0（letter-spacing: 0）になります。

 

数値 + px
pxで文字間を指定します。
指定した値がそのまま文字間になります。

 

数値 + em
フォントサイズに対する比率で文字間を指定します。
1em＝「文字の高さ」となります。
0.1em = 文字の高さの1/10の大きさ
0.5em=文字の高さの1/2の大きさ

letter-spacingの指定はemがおすすめ

pxで「letter-spacing: 10px; 」と指定した場合
フォントサイズが16pxの時：10pxの文字間
フォントサイズが30pxの時：10pxの文字間
フォントサイズ30px に対してはちょうどよい文字間でも、フォントサイズ16pxには広すぎる…ということが起きやすくなり、個別に文字間を指定する必要がでてきてしまいます。

 

emで「letter-spacing: 0.1em; 」と指定した場合
フォントサイズが16pxの時：1.6px相当の文字間
フォントサイズが30pxの時：3px相当の文字間

フォントサイズが変わっても同じ比率の文字間になるので、個別に文字間を指定する必要がなくなります。

なお、emで指定する場合、0.05em～0.1emくらいでの指定が、
読みやすい文字間とされています。

値をマイナスで指定すれば、文字間を狭めることができる

セレクタ {
letter-spacing: -0.1em;
}
という風に、マイナスの値を指定することで、文字間を狭めることができます。

 

letter-spacingを使用して、文字が見やすい適切な文字間を指定しましょう！