CSS `font-family` の推奨事項

 (chrismorgan.info)
1 ポイント 投稿者 GN⁺ 12 시간 전 | 1件のコメント | WhatsAppで共有
  • Web で特定のフォント名を当てにしてデザインすると、プラットフォーム・ネットワーク・セキュリティ設定によって崩れることがあるため、font-family は総称ファミリー fallbackを前提に組むべき
  • 等幅表現が必要なコード・アートワーク・レイアウトには monospace を必ず含めるべきで、serif と sans-serif も望む系統を保証したいなら一緒に指定するほうが安全
  • ローカルにありそうなフォントを長く列挙するスタックはたいてい実益が小さく、ブラウザーの総称ファミリーのデフォルト値のほうがよりよい選択をする可能性もある
  • Web フォントは無い場合より遅く、読み込み失敗や font-display の妥協を生むため、コンテンツにはユーザーのデフォルトフォントをそのまま使う選択も現実的
  • system-ui と ui-* は短い UI テキスト向けの性格が強く、長いコンテンツや言語対応に向かないことがあり、コンテンツ用デフォルトフォントの代替手段として使うのは危険

フォント名を信用しない

  • すべての主要プラットフォームで共通提供されるWeb セーフフォントは存在しないため、特定のフォント名が常に動作すると仮定してはいけない
  • Web フォントも確実な解決策ではない
    • インライン化されていないサブリソースは、さまざまなネットワーク上の理由で読み込みに失敗することがある
    • フォント読み込みはセキュリティ上の懸念がある領域なので、一部環境ではブロックされうる
    • uBlock Origin にはリモートフォントを無効化する専用ボタンがある
    • 一部ブラウザーのデータ節約モードはフォント読み込みを止めることがあり、止めない場合でも止めるべきだという立場
  • ユーザーが Web サイト独自のフォント選択を許可しない場合、動作するのは総称ファミリーだけ
  • JavaScript で document.fonts.load("1em my-web-font") を使うと、返される Promise が reject されることがある
    • 2020–2025 年の 6 年間で、この問題により壊れた事例を約 4 件見ており、そのうち 2 件は 2025 年に発生している

代替系統は必ず明示する

  • 等幅テキストが必要なら、font-family に必ず monospace を入れるべき
    • monospace の欠落は多くのユーザーには見えないが、一部環境ではレイアウトや作品の意図を損なうことがある
    • 例として Adel Faure の ASCII might fly? は執筆時点で monospace が抜けており、等幅でない形に見える可能性がある
  • serif や sans-serif も、望むフォント系統への fallback が必要なら含めるほうがよい
    • 例: font-family: Arial, sans-serif;
    • 例: font-family: Times New Roman, serif;
    • 入れないとデフォルトフォントが使われ、それは serif かもしれないし、まったく別物かもしれない

インストールされていそうなフォント列挙を減らす

  • Arial, Helvetica, Helvetica Neue, Liberation Sans, Noto Sans のようにシステムにありそうなフォントを長く列挙する方法は、概して役に立たない
  • 特に Arial は、sans-serif よりよい選択になることはないと考えている
  • sans-serif は、明示したフォント群に劣らないフォントとして解釈されうえに、よりよいフォントが選ばれる可能性もある
  • 実際に見た等幅指定の例は過度に長いリストだった
    • font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif
    • この指定は font-family: monospace, monospace より厳密に悪く、monospace はこの一覧に劣らないフォントとして解釈されうる
  • 名前付きの非 Web フォントを完全に禁止する必要はないが、最大 1 つ程度が妥当
    • Georgia) と Times New Roman はどちらも Microsoft の Core fonts for the Web に属する serif だが、性格は異なる
    • Georgia は Times New Roman よりずっと横幅が広いため、スタイル上その特性が必要なら font-family: Georgia, serif は許容できる選択
  • modernfontstacks.com と リポジトリ には、プラットフォーム別のフォント選択アイデアが載っている
    • ただし名前付きフォントを過剰に処方しており、かなりの部分は削ったほうがよいという評価
    • Courier New の扱いはかなり誤っており、画像は macOS Courier で作られたように見える

