CSSの「letter-spacing」で文字間隔を詰める・広げる
みなさんCSSの「letter-spacing」を使いこなしていますでしょうか？
letter-spacingを設定することで文字の間隔を詰める・広げることができるようになります。
文字間隔を気にするのはエンジニアさんよりもデザイナーさんの方が多いかと思いますが、エンジニア視点でもletter-spacingというプロパティが存在していて、その設定方法を知っておいていつでも利用できるようにしておくというのは重要です。
そこでこの記事ではletter-spacingの使い方や、設定する単位についてご紹介していきます。
CSSの「letter-spacing」で文字間隔を詰める・広げる方法
それでは早速letter-spacingを使ってみましょう。
letter-spacingの書き方
letter-spacingの書き方は下記の通りです。
letter-spacing: 値;
値の部分次第で文字間隔を詰める・広げる事ができます。下記はよくある指定パターンでletter-spacingで文字間隔を調整した例です。
<style>
p {
font-size: 14px;
}
.zero {
letter-spacing: 0;
}
.normal {
letter-spacing: normal;
}
.px {
letter-spacing: 2px;
}
.em {
letter-spacing: 1.2em;
}
</style>
<p class="zero">あいうえお</p>
<p class="normal">あいうえお</p>
<p class="px">あいうえお</p>
<p class="em">あいうえお</p>いかがでしょうか？
letter-spacingに「0」を設定した場合と「normal」を指定した場合は文字間隔が同じに見えますね。一方で「2px」を指定した場合は若干文字間隔は広がり、「1.2em」を指定すると更に広がっています。
ではletter-spacingで設定した値について見ていきましょう。
letter-spacingの値
letter-spacingで設定できる値です。
normal
normalはデフォルト値です。通常指定することがないかもしれません。実際は0が設定
されていることが多いですが、その値はブラウザに依存します。
数値+px（例: 2pxなど）
pxで指定する方法です。指定したピクセス数で文字間隔を調整することが出来ます。割と設定されている事が多い形式です。
数値+em（例: 1.2em）
pxに比べ、emの場合は相対的な値になります。フォントのサイズに応じて文字間隔が調整されます。
emで設定した文字の高さによって変わります。つまり0.5emの場合は文字の高さの半分を文字間隔として空けるという形になります。
下記の例ではemを「0.5em（文字の高さの半分）」「0.25em（文字の高さの半分の半分）」で指定した例です。
<style>
p {
font-size: 14px;
}
.normal {
letter-spacing: normal;
}
.em-half {
letter-spacing: 0.5em;
}
.em-half-half {
letter-spacing: 0.25em;
}
</style>
<p class="normal">あいうえお</p>
<p class="em-half">あいうえお</p>
<p class="em-half-half">あいうえお</p>文字間隔を詰める
ここまで「letter-spacing」に単位は違えど正の値の数を設定してきましたが、letter-spacingには負の値を設定することが出来ます。
お気づきの方もいらっしゃるかもしれませんが、負の値を設定することで文字間隔を詰めることが出来ます。
例を見ていきましょう。
<style>
p {
font-size: 14px;
}
.normal {
letter-spacing: normal;
}
.minus-px {
letter-spacing: -2px;
}
.minus-em {
letter-spacing: -0.5em;
}
</style>
<p class="normal">あいうえお</p>
<p class="minus-px">あいうえお</p>
<p class="minus-em">あいうえお</p>いかがでしょうか。「-0.5em」では文字がつまりすぎて、文字が重なってしまいましたね。ぜひちょうどいい字間となる値を見つけてみましょう。
最後の文字の後ろまで間が空いてしまう問題
letter-spacingを使用していると、たしかに文字間隔を広げる事はできますが、指定している文章の最後の文字の後ろまで間が空いてしまう問題があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
span {
letter-spacing: 1.5em;
}
</style>
</head>
<body>
<p>あいうえお<span>かきくけこ</span>さしすせそ</p>
</body>
</html>この問題の対処法を下記の記事で紹介していますので、最後の文字の後ろの間を取りたい方はぜひ参考にしてみて下さい。
letter-spacing以外で文字詰め・カーニングする方法
今回ご紹介したletter-spacingで文字詰めが可能ですが、letter-spacing以外で文字詰め・カーニングする方法があります。
CSSの「font-feature-settings」を使用することで、文字詰め・カーニングが手軽に行なえます。font-feature-settingsの使い方については下記の記事を参考にしてみて下さい。
なぜかletter-spacingが効かないときにfont-feature-settingsで出来た！ということもあります。
