プロポーショナルメトリクスが有効になるフォントの一覧

このCSSプロパティーを使ったからといって全てのフォントで自動文字詰めができるわけではありません。利用できる条件は、OpenTypeフォントであることとプロポーショナルメトリクス情報が含まれていることの2点です。有名なフォントでいうと「ヒラギノ角ゴシック体」や「ヒラギノ明朝体」、「游ゴシック体」「游明朝体」「Noto Sans CJK JP」で利用できます。

Windows環境で馴染みある「メイリオ」は日本語部分が等幅として設計されているため、プロポーショナルメトリクスの情報は含まれていません。そのため、「メイリオ」に対してはプロポーショナルメトリクスで字間が詰まりません。

kerning-font-settings

游ゴシックではプロポーショナルメトリクスは必須

WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。ヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを積極的に適用したほうがいいでしょう。

kerning-font-padding

Webフォントにもプロポーショナルメトリクスは効果的

デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。美観を目的に導入するなら、Webフォントこそ文字詰めはしっかり適用するべきです。

対応環境：ほぼ全てのブラウザで利用可能

これだけ便利なCSSですが、どれだけの環境で利用できるか気になりますよね？ Can I use…を確認すると、現行のモダンブラウザーではほとんど対応していることがわかります。

kerning-caniuse

ただし、一部のブラウザーで不具合があるので注意が必要です。確認した限り次の軽微な不具合があったので対策方法とともに紹介します。

  1. Microsoft Edge 14やIE 11において、text-align:justifyとtext-justify:inter-ideographとfont-feature-setting : "palt"を組み合わせて使った際に、両端揃えにならない
  2. iOSとmacOSのSafari 10において、font-feature-setting : "palt"を使うと、約物やくもの（句読点・疑問符・括弧・アクセント）の直後にリンク要素があると、約物の文字の間隔が潰れる

Safariのプロポーショナルメトリクスの不具合

①に関しては見栄えに関するものでクリティカルな問題ではないので目をつぶっても支障ないでしょう。②に関しては、Safari 10対策としてfont-feature-settings : "palt"は指定せず、font-feature-setting : "pkna"を指定するのが無難な対策。後者は「かな」のみプロポーショナルメトリクスを有効にするため、問題の起きる約物を回避できます。さらなる提案としてはブラウザ分岐して、Safariのみpknaを指定し、それ以外のブラウザではpaltを指定するとベストです。

まとめ

従来、文字詰めにこだわりたいときはCSSのletter-spacingを一文字ずつ適用しました（参考記事「HTMLで文字詰めするタイポグラフィー用JS | fladdict」）。この方法はJavaScriptによって文字列を判別しCSSで調整するという高度な方法のため、精度の高い文字詰めができますが、採用しているサイトは少なかったのではないでしょうか。

kerning-dentsu

▲タイポグラフィにこだわったサイトの例として。「電通報」では一字ごとに要素を分解し、それぞれに文字詰めの情報を適用している

それに対して、CSSのfont-feature-settingsプロパティーはOpenTypeフォントがもつオプション機能を有効にするだけなので、実装は簡単です。腕に自信のあるフロントエンドエンジニアであれば、両方の手法を組み合わせて完璧な文字詰めに挑戦するのもいいでしょう。font-feature-settingsプロパティーとletter-spacingプロパティーは同時に使えます。

ICS MEDIAではfont-feature-settingsを採用して2ヶ月ほど経過しましたが、問題なく運用できています。特に見出しの文字が引き締まり、スマートフォンでもパソコンでも読みやすくなりました。ぜひ皆さんもfont-feature-settingsを使っていきませんか。