バリアブルフォント：2026年版デザイナーの実践ガイド

バリアブルフォントは、6つのファイルを出荷することを、6つのことができる1つのファイルの出荷に置き換えた。しかしほとんどのチームはまだ切り替えていない。それが議論の全てだ。以下は全てその証拠だ。

2026年にブランドの書体として4つの静的フォントファイルを読み込むことは、パフォーマンスのコストを払い、デザインの幅を無駄にすることを意味する。このガイドでは、仕組み、4つの本番環境での分解分析、実際のパフォーマンス数値、そして月曜日までにバリアブルフォントを選んで出荷するための6つの質問フレームワークを扱う。

バリアブルフォントとは実際に何か

バリアブルフォントは、1つまたは複数の軸にわたって連続したデザイン空間をエンコードした単一のフォントファイルだ。Weight（太さ）は最も馴染みのある軸だ。Regular ファイルと Bold ファイルをそれぞれ出荷する代わりに、100から900の任意のウェイトをレンダリングできる1つのファイルを出荷する。タイプデザイナーは標準セットを超えてカスタム軸を定義することもできる。そこが面白いところだ。

OpenType バリアブルフォント仕様（OT 1.8、2016年リリース）がこれを可能にした。フォントファイルはデフォルトのマスターと各軸のエンドポイントのデルタ値を格納する。レンダリングエンジンが補間する。デザイナー、またはCSSが実行時に正確な値を調整する。

5つの標準登録軸：

• Weight (wght): 細字からブラックまで、最も馴染みのある軸
• Width (wdth): 圧縮から拡張まで
• Slant (slnt): 斜体角度を制御
• Optical size (opsz): キャプションとディスプレイサイズ向けに字形を調整
• Italic (ital): ローマン体からイタリック体への連続値

カスタム軸は4文字の大文字コードを使用し、タイプデザイナーが静的フォントでは提供できない表現豊かな範囲を構築できるようにする。

4つの分解分析の概要

4つの本番バリアブルフォント、出荷する4つの異なる理由。

各フォントは同じ問題の異なるバージョンを解決する：1つのファイルを出荷して、あらゆるコンテキストをカバーする。

Inter：デザイナーが実際に出荷するバリアブルフォント

Inter は Rasmus Andersson によるスクリーン向け書体で、現在本番環境で最も多く出荷されているバリアブルフォントだろう。rsms.me/inter のバリアブル版には、100から900のウェイトとイタリックが1つのファイルにまとめられている。

Inter の率直な評価は、平凡で正確だ。タイトなメトリクス、豊富なラテン文字とキリル文字のカバレッジを持ち、低DPIスクリーンでの小サイズ向けに最初から設計されている。

個性的な書体ではない。インフラだ。読みやすい本文、読みやすいラベル、読みやすいデータテーブルが必要なとき、Inter は邪魔をしない。

Notion、Linear、その他多数のSaaSプロダクトを運営するチームが Inter またはその派生を使用している。これを選ぶことでUIが凡庸になるわけではない。書体の選択を問題外にして、スペーシング、サイジング、階層にクリエイティブなリソースを使えるようにするのだ。

Recursive：軸がウェイトだけでなく書体自体をデザインするとき

Arrow Type の Stephen Nixon による Recursive は、書体の「重さ」だけでなく書体が「何であるか」を変えるカスタム軸の典型的な例だ。主要な軸は Monospace（MONO）で、フォントをプロポーショナルからモノスペースへと連続的にシフトさせる。もう一つの軸、Casual（CASL）は、フォーマルな直線的構造から表現豊かなインフォーマルなストロークへと移行する。

つまり、1つの Recursive ファイルで、マーケティングのヘッドライン、本文、コードブロックを処理できる。MONO と CASL の値を変えるだけで、同じファイルを使う。節約できるのはファイル数だけではない。ブランドの一貫性も得られる。コードサンプルと散文が骨格を共有するため、視覚的に調和する。

パフォーマンスのトレードオフは現実的だ：Recursive のバリアブルファイルは、より広いデザイン空間を持つため約580 KBになる。実際に軸の全範囲を使用するプロダクトにとっては、すべてに対して1つのリクエストだ。各軸で1つのストップしか必要としないプロダクトにとっては、対象を絞った静的サブセットの方が軽量だ。コミットする前に何を買っているかを理解しておくこと。

Apple SF Pro：OSレベルの標準としてのバリアブル

Apple はすべての最新 Apple OS 内で SF Pro と SF Compact をバリアブルフォントとして出荷している。光学サイズ軸（opsz）が主要なレバーだ：フォントはキャプションサイズとディスプレイサイズの字形構造を自動的に調整し、デザイナーの介入なしにスペーシングを締め、ストロークウェイトを調整する。

これはバリアブルフォントをプラットフォーム標準として支持する上流の議論だ。Apple と Google はどちらもバリアブルをデフォルトとして扱う。静的ファイルはレガシーフォーマットだ。OS、ブラウザ、レンダリングスタックがすべてバリアブルフォーマットを中心に構築されているとき、静的ファイルを出荷することは WebP の代わりに GIF を出荷することのように見え始める。

Apple の HIG の中で作業しているデザイナーは、SF Pro をウェブ上で直接読み込むことができない（ライセンスの問題）。しかし、光学サイズ軸のパターンは opsz をサポートするバリアブルフォントで完全に再現可能であり、ウェイト以上に軸が重要な理由の具体的な論拠となる。

IBM Plex：企業デザインシステム内のバリアブル

