WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： とみー
カテゴリー： マークアップ >CSS

Photoshopなどのデザインソフトで文字詰めの調整はできるけど、コーディングしたテキストの文字どうしの空き具合がとても気になる…
画像文字にすることなく、CSSでカーニングしたい！という方に「font-feature-settings」プロパティを指定するだけで自動でカーニングができます。

「font-feature-settings」使用方法

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

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

●デフォルト

●プロパティを指定

指定するとこんなにキレイに文字詰めされます。
たったこれだけで自動カーニングされ、「ス」と「ト」の間が詰まって見た目がスッキリします！

OTFのプロポーショナルメトリクスを有効にできる

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

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

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

プロポーショナルメトリクスが無効なフォント

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

Windowsでよく使用されている「メイリオ」は、プロポーショナルメトリクスの情報は含まれていません。
そのため、「メイリオ」に対してはプロポーショナルメトリクスで字間が詰まりません。
代わりにletter-spacingを使用して詰めるか、画像で作成するしかなさそうです。

まとめ

大きく目を引きたい見出しに使用すると引き締まって読みやすくなります。
ほとんどのブラウザで対応しているので、ぜひみなさんも一度、font-feature-settingsを使用してみませんか。