CSS の font-feature-settings でカーニングや合字を制御する

フォントには、文字同士の間隔を自動調整するカーニングや、複数の文字を 1 つにまとめる合字（リガチャ）といった高度な組版機能が埋め込まれています。これらの機能は OpenType フィーチャーと呼ばれ、CSS の font-feature-settings を使って有効・無効を切り替えられます。Web フォントの表現力を引き出すために知っておきたいプロパティです。

OpenType フィーチャーとは

OpenType フォントには、単に文字の形（グリフ）だけでなく、特定の条件で文字の見た目や配置を変える機能が組み込まれています。これが OpenType フィーチャーです。フォントファイルの中にあらかじめ定義されており、CSS 側からオン・オフを切り替えることで利用できます。

font-feature-settings の基本構文

font-feature-settings には、4 文字のフィーチャータグと、オン（1）・オフ（0）の値をペアで指定します。

.text {
  font-feature-settings: "kern" 1, "liga" 1;
}

タグはダブルクォートで囲み、複数指定する場合はカンマで区切ります。値の 1 はオン、0 はオフを意味し、1 の場合は省略も可能です。

/* 以下の 2 つは同じ意味 */
font-feature-settings: "kern" 1;
font-feature-settings: "kern";

よく使うフィーチャータグ一覧

OpenType フィーチャーのタグは数十種類ありますが、Web で実際に使う機会が多いのは限られています。

カーニングの効果を確認する

カーニングの有無でどれほど見た目が変わるか、英語の大文字が混ざるテキストで比較してみましょう。

<div class="kern-demo">
  <p class="kern-off">AWAY Tokyo Value Type</p>
  <p class="kern-on">AWAY Tokyo Value Type</p>
</div>

.kern-demo {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1.6;
}
.kern-off {
  font-feature-settings: "kern" 0;
  color: #9ca3af;
  margin: 0 0 4px 0;
}
.kern-off::before {
  content: "kern off: ";
  font-size: 11px;
  color: #9ca3af;
  vertical-align: middle;
}
.kern-on {
  font-feature-settings: "kern" 1;
  color: #111827;
  margin: 0;
}
.kern-on::before {
  content: "kern on: ";
  font-size: 11px;
  color: #6366f1;
  vertical-align: middle;
}

カーニングが有効なほうは AW や To, Ty の間隔が詰まり、文字列全体が自然なリズムで流れています。特に大きな文字サイズで使う見出しやロゴでは、カーニングの有無が印象を大きく左右します。

合字（リガチャ）の制御

合字は多くのブラウザでデフォルト有効になっていますが、明示的に制御したい場面もあります。たとえばコードフォントの合字を無効にしたい場合や、逆にデザインフォントの装飾的合字を有効にしたい場合です。

/* コードブロックで合字を無効化 */
code, pre {
  font-feature-settings: "liga" 0, "clig" 0;
}

/* 見出しで装飾的合字を有効化 */
h1 {
  font-feature-settings: "liga" 1, "dlig" 1;
}

日本語フォントと palt

日本語フォントで特に重要なのが palt（プロポーショナル字詰め）です。日本語フォントは基本的に全角幅で設計されていますが、括弧や句読点のような記号は実際のグリフが全角幅より狭く、前後に余白が生まれます。palt を有効にすると、この余白が詰まり自然な字間になります。

.japanese-text {
  font-feature-settings: "palt" 1;
}

<div class="palt-demo">
  <p class="palt-off">「東京都」（渋谷区）、「大阪府」（北区）。</p>
  <p class="palt-on">「東京都」（渋谷区）、「大阪府」（北区）。</p>
</div>

.palt-demo {
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 18px;
  line-height: 1.8;
}
.palt-off {
  font-feature-settings: "palt" 0;
  color: #9ca3af;
  margin: 0 0 4px 0;
}
.palt-off::before {
  content: "palt off: ";
  font-size: 11px;
  color: #9ca3af;
}
.palt-on {
  font-feature-settings: "palt" 1;
  color: #111827;
  margin: 0;
}
.palt-on::before {
  content: "palt on: ";
  font-size: 11px;
  color: #6366f1;
}

括弧や句読点まわりの不自然な余白が詰まり、テキスト全体が引き締まって見えます。ただし palt を適用すると文字幅が変動するため、表組みやカラムレイアウトなど桁揃えが必要な場面では注意が必要です。

font-variant との使い分け

CSS には font-feature-settings のほかに、font-variant 系のプロパティが用意されています。同じ OpenType フィーチャーを制御するものですが、記法が異なります。

font-variant 系のほうが意味が明確で読みやすく、カスケードの扱いも安全です。font-feature-settings は指定したタグの組み合わせが値全体を置き換えてしまうため、継承元の設定を意図せず上書きしてしまうリスクがあります。

font-variant 系なら各プロパティが独立しているため、こうした上書き問題は起きません。基本的には font-variant 系を優先的に使い、font-variant でカバーできないフィーチャー（palt や dlig など）だけ font-feature-settings で指定するのが現実的なアプローチです。

.text {
  /* font-variant 系で対応できるもの */
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: tabular-nums;

  /* font-variant で対応できないもの */
  font-feature-settings: "palt" 1;
}

フォントがフィーチャーに対応しているか確認する方法

すべてのフォントがすべての OpenType フィーチャーに対応しているわけではありません。使いたいフォントがどのフィーチャーを持っているかは、Wakamai Fondue というオンラインツールで確認できます。フォントファイルをドラッグ＆ドロップするだけで、対応しているフィーチャーの一覧が表示されます。

フォントに埋め込まれていないフィーチャーを CSS で指定しても、ブラウザはエラーを出さず単に無視します。意図どおりに表示されないときは、まずフォント側の対応状況を確認してみてください。