Web制作

CSSでできるカーニング！文字間を調整しよう

Photoshopなどのデザインソフトで文字詰めの調整はできるけど、コーディングしたテキストの文字どうしの空き具合がとても気になる人いませんか？
デザインの時はきれいに収まっていたのに、コーディングすると改行がおかしくなる・・・そんな悩みを解決する方法を紹介します。
画像文字にすることなく、CSSでカーニングしたい！という方に「font-feature-settings」プロパティを指定するだけで自動でカーニングができるんです！

1 「font-feature-settings」使用方法
2 OTFのプロポーショナルメトリクスについて
3 プロポーショナルメトリクスが無効なフォントも存在している
4 まとめ

「font-feature-settings」使用方法

使い方はとても簡単で、CSSで「font-feature-settings」プロパティを指定するだけです。
書き方は下記のようになります。

.body {
font-feature-settings: "palt";
}

たったこれだけ指定するだけで、キレイに文字詰めされます。

OTFのプロポーショナルメトリクスについて

OpenTypeフォント（OTF）には、フォントの字間情報を制御する「プロポーショナルメトリクス」という機能があります。
フォントデザイナーが定めた最適な文字間の情報が、OpenTypeフォントに含まれているのです。

プロポーショナルメトリクスはOpenTypeフォントの機能なので、AdobeのPhotoshopやIllustrator、AppleのKeynoteなどのソフトのように対応していれば利用できます。

そして、「font-feature-settings」はOpenTypeのオプション機能を指定するプロパティです。
プロポーショナルメトリクスを有効にするには、横組みの文字詰めにはpalt（全角の幅で設定するようにデザインされた字形のスペースを、個々の横の幅に収まるように再調整する指定）を利用します。

プロポーショナルメトリクスが無効なフォントも存在している

残念ながら、このプロパティはすべてのフォントで使えるわけではありません。
利用できる条件は、OpenTypeフォントであることとプロポーショナルメトリクス情報が含まれていることです。
「游ゴシック体」や「游明朝体」、「Noto Sans CJK JP」などで利用できます。

一昔前までよく使用されていた「メイリオ」は、プロポーショナルメトリクスの情報は含まれていません。
そのため、「メイリオ」に対してはプロポーショナルメトリクスで字間が詰まらないので注意が必要です。
どうしても「メイリオ」が使用したい人の対策としては、letter-spacingを使用して詰めるか、画像で作成するしか方法はないと思います。

まとめ

僕は基本文字が詰まっている方が好きなので、bodyに設定してしまっているのですが、部分的に使用することも可能です。
タイトル部分などで使用するとインパクトが出て効果的ではないでしょうか？
ほとんどのブラウザで対応しているので、ぜひみなさんも一度、font-feature-settingsを使用してみてください。