font-feature-settingsの使い方｜palt・kern等よく使う機能を実例解説

CSSのfont-feature-settingsでOpenType機能を活用する方法を実例付きで解説。

✅ font-feature-settingsの基本的な使い方
✅ 実務でよく使う機能（palt, kern, liga等）
✅ font-kerningなど高レベルAPIとの使い分け
✅ 推奨するbodyスタイルの設定
✅ よくある問題と解決方法

palt（字詰め）、kern（カーニング）など実務で使う機能を中心に、font-kerningとの使い分けも説明します。

1. font-feature-settingsとは

定義

font-feature-settings は、OpenType機能を直接制御する低レベルなCSSプロパティ。

body {
  font-feature-settings: 'palt';  /* プロポーショナルメトリクス */
}

OpenType機能とは？

フォントファイルに埋め込まれた高度なタイポグラフィ機能：

機能	コード	説明
字詰め	`palt`	約物（句読点）の間隔調整
カーニング	`kern`	文字間の調整
合字	`liga`	複数文字を1つに
文脈依存	`calt`	前後の文字に応じて字形変更

重要な注意点

⚠️ font-feature-settingsは低レベルAPI

/* これらの高レベルAPIが無効化される！ */
font-kerning: normal;
font-variant-ligatures: common-ligatures;

/* font-feature-settingsで上書き */
font-feature-settings: 'palt';

理由:

font-feature-settings はすべてのOpenType機能を直接制御
高レベルプロパティの設定を無視する

2. 基本的な構文

単一機能の有効化

/* 機能名のみ（有効化） */
font-feature-settings: 'palt';

/* または明示的に */
font-feature-settings: 'palt' 1;  /* 1 = 有効 */

複数機能の指定

/* カンマ区切り */
font-feature-settings: 'kern', 'liga', 'calt', 'palt';

/* または数値指定 */
font-feature-settings: 
  'kern' 1,
  'liga' 1,
  'calt' 1,
  'palt' 1;

機能の無効化

/* 0 = 無効 */
font-feature-settings: 'palt' 0;

/* 複数の場合 */
font-feature-settings: 
  'kern' 1,   /* 有効 */
  'liga' 0,   /* 無効 */
  'palt' 1;   /* 有効 */

3. 実務でよく使う機能

日本語フォントで重要な機能

1. `palt` - プロポーショナルメトリクス

最も重要！日本語の字詰めを美しくする

body {
  font-feature-settings: 'palt';
}

効果:

【palt無効】
吾輩は CAT である。名前はまだ None.
       ↑ 全角分の空白

【palt有効】
吾輩は CAT である。名前はまだ None.
    ↑ 詰まった空白（美しい！）

対象文字:

句読点：。、
括弧：「」『』()
記号：：；！？

ブラウザサポート:

✅ Chrome, Firefox, Safari, Edge
⚠️ OTFフォントのみ（TTFでは効かない場合が多い）

2. `kern` - カーニング

文字間の調整（特に欧文で重要）

body {
  font-feature-settings: 'kern';
}

効果:

【kern無効】
WAVE  ← 文字間が均等

【kern有効】
WAVE  ← "AV"の間が詰まる

注意:

ほとんどのブラウザでデフォルト有効
font-kerning: normal の方が推奨（高レベルAPI）

3. `liga` - 一般的な合字

複数の文字を美しい1文字に

body {
  font-feature-settings: 'liga';
}

効果（欧文フォント）:

【liga無効】
fi fl ff  ← 個別の文字

【liga有効】
ﬁ ﬂ ﬀ  ← 合字

日本語フォント:

ほとんど効果なし
欧文フォントでのみ有効

4. `clig` - 文脈依存の合字

前後の文字に応じた合字

body {
  font-feature-settings: 'clig';
}

効果:

liga と似ているが、より高度
フォント依存

5. `calt` - 文脈依存の字形

前後の文字に応じて字形を変更

body {
  font-feature-settings: 'calt';
}

効果:

筆記体フォントでの文字連結
プログラミングフォントでの記号調整

例（Fira Code等）:

【calt無効】
-> != >=

【calt有効】
→ ≠ ≥  （見やすい！）

その他の有用な機能

`vert` - 縦書き用字形

.vertical-text {
  writing-mode: vertical-rl;
  font-feature-settings: 'vert';
}

効果:

縦書き専用の字形に変換
括弧や記号が回転

`vpal` - 縦書き用プロポーショナルメトリクス

.vertical-text {
  writing-mode: vertical-rl;
  font-feature-settings: 'vert', 'vpal';
}

効果:

palt の縦書き版
縦書きでの字詰めを美しく

4. 推奨するbodyスタイル設定

パターンA: シンプル版（推奨）

