モダンフォントスタック

概要

代表的なフォントスタック の種類とその用途を日本語で整理 CSSでのfont-family指定例 を各カテゴリごとに解説 主要な文字セット （Basic Latin、Latin-1、ギリシャ文字、キリル文字等）のプレビュー付き Alice’s Adventure in Wonderland 冒頭テキストの一部もサンプルとして紹介 Webデザインや開発でのフォント選定 に役立つ内容

代表的なフォントスタックとCSS指定例

System UI
- システム標準UIフォント利用
- font-family: system-ui, sans-serif; font-weight: normal;
- 可読性・親しみやすさ 重視のUIデザイン向け
Transitional
- Charter, Cambria等のトランジショナルセリフ体
- font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif; font-weight: normal;
- 本文向け ・伝統的な雰囲気
Old Style
- Iowan Old Style, Palatino等のオールドスタイルセリフ体
- font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif; font-weight: normal;
- クラシックな印象 ・長文の読みやすさ
Humanist
- Seravek, Gill Sans Nova, Ubuntu等のヒューマニストサンセリフ
- font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif; font-weight: normal;
- 柔らかく親しみやすい デザイン
Geometric Humanist
- Avenir, Montserrat等の幾何学的ヒューマニスト
- font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif; font-weight: normal;
- モダンで洗練された印象
Classical Humanist
- Optima, Noto Sans等
- font-family: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif; font-weight: normal;
- バランスの取れた可読性と美しさ
Neo-Grotesque
- Inter, Roboto, Helvetica Neue等
- font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif; font-weight: normal;
- 現代的なUIや本文 に最適
Monospace Slab Serif
- Courier New等の等幅セリフ体
- font-family: 'Nimbus Mono PS', 'Courier New', monospace; font-weight: normal;
- コード表示や技術文書
Monospace Code
- Cascadia Code, Source Code Pro等
- font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; font-weight: normal;
- プログラミング用 等幅フォント
Industrial Display
- Bahnschrift, DIN Alternate等
- font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif; font-weight: normal;
- 工業的・力強い 印象
Rounded Sans Display
- Quicksand, Comfortaa等の丸みサンセリフ
- font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif; font-weight: normal;
- 親しみやすさ・カジュアル感
Slab Serif Display
- Rockwell, Roboto Slab等
- font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif; font-weight: normal;
- 見出し・強調表示
Antique Display
- Superclarendon, Bookman Old Style等
- font-family: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif; font-weight: normal;
- レトロ・クラシックな雰囲気
Didone Display
- Didot, Bodoni MT等
- font-family: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif; font-weight: normal;
- 高級感・エレガントなデザイン
Handwritten Display
- Segoe Print, Bradley Hand等
- font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive; font-weight: normal;
- 手書き風・親しみやすい印象

主要な文字セットプレビュー

Basic Latin (ASCII)
- 英数字・基本記号の網羅
Latin-1 (ISO 8859-1)
- 西欧言語の拡張文字
Latin Extended-A/B
- 中欧・東欧言語対応
Greek
- ギリシャ文字
Cyrillic
- ロシア語などのキリル文字
General Punctuation, Letterlike Symbols, Number Symbols
- 記号類・丸囲み数字・ローマ数字等
Arrows, Mathematical Operators
- 矢印・数学記号
Enclosed Alphanumerics, Space Modifier Letters
- 囲み英数字・発音記号

Alice’s Adventure in Wonderland（サンプルテキスト）

Aliceがウサギを追いかけて穴に落ちる 冒頭シーン
Project Gutenberg からのテキスト引用
多様なフォントでの表示確認 やデモに最適

フォント選定のポイント

用途や雰囲気 に合ったフォントスタック選択
多言語対応や記号の充実度 も考慮
Webフォントとシステムフォント の組み合わせ活用
可読性・アクセシビリティ の確保
CSSでのfont-family指定の柔軟性 活用

まとめ

フォントスタックの理解と適切な利用 がWebデザイン品質向上に直結
CSSでの指定例 を参考に、目的に合ったフォント選択推奨
多様な文字セット に対応することで、グローバルな情報発信が可能

Hackerたちの意見

いいリソースだね。前にどこかで見た気がするけど、HNだったかな。

└

https://news.ycombinator.com/item?id=35150345 ("Show HN: Modern Font Stacks – 新しいシステムフォントスタックCSS for 現代のOS (modernfontstacks.com)" (2023); コメント数: 144)

└

https://news.ycombinator.com/from?site=modernfontstacks.com

“system ui”フォントにはフラッシュはないけど、OSごとにフォントが違うってこと？

└

