font-feature-settingsとは？フォントの潜在能力を引き出すCSSプロパティ

Webサイトのデザインでフォントを慎重に選んだにもかかわらず、「なぜかプロらしく見えない」「文字の並びがしっくりこない」と感じた経験はありませんか。その原因は、選んだフォントが持つ「潜在能力」を最大限に引き出せていないことにあるかもしれません。

多くの高品質なフォントには、標準的な文字や数字以外に、特定の状況でテキストを美しく見せるための「特別な字形」が数多く内蔵されています。このフォントに秘められた多彩な表現力を引き出す鍵が、CSSプロパティの font-feature-settings です。

font-feature-settings は、OpenTypeフォントが持つ高度なタイポグラフィ機能（OpenTypeフィーチャー）をWeb上で有効にするためのプロパティです。これを用いることで、通常は自動で切り替わらない、あるいはデフォルトで無効になっている文字表現を意図的にコントロールできます。

具体的に何ができるのか？

言葉だけではイメージしにくいかもしれません。font-feature-settings を使うと、Webサイトのテキストがどのように変わるのか、具体的な例を見ていきましょう。

合字（リガチャ）：特定の文字の組み合わせを美しく

例えば、「figure」や「first」と入力した際、「f」と「i」が接触し、窮屈に見えることがあります。合字（リガチャ）を有効にすると、この2文字が流れるように結合された、専用の美しい一つの字形に置き換わります。

[ここに「fi」がぶつかっているBefore画像と、合字で滑らかに繋がったAfter画像]

この細かな違いが、文章全体の可読性と洗練された印象を大きく左右します。

数字のスタイル：文脈に合わせた字形を選ぶ

数字の表示スタイルにも種類があります。多くのフォントには、すべての数字が同じ高さで揃う「ライニング数字」と、小文字のように高さが不揃いで文章に馴染みやすい「オールドスタイル数字」が用意されています。

• ライニング数字（デフォルト）: 1234567890 （表や価格表示など、数字を際立たせたい場合に適しています）
• オールドスタイル数字: 1234567890 （英文の長文など、文章に溶け込ませたい場合に効果的です）

[ここにライニング数字とオールドスタイル数字を並べた比較画像]

font-feature-settings を使えば、こうした数字のスタイルをコンテンツの目的に応じて自由に切り替えられます。

このほかにも、font-feature-settings で制御できる機能は多岐にわたります。

• カーニング: 「AV」など特定の文字の組み合わせの間隔を詰めて見た目を調整する
• 分数: 「1/2」と入力すると、専用の分数文字「½」に変換する
• スラッシュ付きゼロ: 数字の「0」とアルファベットの「O」を明確に区別する

この記事では、font-feature-settings の基本から具体的な使い方、実装上の注意点までを網羅的に解説します。このプロパティを使いこなせば、Webサイトのタイポグラフィは単なる文字情報から、読者を惹きつけるデザイン要素へと昇華します。

【コピペで使える】font-feature-settingsの基本構文と主要なフィーチャー一覧

それでは、font-feature-settings の具体的な使い方を解説します。構文は非常にシンプルで、これを覚えればすぐにタイポグラフィの調整を始められます。

基本構文と複数の値の指定方法

font-feature-settings は、有効にしたい「フィーチャータグ」をダブルクォーテーションで囲んで指定します。

/* 基本的な書き方 */
.element {
  font-feature-settings: "liga"; /* 標準合字を有効にする */
}

複数のフィーチャーを同時に適用したい場合は、カンマ（,）で区切って記述します。

/* 複数のフィーチャーを有効にする */
.element {
  font-feature-settings: "liga", "kern", "tnum"; /* 合字、カーニング、等幅数字を有効に */
}

このように、必要な機能をカンマで連結するだけで、複雑な文字組の制御が可能です。

主要なフィーチャータグ一覧

ここでは、Webデザインの実務で頻繁に利用される主要なフィーチャータグをカテゴリ別に紹介します。これらのタグは多くのOpenTypeフォントに内蔵されていますが、フォントによっては対応していない機能もある点にご注意ください。

合字 (Ligatures)

• liga (Standard Ligatures / 標準合字): fi や fl といった特定の文字の組み合わせを、より自然で読みやすい一つの字形に置き換えます。
  • コード例: font-feature-settings: "liga";
  • 表示結果: fi → fi

カーニング (Kerning)

• kern (Kerning): 文字の組み合わせに応じて、文字間のアキを自動的に調整します。例えば「AV」や「To」といった文字の間隔を詰め、視覚的なバランスを整えます。
  • コード例: font-feature-settings: "kern";
  • 表示結果: AV の文字間が自然に詰まる

数字 (Numbers)

