CSSのfont-familyの書き方のまとめ、スマホ・デスクトップの各最新OSにインストールされているフォントを使用 -Modern Font Stacks
Post on:2023年4月3日
sponsors
iOS, Android, macOS, Windows, Linuxの各最新OSにデフォルトでインストールされているフォントをCSSで使用するときに、font-familyにどのように定義するとよいのかが分かるModern Font Stacksを紹介します。
日本語フォントには残念ながら対応していませんが、英語フォントを使用する際のfont-familyの書き方がまとめられています。
Modern Font Stacks
Modern Font Stacks -GitHub
Modern Font Stacksの特徴
Modern Font Stacksは、スマホ・デスクトップ用のOSにデフォルトでインストールされているフォントを確認できるサイトです。CSSのfont-familyに定義すると、フォントは各OSで利用可能な最速のフォントで、フォントがダウンロードされる必要はなし、レイアウトが変更されることやテキストが読み込まれるのを待つことなく、すぐにレンダリングされます。
ライセンスはCC0で、商用プロジェクトでも無料で利用できます。
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要素に最適。
|
1 |
font-family: system-ui, sans-serif; |
Transitional
Transitionalの書体は、17世紀後半から18世紀の啓蒙時代につくられたオールドスタイルとモダン書体の中間的な書体です。代表的な例として、英国の新聞「The Times」のためにつくられた「Times New Roman」があります。
|
1 |
font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif; |
Old Style
Old Styleの書体は、斜めの強調、太いストロークと細いストロークによる低いコントラスト、丸みをおびたセリフが特徴で、ルネッサンス期につくられました。代表的な例として、「Garamond」があります。
|
1 |
font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif; |
Humanist
Humanistの書体は、有機的なカリグラフィのフォルムと太いストロークと細いストロークのコントラストが低いことが特徴です。ルネッサンス期の手書き文字からインスピレーションを受けており、ほかのサンセリフ書体よりも読みやすいとされています。
|
1 |
font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif; |
Geometric Humanist
Geometric Humanistの書体は、すっきりとした幾何学的なフォルムと均一なストローク幅が特徴です。モダンで洗練された外観は、見出しやディスプレイ目的によく使用されます。代表的な例として、「Futura」があります。
|
1 |
font-family: Avenir, 'Avenir Next LT Pro', Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif; |
Classical Humanist
Classical Humanistの書体は、ストロークがセリフで終わらずに微妙に広がっていくのが特徴です。古代ローマの大文字やルネッサンス期の墓石の石彫りからインスピレーションを受けています。
|
1 |
font-family: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif; |
Neo-Grotesque
Neo-Grotesqueの書体は、19世紀末から20世紀初頭にかけてつくられたサンセリフのスタイルで、すっきりとした幾何学的なフォルムと均一なストローク幅が特徴です。代表的な例として、「Helvetica」があります。
|
1 |
font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif; |
Monospace Slab Serif
Monospace Slab Serifの書体は、形状に関係なく同じ幅を持つ固定幅の文字とシンプルで幾何学的なフォルムが特徴です。レポートや表、技術文章など、タイプライターによる出力を模すために使用されます。
|
1 |
font-family: 'Nimbus Mono PS', 'Courier New', 'Cutive Mono', monospace; |
Monospace Code
Monospace Codeの書体は、プログラミングや技術アプリケーションで使用するために特別にデザインされています。すべての文字と文字の幅が同じで、明確で読みやすい形であることが特徴です。
|
1 |
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; |
Industrial
Industrialの書体は、19世紀後半に誕生し、当時の技術と産業の進歩に大きく影響されました。大胆なサンセリフの字形、シンプルでわかりやすい外観、直線と幾何学的なフォルムが特徴です。
|
1 |
font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif; |
Rounded Sans
Rounded Sansの書体は、丸みを帯びた曲線の字形が特徴で、よりソフトで親しみやすい印象を与えるのが特徴です。丸みを帯びたエッジは、より有機的で遊び心のある印象を与えるため、カジュアルなデザインや子供向けのデザインに適した書体です。丸みを帯びたサンセリフのスタイルは1950年代から人気があり、現在も広告やブランディングなどのグラフィックデザインに広く使用されています。
|
1 |
font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif; |
Slab Serif
Slab Serifの書体は、各文字の端に太いブロック状のセリフがあることが特徴です。通常ブラケットなしで、文字のメインストロークへの曲線や先細りはありません。
|
1 |
font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif; |
Antique
Antiqueの書体は「Egyptians」とも呼ばれ、19世紀に流行したセリフ書体のサブセットです。ブロック状のセリフと太く均一なストローク幅が特徴です。
|
1 |
font-family: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif; |
Didone
Didoneの書体はモダン書体とも呼ばれ、太いストロークと細いストロークのコントラストが高く、垂直方向の強調され、ブラケットなしのヘアラインが特徴です。18世紀後半に誕生し、19世紀に人気を博しました。
|
1 |
font-family: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif; |
Handwritten
Handwrittenの書体は、手書き風の文字を模倣するようにデザインされています。膨大な数の手書きスタイルがあるにもかかわらず、よりカジュアルで日常的な手書きスタイルを採用するトレンドがあります。
|
1 |
font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive; |
sponsors
