29 ポイント 投稿者 xguru 2023-03-21 | 1件のコメント | WhatsAppで共有
  • 最新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;

1件のコメント

 
xguru 2023-03-21

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