「Webでは文字詰めはできない」と諦めていませんか？ 美しいタイポグラフィーのためには文字詰めは「当たり前」というデザイナーは多く、DTPやグラフィックデザインの界隈では基礎テクニックの一つされています。
そんな文字詰めですが、HTMLでも実はCSSのfont-feature-settingsプロパティーを指定するだけで自動カーニングができます。ほとんどのブラウザがサポートしており、実務でも十分使えるようになってきました。今回はそんなfont-feature-settingsプロパティーの魅力と使いどころをくまなく紹介します。
この記事のポイント
使い方は簡単。CSSで次のプロパティーを設定するだけです。
.selector {
font-feature-settings : "palt";
}左が未指定の状態、右がCSSを適用した状態です。文字が引き締まって表示されています。
たったこれだけのコードで自動カーニングが有効になり、HTML文章の見た目が見違えるように引き締まります！ 「今すぐ使わないと損！ さっそくコピペして試す」と早まる前に、まずは和文フォントの基本的なところから理解を深めておきましょう。
目次
- そもそもウェブの和文フォントは等幅で表示されてた
- OpenTypeフォントには字詰のための情報が含まれている
- CSSのfont-feature-settingsはOTFのオプション機能を有効にできる
- プロポーショナルメトリクスが有効になるフォントの一覧
- 対応環境：ほぼ全てのブラウザで利用可能
そもそもウェブの和文フォントは等幅で表示されてた
font-familyで指定する日本語のデバイスフォント。多くの場合は、「メイリオ」「ヒラギノ角ゴシック体」が定番でしょうか。最近だと「游ゴシック体」も注目を集めていますね。これらのフォントはOpenTypeフォントという種類で、正方形の仮想ボディーの中に字面が収まるようにデザインされています。
フォントをそのまま打っただけ（ベタ打ちするだけ）だとOpenTypeフォントはこの正方形が連続して配置されるので、日本語文章は等幅の表示となります。嘘だと思ったら「メイリオ」「ヒラギノ角ゴシック体」「游ゴシック体」といった定番フォントで検証したので次の図をご覧ください。原稿用紙の升目のようにキッチリと文字が配置されていることを確認できます。
面白いことに、全角英数字を使っているニュースサイトではこの現象がよくわかります。これはmacOSのChrome 54での表示結果です。
等幅で表示されている文章は仮名や記号の字間が不自然に開いてしまうため、読みにくくなり見栄えが損なわれます。日本のWebでは長い間、この問題は放置されていました。デザイナーは「字間をなんとかしてほしい！」と訴えても、HTMLコーダーは「ブラウザの仕様だから無理😥」と返していたのではないでしょうか。画像文字…、旧石器時代にはそんな手法もありましたね。
※和文等幅にならない例外として「ＭＳ Ｐゴシック」や「Osaka」はプロポーショナル幅で作られたTrueTypeフォント（TTF）のため、これらは等幅ではなくプロポーショナル幅で表示されます。ただ、「ＭＳ Ｐゴシック」や「Osaka」は古臭くて使いたくないですよね…。
OpenTypeフォントには字詰のための情報が含まれている
CSSの前に一般的なフォントの話をします。OpenTypeフォント（OTF）にはタイポグラフィのための様々なオプション機能があります。この一つにフォントの字間情報を制御する「プロポーショナルメトリクス」という機能があります。フォントデザイナーが設計時に定めた最適な字間の情報が、OpenTypeフォントに含まれているのです。
プロポーショナルメトリクスを有効にすれば、フォントに含まれる字間情報を参照されるので、次のように字間が詰まります。特にカタカナの「ォ」と「ト」が詰まっているのが確認できるでしょう。
余談ですが、プロポーショナルメトリクスはOpenTypeフォントの機能なので、ソフトウェアが対応していれば利用できます。例えば、AdobeのPhotoshopやIllustrator、AppleのKeynoteでは次のオプションを指定すればプロポーショナルメトリクスを有効にできます。他のソフトウェアでは以前より一般的に利用されていたので、ブラウザで利用できないことを不便に考えていたウェブデザイナーは多いことでしょう。
和文フォントの理解が深まったところで、HTMLの文字詰めを学んでいきましょう。次のページではOpenTypeフォントのプロポーショナルメトリクスを有効にするCSSについて解説します。