総称ファミリーだけを使う選択

  • ローカルインストール済みフォントの列挙を減らしたなら、Web フォントも本当に必要か見直せる
  • Web フォントは、Web フォントが無い場合より遅く、読み込み問題を生むことがある
    • そのため font-display がある
    • しかし block・swap 期間、再描画、リフローの間のトレードオフを扱う代わりに、ユーザーが持つフォントをそのまま使う選択もできる
  • monospace でも総称ファミリーだけを使う選択は可能
    • かつて monospace のデフォルト値はよくなく、特に Microsoft の Courier New#Courier_New) はデジタル化が不適切で、400 ではなく実質 200–250 weight のように見えていた
    • その後 Apple が Menlo) を導入し、ブラウザーのデフォルト monospace が更新されていなかった時期に、人々はフォントスタックへ Menlo を入れ始めた
    • 現在のブラウザーデフォルトはどれも改善されており、すべての場面で素晴らしいとは限らないが、もはや悪くはない
  • Menlo, Monaco, Consolas, Bitstream Vera Sans Mono, Courier, Courier New のような一覧を捨てて、monospace だけを残す選択ができる
  • Courier New を意図的にフォントスタックへ入れるのは、強く否定的に評価されている

monospace, monospace とブラウザー動作

  • font-family: monospace; を明示的または暗黙的に使うと、font-size が 100% ではなく、おそらく 81.25% にデフォルト設定されることがある
    • ユーザーは総称ファミリー用フォント、デフォルト文字サイズ、デフォルト等幅文字サイズを変更できる
  • リストに 2 つ目の family があると、この動作は発生しない
    • font-family: my-web-font, monospace; は問題ない
    • font-family: monospace, monospace; も問題ない
    • 直接 font-size を指定する方法もある
  • Lightning CSS には monospace, monospace を壊してしまう問題がある
  • この問題は monospace にだけ影響する
  • ブラウザーが monospace のサイズ動作をやめ、おそらく 13px の値をおそらく 16px に引き上げるよう説得したいという立場
    • 提案先は CSSWG になりうる

コンテンツに system-ui と ui-* を使わない

  • UI フォントは短い UI テキスト用であり、長いコンテンツ用ではない
  • UI フォントはコンテンツ言語を十分にサポートしない可能性がある
  • 一部ユーザーは意図的におかしなシステム UI フォントを選んでいることもあり、Android の一部コミュニティではかなり一般的だという
    • system-ui を使うと、コンテンツもそのように見えるおそれがある
  • w3c/csswg-drafts issue #3658 は system-ui のさまざまな問題を議論しており、system-ui が広範に乱用されたという結論を含んでいる
  • mdn/content issue #41244 は MDN に過度な使用を警告する note を追加している
  • system-ui と ui-* は、よりよいデフォルトフォントを得るための proxy のように使われてきたが、その用途は好ましくない
  • system-ui は失敗だったという立場
    • -apple-system だけを残し、BlinkMacSystemFont がそれに置き換わるべきだったという見解
    • 標準化当時、他プラットフォームには有用な同等概念がなく、現在はいくつかのプラットフォームに生まれたと見ている
    • 既存の総称ファミリーの古いデフォルト値をブラウザーが更新しなかった問題を回避する用途として、ほとんど乱用されてきたと見ている
  • ui-serif, ui-sans-serif, ui-monospace, とりわけ ui-rounded は削除されるべき明白な失敗だという立場
    • Apple 以外の環境では、どんなフォントにもマッピングされることは期待できない
    • 概念自体が Apple プラットフォームにしかないため、標準に含まれるべきではなかった
    • Apple が提供するなら、-apple-system のように -apple 接頭辞の形であるべきだったという見方
  • Web アプリにおける system-ui の正当なユースケースはあるが、実際にはほぼ完全に乱用されてきた印象で、削除への介入も悪くないかもしれない

関連記事

