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

この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:justifytext-justify:inter-ideographfont-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ヶ月ほど経過しましたが、マイナーな課題(※)はあるものの問題なく運用できています。特に見出しの文字が引き締まり、スマートフォンでもパソコンでも読みやすくなりました。

文字詰めの有無はサイトの雰囲気を含めて検討するべきですが、今まで和文等幅しか選択肢がなかったWebデザインに新しい選択肢が増えました。本文に使うのは影響が大きいというのであれば、見出しにだけ使ってみるといいかもしれません。ぜひ皆さんもfont-feature-settingsを使っていきませんか。

※macOS SierraとChromeの組み合わせで游明朝体のプロポーショナルメトリクスが有効にならない(OS X El Capitanだと有効になる)
※掲載当初、過剰な表現や技術用語の間違った説明があったため訂正いたしました。ご指摘いただいた読者の皆様、ありがとうございました。