「Webでは文字詰めはできない」と諦めていませんか? 美しいタイポグラフィーのためには文字詰めは「当たり前」というデザイナーは多く、DTPやグラフィックデザインの界隈では基礎テクニックの一つとされています。

そんな文字詰めですが、HTMLでも実はCSSのfont-feature-settingsプロパティーを指定するだけで自動カーニングができます。ほとんどのブラウザがサポートしており、実務でも十分使えるようになってきました。今回はそんなfont-feature-settingsプロパティーの魅力と使いどころをくまなく紹介します。

この記事のポイント

使い方は簡単。CSSで次のプロパティーを設定するだけです。

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

左が未指定の状態、右がCSSを適用した状態です。文字が引き締まって表示されています。

kerning-font-feature-settings-palt

たったこれだけのコードで自動カーニングが有効になり、HTMLでの日本語の見た目が見違えるように引き締まります! 「今すぐ使わないと損! さっそくコピペして試す」と早まる前に、まずは和文フォントの基本的なところから理解を深めておきましょう。

目次

  1. そもそもウェブの和文フォントは等幅で表示されてた
  2. OpenTypeフォントには字詰のための情報が含まれている
  3. CSSのfont-feature-settingsはOTFのオプション機能を有効にできる
  4. プロポーショナルメトリクスが有効になるフォントの一覧
  5. 対応環境:ほぼ全てのブラウザで利用可能

そもそもウェブの和文フォントは等幅で表示されてた

font-familyで指定する日本語のデバイスフォント。多くの場合は、「メイリオ」「ヒラギノ角ゴシック体」が定番でしょうか。最近だと「游ゴシック体」も注目を集めていますね。これらのフォントはOpenTypeフォントという種類で、正方形の仮想ボディーの中に字面が収まるようにデザインされています。

kerning-font-rect

フォントをそのまま打っただけ(ベタ打ちするだけ)だとOpenTypeフォントはこの正方形が連続して配置されるので、日本語文章は等幅の表示となります。参考までに「メイリオ」「ヒラギノ角ゴシック体」「游ゴシック体」といった定番フォントで検証したので次の図をご覧ください。原稿用紙の升目のようにキッチリと文字が配置されていることを確認できます。

kerning-device-font

面白いことに、全角英数字を使っているニュースサイトではこの現象がよくわかります。これはmacOSのChrome 54での表示結果です。

kerning-nhk

先程紹介したサイトのように新聞のような組版を意識するなら和文等幅は適しているでしょう。ただ、今までは和文等幅しか選択肢がなかったため、デザイナーは「せめて見出しは文字詰めして欲しい!」と訴えても、HTMLコーダーは「ブラウザの仕様だから無理」と返事していたのではないでしょうか

※和文等幅にならない例外として「MS Pゴシック」や「Osaka」はプロポーショナル幅で作られたTrueTypeフォント(TTF)のため、これらは等幅ではなくプロポーショナル幅で表示されます。

OpenTypeフォントには字詰のための情報が含まれている

CSSの前に一般的なフォントの話をします。OpenTypeフォント(OTF)にはタイポグラフィのための様々なオプション機能があります。この一つにフォントの字間情報を制御する「プロポーショナルメトリクス」という機能があります。フォントデザイナーが設計時に定めた最適な字間の情報が、OpenTypeフォントに含まれているのです。

プロポーショナルメトリクスを有効にすれば、フォントに含まれる字間情報を参照されるので、次のように字間が詰まります。特にカタカナの「ォ」と「ト」が詰まっているのが確認できるでしょう。

kerning-propotional-metrics

余談ですが、プロポーショナルメトリクスはOpenTypeフォントの機能なので、ソフトウェアが対応していれば利用できます。例えば、AdobeのPhotoshopやIllustrator、AppleのKeynoteでは次のオプションを指定すればプロポーショナルメトリクスを有効にできます。他のソフトウェアでは以前より一般的に利用されていたので、ブラウザで利用できないことを不便に考えていたウェブデザイナーは多いことでしょう。

kerning-other-soft

和文フォントの理解が深まったところで、HTMLの文字詰めを学んでいきましょう。次のページではOpenTypeフォントのプロポーショナルメトリクスを有効にするCSSについて解説します。