1件のコメント

 
GN⁺ 12 시간 전
Lobste.rs の意見

  • https://lindenii.org では、font-familyをまったく指定しない方式を採っていて、ユーザーがブラウザで選んだ既定フォントを尊重している
    個人的にはサンセリフを好むが、ユーザーがセリフをデフォルトにしているなら、わざわざ上書きする理由はないように思う
    ただし https://runxiyu.org/soc/ta/ のように、たいていのフォントにない文字を使わなければならない場合は、Webフォントを入れざるを得ず、その結果、他のテキストまでユーザーの既定値ではなくサンセリフに強制される問題が生じる
    変わった文字ごとに <unusual-character> のようなもので囲まない限り、より良い方法があるのか分からないし、「ユーザーが好むコード用フォント」のようなものを指定する方法もあればいいのにと思う
    monospace, monospace のコツはありがたかったし、サイズの違いはかなり紛らわしかった

    • 2つ目の問題については、特殊な文字の横に画像による代替表示を置くのが、妥当なフォールバックになるかもしれない
      Unicode文字一覧サイトはそういう形で処理している
    • 私のブログ https://hauleth.dev でも似たようなことをしているが、monospace を使っている
      サイトデザインを褒められたこともあるが、実際にはZolaのテーマを1つ持ってきて、CSSとカスタム要素を減らした程度なので、とくに個人ページについてはこの記事の趣旨にかなり共感する
    • font-family をまったく指定しない立場としては、ブラウザの既定のデフォルトフォントがセリフからサンセリフに変わるほうが、ユーザーにとってはむしろ良いかもしれないと思う
      大半のユーザーは自分でフォントを選ばないので、「ユーザーが選んだフォント」と「ブラウザのデフォルトフォント」を区別する方法がない
      セリフは好きだが、今では大多数はサンセリフをより好む可能性が高い
      私の環境では、ページがフォントを指定できないようにしてあり、まともなCJKフォントもインストールしていない
      漢字の代わりに「4E2D」のような四角が出ても、その表意文字と同じくらい私には意味がないと考えたからだ
      そうしたフォールバックフォントの処理自体はよくできているが、残念ながら既定フォントの名前を直接指定する方法はない
      その代わり、JavaScriptで空の文書に対して getComputedStyle(document.documentElement).fontFamily を見ると、私の高度なフォント設定に応じて "serif" または "sans-serif" が返る
      「コード用の好みのフォント」が正確に何を意味するのかは分からず、monospace 以外の何かを考えているように見える

  • この記事はまだ草案で、かなり未完成のままで、2〜3種類の異なる断片が混ざっているので、やや雑然としている
    最終的にはおそらく1ページ以上になり、今とはかなり違う形になりそうで、一部は手書き・手描き・手作業レイアウトになるかもしれない
    最近は代わりに軽量マークアップ言語の実装に集中していて、ほぼ使える状態になってきたので、最後の90%だけが永遠に残り続ける感じだ
    そのあとでまた記事を書いて公開する予定

  • font-family: monospace; を使うと、font-size が100%ではなく**81.25%**にデフォルト設定されることがあり、一覧に2つ目のフォントがあるとそうならない、という点は本当に興味深い
    font-family: my-web-font, monospace; や font-family: monospace, monospace; なら問題ないということだが、MDNには現時点で文書化されていないように見える
    なぜこうなるのか、そしてなぜ文書化されていないのか説明できる人がいるのか気になる

    • 記憶では、Firefoxは実際にはこのフォントサイズ調整を行わず、Chromeは行う
      そのためブラウザ間の不一致の原因にもなっている
    • おそらく、固定幅テキストが本文テキストと視覚的に同じ大きさに見えるようにする意図だったのかもしれない

  • 草案とはいえ、文中であるセクションが2回目にそのままコピー＆ペーストされたような妙な重複がある
    とくに、私の好きな等幅フォントがあまり良くないという含みだったので、なおさら気になった

    • まだ構成を組み直している最中なので、そういう部分が残っている
      よく読むと、確定的な推奨として残す内容と、もっと微妙な立場を取るべき内容を整理している途中なので、軽い矛盾もある
      どんな等幅フォントが好きなのか気になる

  • serif と sans-serif だけを使えないようにする理由の1つは、既定のセリフフォントがしばしばTimesで、あまり良くないと感じるからだ
    そのため本文フォントをセリフからサンセリフへ移している

  • 「システムに入っていそうなフォントを列挙しないこと」と「等幅フォントもできるだけ一般ファミリーだけを使うこと」という助言に関連して、私のWebサイトでは次のように設定している
    --sans-serif: Adwaita Sans, Adwaita Sans Bundled, Inter, sans-serif; と --monospace: Iosevka, Iosevka Web, Cascadia Code, monospace; を使う形だ
    意図としては、GNOMEに Adwaita Sans が入っていればシステムフォントを使ってWebフォントをダウンロードせず、なければ Adwaita Sans Bundled のWebフォントを使い、読み込み中はメトリクスの近いInterと sans-serif にフォールバックさせることにある
    等幅でも同様に、システムの Iosevka があればそれを使い、なければ Iosevka Web のWebフォントを使い、読み込み中はCascadia Codeと monospace にフォールバックするようにした
    Windowsの monospace はConsolasなので好みではなく、新しいWindowsにはCascadia Codeが入っている点も考慮した
    Cascadia CodeがIosevkaとメトリクスがかなり異なるのは良くないと分かっているが、このアプローチがどうか気になっている

    • Webプログラミングの知識がほとんどないので、「システムにインストールされていないときだけフォントをダウンロードする」ためのもっと良い方法を見落としているのかもしれない

  • すっきりした文章で、monospace, monospace のコツはまったく知らなかった
    些細な書式の問題だが、私のブラウザでは .unimportant 段落のテキストが黄色い背景の前に来る一方で、固定された .status バーのテキストの後ろに潜り込むので、.unimportant 区間をスクロールで通過すると妙に見える
    斜めのDRAFTウォーターマークでも似たようなことが起きているようだ