IBM Plex は Bold Monday が IBM のために受注した書体であり、バリアブルフォントが大規模な企業デザインシステムを支える最も明確な例だ。Plex は Serif、Sans、Mono、Math をカバーし、Sans と Serif のバリアブル版が利用可能だ。

IBM が示したビジネスの論拠：1つのタイプファミリー、1セットのファイル、すべてのプロダクトサーフェス、すべての言語。Plex は IBM のクラウドプロダクト、マーケティング、デベロッパードキュメント、印刷物全体に出荷される。バリアブル Sans は、データテーブルで11pxでレンダリングされるときも、看板で72pxのときも、同じブランドシグナルを持つ。その一貫性は偶然ではない。一貫したバリアブルの骨格を持つタイプシステムを委託することで得られるものだ。

複数のプロダクトサーフェスを持ち、長期的な需要があるブランドこそ、Plex がその価値を証明する場所だ。適切なタイプシステムへの投資に疑問を持つ人の前に置くべき分解分析だ。

すべてのチャネルに対応し、6つではなく1つのファイルで出荷されるタイプシステムが必要か？Brainy はブランドアイデンティティを提供する。

1つの数値で語るパフォーマンスの議論

Inter のバリアブル版は単一ファイルで約310 KBだ。Inter Regular と Inter Bold を静的ファイルとして出荷すると合計で約280 KBになる。静的の方が良さそうに聞こえる。そうではない。

3つか4つのウェイトを使用するUIでは、バリアブルファイルはリクエスト数だけで元が取れる。ディスプレイウェイトを正確に調整できるマーケティングサイトは、どのファイルサイズでも静的フォントが提供できないデザインコントロールを得る。

サブセット化は計算をさらに有利にする。Fonttools や Google Fonts のサブセット API のようなツールを使えば、バリアブルフォントを必要な軸とグリフだけに絞り込める。ウェイトとイタリックだけのラテン文字向けに適切にサブセット化されたバリアブル Inter は、100 KB を大きく下回る。

今週バリアブルフォントを選ぶ方法

2026年の本番予算向けに設計された6つの質問。順番に答えること。明確な結果が得られる最後の答えがあなたの選択だ。

何かを選ぶ前に確認すべきカタログは v-fonts.com だ。利用可能な最も包括的なバリアブルフォントインデックスであり、ダウンロードする前に軸をライブでテストできる。

セカンダリとのバリアブルフォントのペアリングについては、フォントペアリングガイドを参照。これが広いタイポグラフィスタックにどう収まるかについては、その内訳が階層、スケール、スペーシングをカバーしている。

FAQ

バリアブルフォントはすべてのブラウザで機能するか？

そうだ、2026年時点では。バリアブルフォントは Safari 11、Chrome 66、Firefox 62、Edge 17 以降、広くサポートされている。

唯一の懸念は非常に古い Android WebView のインスタンスだ。アナリティクスが Android 4 時代のブラウザからの大量のトラフィックを示している場合はテストしろ。それ以外のすべての人は自信を持って出荷しろ。

バリアブルフォントは CSS で実装するのが難しいか？

font-variation-settings プロパティを理解すれば、静的フォントより難しくはない。軸の値は font-weight を宣言するのと同じように宣言する。ウェイトのバリエーションは、ブラウザが wght 軸に自動的にマッピングするため、多くの場合、既存の font-weight プロパティだけで処理される。カスタム軸は font-variation-settings で4文字のタグを直接使用する。

Google Fonts のバリアブルフォントを使用できるか？

できる。Google Fonts は Inter、Recursive、Roboto Flex を含む多くの書体のバリアブル版を提供している。個別のウェイトの代わりにバリアブルファイルをリクエストするには、Google Fonts の URL に :ital,wght@0,100..900;1,100..900（または適切な軸の範囲）を追加しろ。構文は Google Fonts のデベロッパーページに記載されている。

バリアブルフォントは複数の静的ファイルより常に小さいか？

常にではない。バリアブルフォントはフルデザイン空間をエンコードするため、生ファイルが単一の静的ウェイトより大きくなる可能性がある。バリアブルの論拠は1つのリクエストと軸の範囲であり、生ファイルサイズではない。サブセット化はほとんどの本番ユースケースでギャップをすぐに縮める。

いつ静的フォントに固執すべきか？

書体の1つのウェイトしか使用せず、拡張する予定がない場合だ。サブセット化された静的 Regular は、単一のストップで使用しているバリアブルフォントより確かに軽量だ。バリアブルの利点は軸の使用により複利で増える。1つのウェイトと1つのスタイルを使用するなら、静的で構わない。

1つが必要なのに6つのフォントファイルを出荷するのをやめろ

バリアブルフォントの論拠は推測的ではない。Apple はすべてのプラットフォームで SF Pro をバリアブルとして出荷している。IBM Plex はクラウドプロダクト、デベロッパードキュメント、印刷物をカバーするシステムを支えている。

Rasmus Andersson の Inter は、あなたが毎日使う SaaS インターフェースの半分のデフォルト書体だ。このフォーマットは実験的ではない。ほとんどのプロジェクトレベルのデザイン作業がまだ追いついていない現在の標準だ。

上記の分解分析から1つのフォントを選び、6つの質問フレームワークで検討し、v-fonts.com または Google Fonts からバリアブルファイルを取得して、今週出荷しろ。

パフォーマンスの議論は現実だ。デザイン範囲の議論は現実だ。「まずフォント読み込み戦略を監査する必要がある」という議論は月曜日に始める理由であり、待つ理由ではない。より多くのタイポグラフィ分解分析については、完全なライブラリがある。