フォント読み込み戦略をめぐるあらゆる議論——プリロード、サブセット化、font-displayの調整——は、多くのチームが意識的に下したことのないひとつの意思決定の下流にあります。そもそもフォントを読み込むのか、という決定です。高パフォーマンスなアプリケーションの大きな一群にとって、正しい書体の選択とは、ユーザーのマシンにすでにインストールされているものです。0キロバイト、0リクエスト、レイアウトシフトなし、最初の描画から読める。
いまの「システムスタック」の意味
昔ながらのArial, sans-serifという手抜きの話をしているのではありません。現代のシステムスタックは、意図をもった構成です。
font-family: ui-sans-serif, system-ui, -apple-system,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;このたった1つの宣言で、Appleのデバイスでは San Francisco、Windowsでは Segoe UI、Androidでは Roboto が手に入ります。プラットフォームベンダーが自社のスクリーンのために、合わせて何億ドルも費やして磨き上げた3つの書体が、それを最もよく知るエンジンによってヒンティングされ、レンダリングされるのです。あなたのユーザーは一日中これらの書体を読んでいます。慣れ親しんでいること自体が判読性の機能である——この点はUniversal Webの書体選択の章が詳しく論じています。
セリフとモノスペースのスタックにも同じ配慮が必要です。読むための画面にはui-serif/Georgia/Charter、コードとデータにはui-monospace/SF Mono/Consolas/"Cascadia Code"。このサイト自身のディスプレイ書体も、まさにこの論理に乗っています——持っている人には商用書体を、それ以外の全員には調律されたフォールバックチェーンを。
ゼロが正しい数字であるとき
この意思決定は、そのインターフェースが何であるかにかかっています。システムスタックが勝つのは、プロダクトが道具であるときです。ダッシュボード、管理画面、トレーディングや監視のインターフェース、開発者向けプロダクト——毎時間使われ、タイポグラフィの仕事が消えることであるようなすべてのもの。こうしたアプリケーションでは、フォントは純粋なインフラです——午前3時に自分を呼び出すものの書体に見とれる人はいません——そしてパフォーマンスバジェットはデータに使ったほうが有益です。
ブランド書体がそのバイト数に見合うのは、プロダクトが場所であるときです。マーケティングの画面、エディトリアルな読みもの、タイポグラフィがアイデンティティを担うあらゆる場所。このポートフォリオは意図的にウェブフォントを配信しています。ここではタイポグラフィこそがコンテンツだからです。それが試金石です——カスタム書体を削除したら、プロダクトの意味は減るのか、それともただ速く読み込まれるようになるだけか?
フォールバックを本命のフォントのように作り込む
0キロバイトのスタックの技芸は、メトリクスの規律にあります。プラットフォームごとの書体はエックスハイトも字幅も異なるので、macOSだけで調整したレイアウトは、Windowsでは違う呼吸をします。この差を埋める道具は3つあります。
font-size-adjustは、フォールバックのエックスハイトを正規化し、チェーン内のすべての書体が同じ実効サイズで読めるようにします。text-wrap: balanceとprettyは、メトリクスに互換性のない書体間での改行位置の違いを吸収します。- 実際のスタックでテストすること——誰も実行しない規律です。Segoe、SF、Robotoでインターフェースのスクリーンショットを撮ってください。そのうちひとつでしか成立しないデザインは、デザインのほうが間違っています。