1. TOP
  2. html&CSS入門
  3. 文字間を調整する「letter-spacing」(レタースペーシング)の使い方

文字間を調整する「letter-spacing」(レタースペーシング)の使い方

文字間とは文字と文字の間のスペースのことです。

同じ文章でも、文字間の詰まりすぎた文章は読みづらく、逆に適切な文字間であれば読みやすくなるので、適切な値を設定しておきましょう。

これだけは覚えておこう

文字間を調整するには、letter-spacingプロパティを利用します。

letter-spacing: 値

値は「0.05em~0.1em」を設定するのが読みやすいでしょう。迷ったらbodyに下記のように設定しておきましょう。

letter-spacing: 0.05 em;

「letter-spacing」の詳細

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

letter-spacing: 値

値には、キーワードやpx, emなどで指定します。指定された値が、文字と文字の間のスペースになります。

たとえば、値に10pxを指定すると、文字と文字の間に10pxのスペースが生まれます。

ほとんど使うことはありませんが、文字のスペースにはマイナスの値を指定することができます。マイナスを指定すると文字を詰まらせることもできます。

値の種類

normal

letter-spacing: normal;

ブラウザの初期値が設定されます。基本的に追加スペースは0と計算されます。読みやすさに関しては個人差がありますが、初期値のままだと少し狭いと感じます。

px

letter-spacing: 3px;

文字間の幅をpxで指定します。指定した値がそのまま文字と文字とのスペースになります。

em

letter-spacing: 1.5em;

現在のフォントサイズに対する比率で指定します。1emの場合フォントサイズと同じ、1.5emの場合フォントサイズの1.5倍という風になります。

相対的に設定できる「em」を使おう

基本的に文字間はemを使って指定するのがおすすめです。

pxで指定すればわかりやすいような気がしますが、WEBサイトにはいろんなフォントサイズが使われるので、px指定だと毎回一つ一つに最適なletter-spacingを設定しなければなりません。

一方emであれば、その時のフォントサイズの比率を指定できるので、一箇所指定すれば良いので効率的です。実際多くのサイトでemが使われています。

全体は「em」で指定しておき、気になるところがあれば、個別に調整するという使い方が良いでしょう。

letter-spacingの最適値

文字間は印刷物もWEBサイトもフォントサイズの5%~10%が読みやすいとされています。

emの場合は「0.05em~0.1em」で設定するのが良いでしょう。

タイトルなどの装飾で、周りとの差別化を図りたい場合は、あえて文字間を大きく広げることはありますが、基本的には0.05em~0.1em」を設定しておけば、どんな文字サイズでも違和感なく読みやすい文章になります。

実際の使い方

letter-spacingは子要素にも継承されます。

ですのでbody要素なので指定しておけば、ページ全体に反映されます。

body {
     letter-spacing: 0.1em;
}

【上級編】CSSで自動カーニング

ここからは上級編です。より文章の読みやすさを追求するための方法をお伝えします。

これからやることはCSSでカーニングを行うことです。最近ではCSSで自動的にカーニングをできるようになりました。

カーニングというのは文字間を文字ごとの大きさに応じて個別に調整することです。

カーニングを行う理由

フォントの多くは、正方形の空間の中に文字が収まるように作られています。

そのため、句読点や欧文(アルファベット)、小さい文字(ゃ、ゅ、ょなど)などは、正方形の中の隙間が大きく、他の文字と同じ文字間ではバランスが悪く見えます。

さらに、文字の形によっても、文字間を詰めたほうがよい文字や逆に離したほうが良いとか、文字の形によって特性があります。

そのような文字の特性をしっかりと理解して、文字間を1文字1文字調整すると、とてもバランスがよく読みやすい文章が出来上がります。

CSSでカーニング

カーニングは印刷物のデザインでは日常的に行われていることです。

WEBの世界では、「letter-spacing」がありますが、これは指定した要素に一律同じ行間を設定するものなので、1文字ずつ細かい調整には向かない方法でした。

ただ数年前から、文字のタイプに合わせて自動でカーニングをしてくれるプロパティが登場しました。

それがfont-feature-settingsプロパティです。以下のように設定するだけで自動でカーニングしてくれます。

font-feature-settings: "palt"

OpenTypeフォント限定

これは全てのフォントで有効なわけではなく、OpenTypeフォントという形式のファイルでなければなりません。

OpenTypeフォントは文字に合わせたカーニング情報を保持しているので、CSSでその情報を有効化するだけで、1文字ずつ適切な文字間に整えられます。

さらに色んなオプションがあるのですが全ては紹介しきれません。興味のある方は下記をご覧ください。

CSS での OpenType 機能の構文

問題点

文字間を整えたほうが読みやすく、見た目も整うのでいいことづくめですが、いくつか問題点もあることを覚えておきましょう。

全てのフォントで使えるわけではない

前述した通り、全てのフォントで使えるわけではありません。ヒラギノや游ゴシックは対応していますが、メイリオは対応していないので自動カーニングは使えません。

safariのバージョン10のバグ

また、safariのバージョン10で、リンクの前に半角文字があると文字が潰れるというバグがありました。

現在は修正されているのであまり気にすることはないかも知れませんが、古いバージョンのまま使っている人がいたら、そのようなバグがあります。

自動カーニングを設定すると文字間が詰まる

他にも、自動カーニングを設定すると文字間が詰まるので、自動カーニングをかける前よりも広めのletter-spacingを指定する調整が必要になります。

とはいえメイリオを使う機会は減ってきていますし、safariのバージョン10はかなり古いのでシェも少なくなってきました。

多少の問題を踏まえても、よりよく見えるユーザーの方が圧倒的に多いので自動カーニングは使う価値があると思います。

まとめ

  • 文字間とは文字と文字の間のスペースのこと
  • 文字間を調整するには、letter-spacingプロパティを利用する
  • letter-spacingの値には「em」を使おう
  • フォントサイズの5%~10%の文字間が読みやすい
  • CSSで自動カーニングも出来る