CSSでタイポグラフィを極める：`font-feature-settings`が変えるデザインの解像度
フロントエンドエンジニアとして数年経験を積むと、「デザインカンプの文字間が、ブラウザで再現できない」という、ある種の壁にぶつかるはずです。デザイナーがPhotoshopやIllustratorで緻密に調整した、あの美しいタイポグラフィ。CSSの `letter-spacing` だけではどうにもならない、文字と文字の呼吸のような「カーニング」や「合字（リガチャ）」。
これらをWebで制御する切り札が、`font-feature-settings` です。今回は、OpenTypeフォントの秘めたる力を引き出し、インラインレベルで極上のタイポグラフィを実現する技術について深掘りします。
—
1. `font-feature-settings` とは何か？
一言で言えば、「フォントが持っている裏メニューを、CSSから直接呼び出すプロパティ」です。
通常、フォントはブラウザのレンダリングエンジンによって最適化されますが、特定の文字の組み合わせや、数字の並び方など、デザイナーが意図した「美しさ」を強制したい場面は多々あります。これまでは `font-variant` などのプロパティが推奨されてきましたが、より詳細かつピンポイントな制御が必要な場合、この `font-feature-settings` が現場の救世主になります。
2. ブラウザの裏側で何が起きているのか
ブラウザは `font-feature-settings` を受け取ると、レンダリングエンジン（WebKitやBlinkなど）を通じて、フォントファイル内の `GSUB` (Glyph Substitution) テーブルや `GPOS` (Glyph Positioning) テーブルにアクセスします。
例えば、`liga`（標準合字）を有効にすると、ブラウザは「f」と「i」が並んだ際に、個別の文字ではなく、あらかじめ用意された合字グリフを探しに行き、それを描画します。これは単なる文字の置き換えではなく、グリフ単位の微細な描画処理をブラウザの描画パイプラインに割り込ませる、非常に強力な操作なのです。
3. 実践：現場で使える「プロのタイポグラフィ」コード
論理はさておき、まずはコピペでその効果を体感してください。インライン要素（`span` や `strong`）に適用することで、特定の単語だけを美しく見せる手法です。
/ 現場でよく使うタイポグラフィ・ユーティリティ /
/ 1. 標準的な合字（リガチャ）を有効化：’fi’, ‘fl’ などが綺麗に繋がる /
.text-ligature-on {
font-feature-settings: “liga” 1;
}
/ 2. プロポーショナル数字（等幅ではなく、数字の幅を最適化） /
/ 金額やID表記などで、数字がガタつかないようにする /
.text-proportional-nums {
font-feature-settings: “pnum” 1;
}
/ 3. カーニングの強制適用：英数字の並びを美しく /
/ メトロなど、特定のフォントで顕著な効果を発揮 /
.text-kerning-on {
font-feature-settings: “kern” 1;
}
/ 4. スモールキャップス：見出しの強調に /
.text-small-caps {
font-feature-settings: “smcp” 1;
}
HTMLでの適用例:
通常のテキストでは少し野暮ったい「fi」も、
final という単語なら
f と i
が美しく結合されます。
価格表記には特に注意が必要です：
¥1,234,567
—
4. 知っておくべき「落とし穴」とベストプラクティス
このプロパティを使う上で、シニアとして皆さんに忠告しておきたいことが2点あります。
1. フォント側の対応を確認せよ：
どんなに強力なCSSを書いても、フォント自体がその機能（OpenTypeテーブル）を持っていなければ何も起きません。Google FontsなどでWebフォントを読み込む際は、そのフォントがリガチャやスモールキャップスをサポートしているか、必ず公式サイトで確認してください。
2. `font-variant` との棲み分け：
可能な限り、`font-variant-ligatures` や `font-variant-numeric` といった「高階層プロパティ」を優先してください。`font-feature-settings` はあくまで「最後の手段」です。なぜなら、`font-feature-settings` は値を上書きしてしまうため、フォント本来のデフォルト設定を無効化してしまうリスクがあるからです。
最後に：デザインの「解像度」を上げよう
Webデザインの良し悪しは、数ピクセルの余白だけでなく、こうした「文字の並びの美しさ」という細部で決まります。`font-feature-settings` を使いこなすことは、ブラウザに「デザイナーの意図」を直接伝えることと同義です。
まずは、管理画面や数字が並ぶダッシュボードのテーブルに `pnum` を適用するところから始めてみてください。画面の品格が、グッと上がりますよ。
技術的な深掘りはここまで。次は実際にコードを書いて、その手触りを確かめてみてください。質問があれば、いつでもSlackで。
コメント