使い方によってはそれがプラスになることもあるよ。例えば、基本的なウェブアプリならホストOSのスタイルに合わせた方がいいし、主に読むためにデザインされたドキュメントなら、あんまり関係ないと思う。どうせ人々はページでいろいろやるし（リーダーモード、10-20倍のズーム、フォントをブロックする広告ブロッカーとか…）。

└

これは、一般的に消費者向けのサイトやアプリにはあまり良い解決策じゃないと思う。多くの場合、ブランディングが重要だし、クロスプラットフォームでの一貫したレンダリングも大事だよね。でも、社内向けのダッシュボード的なアプリでは、システムUIを使っていい経験をしてる。私はスタートアップの主なUIデザイナーで、内部使用専用の可視化ツールやモニタリング系のコードを書く人にはこのフォントスタックをおすすめしてる。みんなChrome使ってるし、Macだし、CDNを呼び出したりフォント資産を管理したりせずにSF Proをページに載せられるのは嬉しいよね。

これ結構使ってるよ！少なくとも、カスタムフォントを使うなら、これらのスタックを使うことで、サードパーティのリソースブロッカーや変なブラウザを使ってるユーザーにも、意図した体験に近づけることができるよ。例えば、Google FontsのInterの提案をそのまま使うと、font-family: "Inter", sans-serif; になるけど、これを font-family: "Inter", system-ui, sans-serif; に変える。EB Garamondの場合も、font-family: "EB Garamond", serif; から font-family: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif; に変える。これで遅い接続でもレイアウトのシフトが少なくなるよ。1. https://fonts.google.com/specimen/Inter 2. https://fonts.google.com/specimen/EB+Garamond

└

https://screenspan.net/fallbackは、どのシステムフォントが意図したウェブフォントに最も似ているかを調べるのに良いリソースだよ。例えば、俺のケースでは、VerdanaがRoboto Serifと似たメトリクスを持ってる。

このテクニックで気をつけるべき例があって、実際には自分やユーザーが意図したフォントとは違うフォントが表示されることがあるんだ。具体的な例を挙げると：環境 - Windows 10の最新Firefox。 - 手動でインストールしたフォント「Cascadia Code」と「JetBrains Mono NL」。 - Firefoxのデフォルト「monospace」フォントは「JetBrains Mono NL」に設定。font-family: monospace;を設定すると「JetBrains Mono NL」が表示される。font-family: 'Cascadia Code', monospace;を設定しても「JetBrains Mono NL」が表示される。プライバシー機能が標準外のシステムフォントのクエリをブロックしていて、コンソールに警告メッセージが表示される。「フォント「Cascadia Mono」のリクエストが可視性レベル2でブロックされました（レベル3が必要）」ってね。で、このページにある「Monospace Code」フォントスタックを使うと、font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;、結果は…そう、'Consolas'になる！ 1. ui-monospace - Firefoxではサポートされてないから残念（これも'Consolas'になる）。 2. Cascadia Code - 上記の通り、Windows 10にネイティブにないからアクセス拒否（それに、コーディングのリガチャ…むしろイリガチャだよね？）。 3. Source Code Pro - 利用不可でスキップ。 4. Menlo - 利用不可でスキップ。 5. Consolas - 次の選択肢、これは利用可能で選ばれる。 6. DejaVu Sans Mono - スキップ、フォントはすでに決まってる。 7. monospace - スキップ、フォントはすでに決まってる。これらのモダンフォントスタックは最悪だね。もし特定のフォントを表示したいなら、実際のウェブフォントを使って、デフォルトの'monospace'にフォールバックするべきだよ。ユーザーがコントロールしてるから。

└

あなたの例は勉強になるけど、問題が何なのかよくわからない。これは意図通りに動いてるんじゃないの？

└

ウェブページは、変わったエソテリックなブラウザの設定に対応するためにフォントスタックを避けるべきじゃないと思う。もしユーザーとしてどこでも違うフォントを見たいなら、フォントフェイスをブロックするような侵入的なツールが必要になるよ。あるいは、Firefox（このメッセージが来てるブラウザ）には「ページが自分のフォントを選ぶのを許可する」って設定がある。

└

