CSSのfont-familyの書き方のまとめ、スマホ・デスクトップの各最新OSにインストールされているフォントを使用 -Modern Font Stacks

iOS, Android, macOS, Windows, Linuxの各最新OSにデフォルトでインストールされているフォントをCSSで使用するときに、font-familyにどのように定義するとよいのかが分かるModern Font Stacksを紹介します。

日本語フォントには残念ながら対応していませんが、英語フォントを使用する際のfont-familyの書き方がまとめられています。

スマホ・デスクトップの各最新OSにデフォルトでインストールされているフォントを使用したCSSのfont-familyの書き方のまとめ -Modern Font Stacks

Modern Font Stacks
Modern Font Stacks -GitHub

Modern Font Stacksの特徴

Modern Font Stacksは、スマホ・デスクトップ用のOSにデフォルトでインストールされているフォントを確認できるサイトです。CSSのfont-familyに定義すると、フォントは各OSで利用可能な最速のフォントで、フォントがダウンロードされる必要はなし、レイアウトが変更されることやテキストが読み込まれるのを待つことなく、すぐにレンダリングされます。

ライセンスはCC0で、商用プロジェクトでも無料で利用できます。

サイトのキャプチャ

Modern Font Stacks

Modern Font Stacksでは、下記のOSがサポートされています。

  • iOS 9.3+
  • Android 10+
  • macOS 10.9+
  • Windows 7+
  • Linux

フォントは、スマホ・デスクトップ用のすべての最新OSの書体分類によって整理されています。

サイトのキャプチャ

Font Stacks: Modern Font Stacks

各フォントで使用できる文字もすべて確認できます。

サイトのキャプチャ

Fotn Characters: Modern Font Stacks

System UI

System UIフォントは、OSのインターフェイスに使用されているフォントです。小さなサイズでも非常に読みやすく、多くのウェイトを備えており、UI要素に最適。

各OSで表示されるフォント

Transitional

Transitionalの書体は、17世紀後半から18世紀の啓蒙時代につくられたオールドスタイルとモダン書体の中間的な書体です。代表的な例として、英国の新聞「The Times」のためにつくられた「Times New Roman」があります。

各OSで表示されるフォント

Old Style

Old Styleの書体は、斜めの強調、太いストロークと細いストロークによる低いコントラスト、丸みをおびたセリフが特徴で、ルネッサンス期につくられました。代表的な例として、「Garamond」があります。

各OSで表示されるフォント

Humanist

Humanistの書体は、有機的なカリグラフィのフォルムと太いストロークと細いストロークのコントラストが低いことが特徴です。ルネッサンス期の手書き文字からインスピレーションを受けており、ほかのサンセリフ書体よりも読みやすいとされています。

各OSで表示されるフォント

Geometric Humanist

Geometric Humanistの書体は、すっきりとした幾何学的なフォルムと均一なストローク幅が特徴です。モダンで洗練された外観は、見出しやディスプレイ目的によく使用されます。代表的な例として、「Futura」があります。

各OSで表示されるフォント

Classical Humanist

Classical Humanistの書体は、ストロークがセリフで終わらずに微妙に広がっていくのが特徴です。古代ローマの大文字やルネッサンス期の墓石の石彫りからインスピレーションを受けています。

各OSで表示されるフォント

Neo-Grotesque

Neo-Grotesqueの書体は、19世紀末から20世紀初頭にかけてつくられたサンセリフのスタイルで、すっきりとした幾何学的なフォルムと均一なストローク幅が特徴です。代表的な例として、「Helvetica」があります。

各OSで表示されるフォント

Monospace Slab Serif

Monospace Slab Serifの書体は、形状に関係なく同じ幅を持つ固定幅の文字とシンプルで幾何学的なフォルムが特徴です。レポートや表、技術文章など、タイプライターによる出力を模すために使用されます。

各OSで表示されるフォント

Monospace Code

Monospace Codeの書体は、プログラミングや技術アプリケーションで使用するために特別にデザインされています。すべての文字と文字の幅が同じで、明確で読みやすい形であることが特徴です。

各OSで表示されるフォント

Industrial

Industrialの書体は、19世紀後半に誕生し、当時の技術と産業の進歩に大きく影響されました。大胆なサンセリフの字形、シンプルでわかりやすい外観、直線と幾何学的なフォルムが特徴です。

各OSで表示されるフォント

Rounded Sans

Rounded Sansの書体は、丸みを帯びた曲線の字形が特徴で、よりソフトで親しみやすい印象を与えるのが特徴です。丸みを帯びたエッジは、より有機的で遊び心のある印象を与えるため、カジュアルなデザインや子供向けのデザインに適した書体です。丸みを帯びたサンセリフのスタイルは1950年代から人気があり、現在も広告やブランディングなどのグラフィックデザインに広く使用されています。

各OSで表示されるフォント

Slab Serif

Slab Serifの書体は、各文字の端に太いブロック状のセリフがあることが特徴です。通常ブラケットなしで、文字のメインストロークへの曲線や先細りはありません。

各OSで表示されるフォント

Antique

Antiqueの書体は「Egyptians」とも呼ばれ、19世紀に流行したセリフ書体のサブセットです。ブロック状のセリフと太く均一なストローク幅が特徴です。

各OSで表示されるフォント

Didone

Didoneの書体はモダン書体とも呼ばれ、太いストロークと細いストロークのコントラストが高く、垂直方向の強調され、ブラケットなしのヘアラインが特徴です。18世紀後半に誕生し、19世紀に人気を博しました。

各OSで表示されるフォント

Handwritten

Handwrittenの書体は、手書き風の文字を模倣するようにデザインされています。膨大な数の手書きスタイルがあるにもかかわらず、よりカジュアルで日常的な手書きスタイルを採用するトレンドがあります。

各OSで表示されるフォント

sponsors

top of page

©2024 coliss