モダンサンセリフフォントスタック

モダンサンセリフスタック

モダンWebはジオメトリックおよびネオグロテスクサンセリフフォントに大きく依存しています。このスタックはInter（人気のGoogle Font）から始まり、視覚的に似たWebセーフフォントにフォールバックします。

宣言

font-family: Inter, Roboto, "Helvetica Neue",
  "Arial Nova", "Nimbus Sans", Arial, sans-serif;

フォントマッチングロジック

フォント	備考
Inter	オープンソース、画面用に設計、UI向け。Google Fontsまたはセルフホスト経由で読み込む必要あり。
Roboto	AndroidとChrome OSに同梱。メトリクスはInterに近い。
Helvetica Neue	macOSシステムフォント（San Francisco以前）。クリーンで中立的。
Arial Nova	Windows 10以降のArial改良版。
Nimbus Sans	LinuxのHelvetica無料代替、プリインストールされていることが多い。
Arial	ユニバーサルフォールバック。
sans-serif	汎用キーワード。

Interの読み込み

Interはwebフォントのため、別途読み込む必要があります：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

Interの読み込みに失敗した場合、スタックはRobotoまたはHelvetica Neueにフォールバックし、メトリクスが十分に近いため大きなレイアウトシフトを回避します。

バリアブルフォント対応

Interはバリアブルフォントとして利用可能で、単一ファイルで100から900までのスムーズなウェイト遷移が可能です。