CSSのfont-feature-settingはOTFのオプション機能を有効にできる機能

CSSのfont-feature-settingsはOpenTypeのオプション機能を指定するプロパティーです。プロポーショナルメトリクスを有効にするには、横組みの文字詰めにはpalt(全角の幅で設定するようにデザインされた字形のスペースを、個々の横の幅に収まるように再調整する指定)を利用します。

font-feature-settingsプロパティーは機能名と有効可否(01、もしくはoffon)をセットで指定します。1(有効)を省略した場合は、1が指定されたと見なされるので有効として設定されます。

.selector {
  /* プロポーショナルメトリクスを有効にする指定 */
  font-feature-settings : "palt" 1;
}

kerning-font-feature-settings-palt

句読点や詰まりすぎを考慮すると

paltで句読点が詰まって読みづらいときは、別の指定であるpwid(プロポーショナル字形に置き換える指定)やpkna(仮名や仮名関連の字形セットをプロポーショナル字形に置き換える指定)という値を使うといいでしょう。どの値を使うべきかはフォントやサイトの雰囲気にあわせて検討ください(筆者も最適な指定を知るために常に試し続けています。良い指定があれば教えてください)。

また、フォントサイズやレイアウトによって最適な字間は異なるものなので、一概にプロポーショナルにすることだけが正解というわけではありません。字間が詰まりすぎているときはletter-spacingで整えることも検討するといいかもしれません。

複数の指定も可能

複数のオプション機能を有効にしたい場合はカンマで区切って指定します。例えば、プロポーショナルメトリクスと旧字体を同時に指定すると次のコードになります。

.selector {
  /* プロポーショナルメトリクスと旧字体指定 */
  font-feature-settings : "palt" 1, "trad" 1;
}

kerning-trad

tradを指定すると旧字体で表示されました。戦前の日本みたいですね!

自動カーニング以外にも面白い機能が盛りだくさん

プロポーショナルメトリクスだけでなはなく、OpenTypeフォントには様々なオプションが用意されています。例えば、スワッシュと合字ごうじ(リガチャー)を試してみましょう。

.font-swash {
  /* スワッシュを有効にする */
  font-feature-settings: "swsh" 1;
}

.font-liga {
  /* 任意の合字を有効にする */
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "dlig" 1;
}

kerning-liga

▲スワッシュ「swsh」を指定すると筆記体のぐるぐるが印象的に、任意の合字「dlig」を指定すると文字が合体して表示されました。タイポグラフィーで遊ぶのは面白いですね!

font-feature-settingsの様々なオプション機能はアドビの「CSS での OpenType 機能の構文」が参考になります。使いこなすとタイポグラフィーの自由度が広がり、幅広いデザインの制作に役立つでしょう。

次のページではプロポーショナルメトリクスが使えるフォントの種類やブラウザ環境について紹介します。