body {
  /* フォントの特性設定 */
  font-kerning: normal;
  font-feature-settings: 'palt';
  
  /* 文章の折り返し指定 */
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  
  /* アンチエイリアス */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

理由:

font-kerning で基本的なカーニングを有効化
palt で日本語の字詰めを追加
シンプルで効果的

パターンB: 明示的版

body {
  /* すべてを font-feature-settings で制御 */
  font-feature-settings: 
    'kern' 1,
    'liga' 1,
    'clig' 1,
    'calt' 1,
    'palt' 1;
  
  /* 文章の折り返し指定 */
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  
  /* アンチエイリアス */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

理由:

すべての機能を明示的に制御
デバッグしやすい
ブラウザ間の挙動を統一

パターンC: 日本語特化版

body {
  /* 基本設定 */
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
}

/* 日本語コンテンツのみ */
:lang(ja) {
  font-feature-settings: 'palt';
}

理由:

言語に応じて最適化
パフォーマンス向上
国際化対応

5. 高レベルAPIとの使い分け

優先順位

高レベルAPI（推奨）
  ↓ 上書きされる
font-feature-settings（低レベル）

高レベルAPIの一覧

プロパティ	対応する font-feature-settings	推奨度
`font-kerning`	`'kern'`	✅ 高
`font-variant-ligatures`	`'liga'`, `'calt'` 等	✅ 高
`font-variant-caps`	`'smcp'`, `'c2sc'` 等	○ 中
`font-variant-numeric`	`'lnum'`, `'tnum'` 等	○ 中

使い分けの指針

✅ 高レベルAPIを使うべき場合

/* カーニング */
font-kerning: normal;  /* ✅ これを使う */
/* font-feature-settings: 'kern'; ❌ これは避ける */

/* 合字 */
font-variant-ligatures: common-ligatures;  /* ✅ */
/* font-feature-settings: 'liga'; ❌ */

理由:

意図が明確
メンテナンスしやすい
複数の機能を組み合わせやすい

✅ font-feature-settingsを使うべき場合

/* 高レベルAPIがない機能 */
font-feature-settings: 'palt';  /* ✅ これしかない */

/* 複数の機能を一括制御 */
font-feature-settings: 'kern', 'liga', 'calt', 'palt';  /* ✅ OK */

理由:

palt など、高レベルAPIが存在しない
複数機能を一括で制御したい

組み合わせ例

❌ 悪い例

body {
  font-kerning: normal;  /* ← 無意味（上書きされる） */
  font-feature-settings: 'palt';  /* ← これで kern も無効化 */
}

✅ 良い例1（シンプル）

body {
  font-kerning: normal;
  font-feature-settings: 'palt';  /* palt だけ追加 */
}

✅ 良い例2（明示的）

body {
  font-feature-settings: 
    'kern' 1,
    'liga' 1,
    'palt' 1;
}

6. 実践例

例1: ブログ記事本文

.article-body {
  font-family: "YakuHanMP", "Shippori Mincho OTF", serif;
  font-size: 16px;
  line-height: 1.8;
  
  /* フォント機能 */
  font-kerning: normal;
  font-feature-settings: 'palt';
  
  /* 折り返し */
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

例2: 見出し

h1, h2, h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1.4;
  
  /* より強いカーニング */
  font-feature-settings: 
    'kern' 1,
    'palt' 1;
}

例3: コードブロック

code, pre {
  font-family: "Fira Code", monospace;
  
  /* プログラミング用リガチャ */
  font-feature-settings: 
    'calt' 1,  /* 文脈依存の字形（-> → 等） */
    'liga' 1;  /* 合字 */
}

例4: 縦書き

.tategaki {
  writing-mode: vertical-rl;
  font-family: "Shippori Mincho OTF", serif;
  
  /* 縦書き用機能 */
  font-feature-settings: 
    'vert' 1,  /* 縦書き用字形 */
    'vpal' 1;  /* 縦書き用字詰め */
}

例5: 数字のスタイル

.price {
  font-family: "Noto Sans JP", sans-serif;
  
  /* 等幅数字 */
  font-feature-settings: 'tnum';
}

.date {
  /* プロポーショナル数字 */
  font-feature-settings: 'pnum';
}

7. デバッグテクニック

ブラウザDevToolsで確認

/* 複数行で書いておくと、個別にON/OFF可能 */
body {
  font-feature-settings: 'kern';
  font-feature-settings: 'liga';
  font-feature-settings: 'calt';
  font-feature-settings: 'palt';
  /* ↑ 最後の1つだけ有効（上書きされる） */
}

/* 実際は以下のように書く */
body {
  font-feature-settings: 'kern', 'liga', 'calt', 'palt';
}

デバッグ時:

DevToolsで個別にコメントアウト
効果を確認
最適な組み合わせを決定

フォントに含まれる機能を確認

# FontToolsを使用
pip install fonttools

# OpenType機能を確認
pyftfeatfreeze font.otf

# 出力例
kern: カーニング機能あり
liga: 合字機能あり
palt: プロポーショナルメトリクスあり

8. よくある質問

Q1. font-feature-settingsはすべてのフォントで効きますか？

A. いいえ、フォントに機能が埋め込まれている必要があります。

/* ✅ OTFフォント → 'palt' 機能あり */
font-family: "Shippori Mincho OTF";
font-feature-settings: 'palt';  /* 効く */

/* ❌ TTFフォント（Google Fonts） → 'palt' 機能なし */
font-family: "Shippori Mincho";
font-feature-settings: 'palt';  /* 効かない */

Q2. font-kerningとfont-feature-settings: 'kern'の違いは？

A. font-kerning の方が推奨されます。

/* ✅ 推奨 */
font-kerning: normal;

/* △ OK（低レベル） */
font-feature-settings: 'kern';

理由:

font-kerning は高レベルAPI
意図が明確
他のプロパティと組み合わせやすい

Q3. 複数の値を指定する順番は重要ですか？

A. いいえ、順番は関係ありません。

/* どちらも同じ */
font-feature-settings: 'kern', 'liga', 'palt';
font-feature-settings: 'palt', 'liga', 'kern';

Q4. inheritやinitialは使えますか？

A. はい、通常のCSSプロパティと同様に使えます。

/* 親の設定を継承 */
font-feature-settings: inherit;

/* 初期値に戻す */
font-feature-settings: initial;

/* 無効化 */
font-feature-settings: normal;

Q5. パフォーマンスへの影響は？

A. 一般的には問題ありませんが、大量のテキストでは考慮が必要。

/* 軽い処理 */
font-feature-settings: 'kern';

/* やや重い処理 */
font-feature-settings: 'kern', 'liga', 'calt', 'palt';

推奨:

必要な機能だけ有効化
大量テキストでは最小限に

📊 まとめ

推奨する基本設定

body {
  /* カーニング（高レベルAPI） */
  font-kerning: normal;
  
  /* 日本語の字詰め（低レベルAPI） */
  font-feature-settings: 'palt';
  
  /* 折り返し */
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  
  /* アンチエイリアス */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

使い分けの原則

高レベルAPIがあれば使う

font-kerning: normal;  /* ✅ */
font-variant-ligatures: common-ligatures;  /* ✅ */

ない場合はfont-feature-settings

font-feature-settings: 'palt';  /* ✅ */

デバッグ時は明示的に

font-feature-settings: 'kern', 'liga', 'calt', 'palt';

1. font-feature-settingsとは

定義

OpenType機能とは？

重要な注意点

2. 基本的な構文

単一機能の有効化

複数機能の指定

機能の無効化

3. 実務でよく使う機能

日本語フォントで重要な機能

1. palt - プロポーショナルメトリクス

2. kern - カーニング

3. liga - 一般的な合字

4. clig - 文脈依存の合字

5. calt - 文脈依存の字形

その他の有用な機能

vert - 縦書き用字形

vpal - 縦書き用プロポーショナルメトリクス

4. 推奨するbodyスタイル設定

パターンA: シンプル版（推奨）

パターンB: 明示的版

パターンC: 日本語特化版

5. 高レベルAPIとの使い分け

優先順位

高レベルAPIの一覧

使い分けの指針

✅ 高レベルAPIを使うべき場合

✅ font-feature-settingsを使うべき場合

組み合わせ例

❌ 悪い例

✅ 良い例1（シンプル）

✅ 良い例2（明示的）

6. 実践例

例1: ブログ記事本文

例2: 見出し

例3: コードブロック

例4: 縦書き

例5: 数字のスタイル

7. デバッグテクニック

ブラウザDevToolsで確認

フォントに含まれる機能を確認

8. よくある質問

Q1. font-feature-settingsはすべてのフォントで効きますか？

Q2. font-kerningとfont-feature-settings: 'kern'の違いは？

Q3. 複数の値を指定する順番は重要ですか？

Q4. inheritやinitialは使えますか？

Q5. パフォーマンスへの影響は？

📊 まとめ

推奨する基本設定

使い分けの原則

📝 関連記事

🔗 参考リンク

Google Fontsだと字詰めが効かない理由 ~OTFとTTFの違い -Shippori Mincho実例で徹底解説-

CSS：size-adjustで日本語と英語フォントのバランスを調整する -実例で完全解説-

1. `palt` - プロポーショナルメトリクス

2. `kern` - カーニング

3. `liga` - 一般的な合字

4. `clig` - 文脈依存の合字

5. `calt` - 文脈依存の字形

`vert` - 縦書き用字形

`vpal` - 縦書き用プロポーショナルメトリクス