CSS3のfont-feature-settingというプロパティでプロポーショナルメトリクスなどの文字詰めが可能になりました。Webにおける文字詰めは今までできないものだったので、文字組みに関してそこまで気にならなかったのですが、紙や書籍のデザイナーからすると、気になるようです。
特に役物周り、“」「”のような組み合わせの際に妙なアキができて気持ちが悪いようです。かくいう自分も「IoT」という単語のIとoとTのアキが気になっていますが。
実はこのサイトもプロポーショナルメトリクスを適用しているので、上記の表現も、そんなに変にはならないはずです。
font-feature-settingsというプロパティ
では実際にどうやるのかと言うと、CSSでfont-feature-settings: "palt";と指定すればOKです。ただし、以下の条件があります。
- 対応したブラウザであること
- カーニング情報などの情報を持ったフォントであること
対応ブラウザはモダンブラウザなら対応しています。フォントについては基本的にOpen Type (otf) であれば対応していますが、ファイルサイズ削減のためにサブセット化したフォントなどはカーニング情報も削除されている場合もあるので、効きません。(武蔵システムのフォントサブセッターを使った場合など)
具体的には、
- 游ゴシック
- 游明朝
- ヒラギノ角ゴシック
- ヒラギノ明朝
- Noto San CJK JP
- Noto Serif CJK JP
などは対応しています(メイリオは非対応)。また、Google Fontsの欧文書体や、モリサワなどが提供するWebフォントの多くも対応しています。
使う上でのポイント
プロポーショナルメトリクスを適用しますと、全体的に詰まりますので、個人の感想ですが、そのままでは少しきつい印象です。なのでletter-spacingを使って字間を少し空けて調整すると良さそうです。
ただし、その時非対応のブラウザ、フォントで閲覧した場合、文字詰めがなくなってアキが広くなってしまいます（例えばWindows7など）。その場合はCSSハックなどの対応か、切り捨てる必要があります。
また詰めた幅でレイアウトを組むと非対応ブラウザで文字が1段落ちたりする可能性もあります。
その他のfont-feature-settingsの設定
font-feature-settingsはプロポーショナルメトリクスのためだけの設定ではありません。"palt"のプロパティを変えることで、スワッシュやリガチャーなども設定できます。主に欧文の設定なので日本語環境ではあまり使わないかもしれませんが。
font-feature-settingsの設定については下記Adobeのページに詳しく書かれています。
余談:電通報も採用
font-feature-settingsがなかった頃、字詰めをするにはカーニング用のJSなどを使い、1文字1文字spanタグなどで囲ってletter-spacingによって字詰を行っていました。その具体例として電通報のページがそうだったのですが、いつの間にかfont-feature-settingsによる指定になったようです。