CSSの「letter-spacing」で文字間隔を詰める・広げる方法をご紹介!【単位/カーニング】

CSSの「letter-spacing」で文字間隔を詰める・広げる方法をご紹介!【単位/カーニング】

CSSの「letter-spacing」で文字間隔を詰める・広げる方法をご紹介します。letter-spacingの値の指定の仕方、単位や負の値を指定して文字間隔を詰める方法までご紹介していきます。letter-spacingを使いこなして文字間隔を調整しましょう。


目次[非表示]

  1. CSSの「letter-spacing」で文字間隔を詰める・広げる
  2. CSSの「letter-spacing」で文字間隔を詰める・広げる方法
  3. 最後の文字の後ろまで間が空いてしまう問題
  4. letter-spacing以外で文字詰め・カーニングする方法

CSSの「letter-spacing」で文字間隔を詰める・広げる

letter-spacingで文字間隔調整

みなさんCSSの「letter-spacing」を使いこなしていますでしょうか?

letter-spacingを設定することで文字の間隔を詰める・広げることができるようになります。

文字間隔を気にするのはエンジニアさんよりもデザイナーさんの方が多いかと思いますが、エンジニア視点でもletter-spacingというプロパティが存在していて、その設定方法を知っておいていつでも利用できるようにしておくというのは重要です。

そこでこの記事ではletter-spacingの使い方や、設定する単位についてご紹介していきます。

CSSの「letter-spacing」で文字間隔を詰める・広げる方法

それでは早速letter-spacingを使ってみましょう。

letter-spacingの書き方

letter-spacingの書き方は下記の通りです。

letter-spacing: 値;

値の部分次第で文字間隔を詰める・広げる事ができます。下記はよくある指定パターンでletter-spacingで文字間隔を調整した例です。

いかがでしょうか?

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(文字の高さの半分の半分)」で指定した例です。

文字間隔を詰める

ここまで「letter-spacing」に単位は違えど正の値の数を設定してきましたが、letter-spacingには負の値を設定することが出来ます。

お気づきの方もいらっしゃるかもしれませんが、負の値を設定することで文字間隔を詰めることが出来ます。

例を見ていきましょう。

いかがでしょうか。「-0.5em」では文字がつまりすぎて、文字が重なってしまいましたね。ぜひちょうどいい字間となる値を見つけてみましょう。

最後の文字の後ろまで間が空いてしまう問題

letter-spacingを使用していると、たしかに文字間隔を広げる事はできますが、指定している文章の最後の文字の後ろまで間が空いてしまう問題があります。

この問題の対処法を下記の記事で紹介していますので、最後の文字の後ろの間を取りたい方はぜひ参考にしてみて下さい。

letter-spacingで最後の文字の後ろまで間があいてしまう問題の対処法!

CSSのletter-spacingを使うことで字間を詰めたり、間をあける事ができますが、一方で最後の文字の後ろにもスペースができてしまう問題があります。letter-spacingを使った際の盲点ですが、デザイン上のバグとならないようにしっかりと対処しましょう。対処法をご紹介していきます。

Thumb

letter-spacing以外で文字詰め・カーニングする方法

今回ご紹介したletter-spacingで文字詰めが可能ですが、letter-spacing以外で文字詰め・カーニングする方法があります。

CSSの「font-feature-settings」を使用することで、文字詰め・カーニングが手軽に行なえます。font-feature-settingsの使い方については下記の記事を参考にしてみて下さい。

なぜかletter-spacingが効かないときにfont-feature-settingsで出来た!ということもあります。

CSSの「font-feature-settings」で文字詰め・カーニングが簡単にできる!

CSSの「font-feature-settings」使うことで文字詰め・カーニングが行なえます。これまで文字を画像化してカーニングに対応していた方は必見です。font-feature-settingsの使い方と指定する値でどのように文字詰めが行われるかご紹介していきます。

Thumb