これは素晴らしい分析だけど、環境の説明で一つの特定の詳細を忘れてると思う：- Firefoxのブラウザプライバシー強化トラッキング保護設定が「厳格」に変更されてること。これはデフォルトじゃなくて、こういう結果が起こる可能性があるって明示してるんだ。でも、ここでの状況はすべての面で最適じゃないってことには本当に同意する。あと、設定で「ページが自分のフォントを選ぶのを許可する」を外すだけで、どこでも自分の（3つの）フォントフェイスを強制することができるってことも覚えておく価値があるかも。これ、核オプションだけど、時々使ってるし、かなり使えるよ。ちなみに、面白いことに、現代のフォントスタックで（ローカルの）Cascadiaを厳格トラッキング保護モードでも動かすための少し柔らかいワークアラウンドがあるんだ：俺は「userstyle」[0]（正確にはStylusのuserCSS）を持ってて、それが「Consolas」を同じ名前の@font-faceにリマップして、src: local("Cascadia Mono")を読み込むようになってる。これがなぜそれを回避するのかはよくわからないけど（Stylusで注入されたスタイルがページスタイルより特権があるとは思えないし）、でもうまくいってるから嬉しいよ。[0] https://userstyles.world/style/23838

└

もしかしたら、俺がブラウザでフォントがどう選ばれるかに慣れてるからかもしれないけど、あなたのモノスペースコードの例は「ユーザーが意図したフォントとは違うフォントをレンダリングする」ってどう示してるの？俺には、そのフォントが意図した通りにレンダリングされてるように見えるんだけど。ルールが適用されて、オプションのシリーズが順番に考慮されて、最初に合格したものが使われるって感じ。こういうフォールバックのシリーズがどう働くことを期待するの？

└

面白いね。「プライバシー機能がページが非標準のシステムフォントを問い合わせるのを防ぐ」って。いろんなブラウザがどのフォントを「標準」と見なしているのか、どこにドキュメントがあるのか知ってる？答えは分かってる気がするけど、希望は捨てたくないね。

└

どうやったらブラウザがこんな風に「保護」しないようにできるの？

よくわからないな、もしかしたら俺のスマホが古いだけかもしれないけど、このページで見たフォントは3種類だけだった：セリフ、サンセリフ、モノスペース。俺のスマホには他のフォントがないから、どのカテゴリも同じに見えた。これって他のデバイスではもっと良い体験になるの？俺にとっては、特定のフォントを見せたいならフォントを配布しないとダメだってことを再確認させられたから、あんまり役に立つデモじゃなかったな。

└

あなたはAndroidを使ってるのかな？システムフォントに関してはそこが弱点で、ほんの数種類しか入ってないから、実際には多くのスタックが同じように見えちゃうんだ。GitHubのページに行くと、各プラットフォームでのスタックのレンダリングのスクリーンショットがあるよ。Androidが提供するもので満足できないなら、WindowsとAppleのシステムフォントを優先して使って、もしそれがなければウェブフォントにフォールバックするハイブリッドスタックを作るのも一つの手かもね。

今、俺のウェブサイトとブログのウェブフォントCSSファイルは89734バイトのサイズなんだ。これはすごく速い読み込みで、途上国の4Gネットワークでも「フォント変更フラッシュ」がほんの一瞬で済む。要するに、ウェブフォントの時代に大きなフォントスタックを持つ意味がわからない。見栄えのいい「コンテンツのフラッシュ」を得るために、https://screenspan.net/fallbackを使ったんだけど、そこで見つけたのは、Verdana（Android/ChromeOS以外ではどこでも使えるし、Linuxでも簡単に手に入る）が、俺のブログで使っているRoboto Serifとほぼ同じメトリクスを持っているってこと。ちなみに、Roboto Serifは2020年代の非常に良いオープンソースのVerdanaの代替だと思う：読みやすいし、OFLライセンスも付いてるしね。

└

ウェブフォントを使っている場合でも、こういうフォントスタックの小さいバージョンを用意するのは悪くないと思う。ウェブフォントを無効にすることにこだわる人は、どのサイトでも少数派だろうけど、確かにいるよね。（特にこのサイトみたいなところでは、その割合がもっと高いことが多い。ウェブ開発者が自分たちのためにフォントを選ぶのがどれだけ傲慢か、CSSは間違いだった、神が意図した通りにVT100端末に戻るべきだ、みたいなことをすぐに主張しに来る人たちがね。）

同様に：https://www.cssfontstack.com/

└

これには驚いた：Helvetica Win: 7.34% Mac: 100% マイクロソフトがHelveticaよりもArialを好むのは知ってるから、驚くべきことではないと思うけど、macOSがこんなに広く採用するとは思わなかった。Arial Win: 99.84% Mac: 98.74% でも、Macは最初からこういうことのために設計されてるからね。

個人サイトで約20年近く、Verdanaのコアウェブフォントを使ってるけど、今でもすごく読みやすくて目にも優しいと思ってる。現代のウェブフォントよりも「カーニング」がしっかりしてると感じることが多いし、どこでも使えるのがいいね。

ハクソク