• tnum (Tabular Figures / 等幅数字): すべての数字が同じ幅になります。価格表や統計データなど、数字の桁を揃えたい場合に最適です。

  • コード例: font-feature-settings: "tnum";
  • 表示結果: 111 と 999 の横幅が同じになる

• pnum (Proportional Figures / プロポーショナル数字): 数字ごとに最適な文字幅が設定されます。文章中の数字など、自然な見た目を重視する場合に適しており、多くのフォントでデフォルトとなっています。

  • コード例: font-feature-settings: "pnum";
  • 表示結果: 1 は細く、 9 は太く表示され、全体として自然な間隔になる

• onum (Oldstyle Figures / オールドスタイル数字): 小文字のようにベースラインが揃わない、クラシックな雰囲気の数字です。英文の長文によく馴染み、文章の流れを妨げません。

  • コード例: font-feature-settings: "onum";
  • 表示結果: 1234567890 の高さが不揃いになる

スタイル (Styles)

• smcp (Small Capitals / スモールキャップ): 小文字を、高さの低い大文字の字形で表示します。見出しや人名表記などで、上品に強調したい場合に役立ちます。

  • コード例: font-feature-settings: "smcp";
  • 表示結果: Small Caps → Sᴍᴀʟʟ Cᴀᴘs のような見た目になる

• ss01 (Stylistic Set 1): フォントデザイナーが用意した代替字形セットを呼び出します。ss01からss20まで存在し、フォントによって「a」や「g」の形が変わるなど、様々なデザインバリエーションが提供されています。

  • コード例: font-feature-settings: "ss01";
  • 表示結果: フォントに定義された代替字形に切り替わる

より深く理解する！font-variantとの違いと実践での注意点

font-feature-settings は多彩な文字表現を可能にする強力なプロパティですが、その機能を最大限に活かし、意図しない問題を避けるためには、いくつかの重要なポイントを理解しておく必要があります。特に、似た機能を持つfont-variantプロパティとの違いや、実装上の注意点を解説します。

font-variantとの使い分け

CSSには、font-feature-settings と同様の目的で使われる font-variant というプロパティ群が存在します。両者の違いを理解し、適切に使い分けることが重要です。

• font-variant (高レベルな指定): スモールキャップ (small-caps) や数字の形式 (lining-nums, oldstyle-nums) など、一般的で意図が明確なタイポグラフィ機能を指定するためのプロパティです。これは「何をしたいか」という意図をブラウザに伝える役割を持ち、ブラウザが最適な方法でレンダリングします。

• font-feature-settings (低レベルな指定): フォントファイルに直接埋め込まれたOpenTypeフィーチャーの4文字コード（例: smcp, pnum）を直接指定します。フォント固有の機能まで細かく制御できますが、指定したフィーチャーがフォントに存在しない場合は適用されません。

【使い分けの指針】 原則として、まずfont-variantで対応できないか検討してください。font-variantで指定する方がコードの意図が明確になり、将来的にブラウザがより良い方法でレンダリングしてくれる可能性があります。font-variantで対応していない特定の合字や、代替字形セット（ss01など）といった、より詳細な制御が必要な場合にfont-feature-settingsを使用するのがベストプラクティスです。

実装前に確認すべき3つの注意点

font-feature-settings を実際に使用する前に、以下の点を確認してください。

1. フォントがOpenTypeフィーチャーに対応しているか 最も重要な点です。font-feature-settings で指定した機能は、使用するWebフォント自体がそのフィーチャーを内包していなければ効果がありません。例えば、"liga"（合字）を指定しても、フォントに合字データがなければ文字は変化しません。Google Fontsなどの配布サイトでは、利用可能なフィーチャーが記載されている場合が多いため、事前に確認しましょう。

2. ブラウザの対応状況 現在、主要なモダンブラウザ（Chrome, Firefox, Safari, Edge）では font-feature-settings は広くサポートされています。しかし、一部の古いブラウザでは非対応であったり、ベンダープレフィックス (-webkit-など) が必要だったりする場合があります。ターゲットユーザーのブラウザ環境を考慮し、必要に応じてCan I useなどのサイトで最新の対応状況を確認することをおすすめします。

3. アクセシビリティへの配慮 文字の見た目を変更することは、アクセシビリティに影響を与える可能性があります。特に、dlig（任意合字）やhlig（歴史的合字）のような特殊な合字を多用すると、スクリーンリーダー（画面読み上げソフト）が単語を正しく認識できなくなることがあります。デザイン上の表現と、すべてのユーザーが情報を正確に受け取れることのバランスを常に意識することが大切です。

font-feature-settingsを使いこなし、表現力豊かなWebデザインを実現しよう

