GitHubのシステムフォントスタック

GitHubのフォントスタック

GitHubは2016年にカスタムWebフォントを廃止し、純粋なシステムフォントスタックを採用した最初の主要Webサイトの一つでした。この変更により、ページの容量が削減され、すべてのプラットフォームでのレンダリング速度が向上しました。

宣言

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
  "Noto Sans", Helvetica, Arial, sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji";

詳細

• -apple-system / BlinkMacSystemFont はAppleデバイスでSan Franciscoをターゲットにします。
• Segoe UI はWindowsをカバーします。
• Noto Sans はLinuxとAndroidで優れたUnicodeカバレッジを提供し、CJK文字や多くのスクリプトをサポートします。
• Helvetica / Arial は広く利用可能なフォールバックとして機能します。
• sans-serif は汎用キーワードです。
• Apple Color Emoji / Segoe UI Emoji はテキストと一緒にカラー絵文字が正しくレンダリングされることを保証します。

絵文字サポート

GitHubのスタックの注目すべき特徴は、絵文字フォントの明示的な指定です。これがないと、一部のプラットフォームでは絵文字がモノクロのアウトラインでレンダリングされたり、Symbolaフォントで代替されたりする場合があります。

汎用system-uiスタックとの違い

GitHubはsystem-uiキーワード自体を省略しています。採用時点で、特定のAndroidブラウザがsystem-uiを意図しないフォントにマッピングしていたためです（Android <80でのChromeの既知のバグ）。また、Linuxでの多言語サポートを優先するために、Helveticaの前にNoto Sansを配置しています。