System UIフォントスタック

System UIフォントスタックとは？

System UIフォントスタックは、各OSのデフォルトインターフェース書体を使用するように設計されたCSS font-family宣言です。外部Webフォントをダウンロードする代わりに、ブラウザはユーザーがOSのメニュー、ボタン、ダイアログで既に見ているフォントでテキストをレンダリングします。

宣言

font-family: system-ui, -apple-system, BlinkMacSystemFont,
  "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
  "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

動作の仕組み

キーワード / フォント	マッチするプラットフォーム
system-ui	モダンブラウザ（OSデフォルトにマッピング）
-apple-system	macOS / iOSのSafari（San Francisco）
BlinkMacSystemFont	macOSのChrome（San Francisco）
Segoe UI	Windows 7 / 8 / 10 / 11
Roboto	Android、Chrome OS
Oxygen / Ubuntu / Cantarell	各種Linuxディストリビューション
Fira Sans	Firefox OS（レガシー）
Droid Sans	古いバージョンのAndroid
Helvetica Neue	El Capitan以前のmacOS
sans-serif	最終的な汎用フォールバック

なぜリストが長いのか？

古いブラウザはsystem-uiキーワードを理解しないため、後続の各エントリがプラットフォーム固有のフォールバックとして機能します。末尾の汎用sans-serifは、未知のシステムでもブラウザが必ず何らかのサンセリフ書体を選択することを保証します。

パフォーマンスの利点

外部フォントファイルをダウンロードしないため、FOIT（Flash of Invisible Text）とFOUT（Flash of Unstyled Text）を排除します。ミッドティアのモバイルデバイスでは、Largest Contentful Paint（LCP）メトリクスが100〜300ms改善することがよくあります。