この記事では、CSSのfont-feature-settingsプロパティについて、基本的な仕組みから具体的なフィーチャータグ、実用上の注意点までを解説しました。フォントやブラウザの対応、アクセシビリティへの配慮といったポイントを押さえる必要はありますが、これらを理解して活用すれば、このプロパティはWebデザインの表現力を飛躍的に向上させる強力な武器となります。

タイポグラフィの細部に魂を宿す

これまで見てきたように、font-feature-settingsは、単に文字の見た目を少し変えるだけの機能ではありません。

• 合字 (liga): 特定の文字の組み合わせを、より自然で美しい一つの字形に置き換える。
• 数字 (tnum, pnum): 表組の数字を等幅にして桁を揃えたり、文中の数字を可変幅にして自然に馴染ませたりする。
• スモールキャップス (smcp): 欧文を上品でクラシカルな印象に変える。
• 分数 (frac): 「1/2」のような表記を、美しくデザインされた分数の字形で表示する。

これらのOpenTypeフィーチャーをCSSから直接コントロールできるということは、これまで画像として作成するしかなかった繊細なタイポグラフィ表現を、検索エンジンに認識され、ユーザーがコピー＆ペーストできるライブテキストとして実現できることを意味します。これは、SEOやメンテナンス性の観点からも非常に大きなメリットです。

Webサイトの品格や信頼性は、コンテンツそのものだけでなく、それを伝えるタイポグラフィの質にも大きく左右されます。font-feature-settingsは、その細部にまでこだわり、デザイナーの意図を正確に反映させるための重要な鍵となるのです。

まずはここから試してみよう

理論を学ぶだけでなく、実際に手を動かすことで理解はさらに深まります。もし、どこから手をつけていいか迷ったら、以下の簡単なステップから試してみてください。

提案：テーブル（表）内の数字をtnumで揃える

価格表や統計データなど、数字が並ぶテーブルでは、デフォルトのプロポーショナル数字 (pnum) のままだと、数字の「1」と「8」で幅が異なるため桁が揃わず、視覚的に乱れて見えがちです。

td.price {
  font-feature-settings: "tnum";
}

このCSSを適用するだけで、テーブル内の数字がすべて同じ幅（等幅）になり、驚くほど見やすく整然とした印象に変わります。この小さな変化がもたらす可読性の向上を、ぜひ自身の目で確かめてみてください。

font-feature-settingsを使いこなすことは、フォントが本来持っている豊かな表現力を最大限に引き出し、あなたのWebサイトをより洗練されたものへと進化させる第一歩です。

補足情報

font-feature-settingsの可能性をさらに深く探るため、実践で遭遇しがちな疑問や、より高度な使い方について解説します。これらの知識は、あなたのタイポグラフィ表現をさらに洗練させる助けとなるでしょう。

よくある質問（FAQ）

• どのフォントでもこのプロパティは使えますか？ いいえ、使えません。font-feature-settingsが効果を発揮するのは、目的のOpenTypeフィーチャーを内包しているフォントファイル（.otf, .woff, .woff2など）を使用している場合に限られます。すべてのフォントが美しい合字（liga）や代替字形（calt）を持っているわけではありません。利用するフォントがどのフィーチャーに対応しているかは、配布元の仕様書（Google Fontsなど）で確認することが重要です。

• font-variantプロパティとの違いは何ですか？ font-variantは、よく使われる機能をより分かりやすく指定するための高レベルなプロパティ群です。例えば、font-variant-ligatures: common-ligatures;はfont-feature-settings: "liga";とほぼ同等の効果を持ちます。CSSのベストプラクティスとして、まずfont-variantで指定できるかを確認し、それで対応できない特殊なフィーチャーを制御したい場合にのみ、低レベルなfont-feature-settingsを使用することが推奨されます。

実践上のヒントと注意点

パフォーマンスへの影響 font-feature-settingsの使用自体がサイトの表示速度を著しく低下させることは稀です。しかし、多くのフィーチャーを含む高機能なフォントは、ファイルサイズが大きくなる傾向があります。パフォーマンスを最適化するには、Webサイトで使用する文字と必要なフィーチャーだけを抽出した「サブセット化」フォントを用意することが極めて効果的です。

複数のフィーチャーを組み合わせる 複数の効果を同時に適用したい場合は、フィーチャータグをカンマ（,）で区切って記述します。

.price-tag, .product-code {
  /* 等幅数字(tnum)と、ゼロに斜線を入れる(slsh)を同時に適用 */
  font-feature-settings: "tnum", "slsh";
}

このように記述することで、複数のタイポグラフィ効果を組み合わせ、より意図に沿った緻密な文字表現が可能になります。