Modern Font Stacks - システムフォントを使ったフォントスタック

• 最新OSの「システムフォント」を使ったフォントスタックのCSSを提供
• 内蔵フォントのためWebフォントのダウンロードが不要で、高速なWebページを構成可能
• 15種類の書体
  • System UI : OSの基本UIフォント
    • font-family: system-ui, sans-serif;
    • mac/iOSではSan Francisco、WindowsではSegoe UI、AndroidではRoboto、LinuxではUbuntuなどが使われる
  • Transitional : 新旧の調和
    • font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  • Old Style : 丸みのあるセリフが特徴のルネサンス時代のフォント
    • font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
  • Humanist : 有機的なカリグラフィー形状で、ルネサンス時代の手書きから着想を得ている。ほかのサンセリフより読みやすい
    • font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
  • Geometric Humanist : 均一な線幅が特徴で、見出し向けによく使われる
    • font-family: Avenir, 'Avenir Next LT Pro', Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  • Classical Humanist : セリフで終わらず、線の端でわずかに広がる
    • font-family: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
  • Neo-Grotesque : 19世紀末から20世紀初頭にかけて発達したサンセリフスタイル
    • font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
  • Monospace Slab Serif : 等幅文字。シンプル。レポート、表、技術文書でタイプライター出力をエミュレート
    • font-family: 'Nimbus Mono PS', 'Courier New', 'Cutive Mono', monospace;
  • Monospace Code : プログラミング向け。等幅で読みやすい
    • font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  • Industrial : 19世紀後半に始まった。大胆なサンセリフで、シンプルかつ直接的な形状
    • font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
  • Rounded Sans : 丸みを帯びていて、より柔らかく親しみやすい印象。子ども向けにも適している
    • font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
  • Slab Serif : 書体の端に太くブロック状のセリフを持つ
    • font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
  • Antique : 19世紀に流行。ブロック状のセリフと、太く均一な線の太さが特徴
    • font-family: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
  • Didone : モダン書体。太い線。ブラケティングのないヘアラインセリフ
    • font-family: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
  • Handwritten : 手書き
    • font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;

[xguru]

GitHubページを見ると、各OSでどのように表示されるかを手軽に比較できます。
https://github.com/system-fonts/modern-font-stacks