← 2026-06-30 の一覧へ戻るホーム
フォントファミリーのおすすめ

2026/06/27 6:37

フォントファミリーのおすすめ

RSS: https://news.ycombinator.com/rss

元のHacker News記事へ ↗
要約▶

日本語訳:

Web 開発者は、一貫性を保証する本物の「web safe」フォントが存在しないため、リモートフォント (

@font-face
) や Arial などの特定のシステムフォントを明示的に指定する依存関係を止めるべきです。核心となる戦略は、一般的なフォントファミリーを使用して信頼性とプライバシーを優先することです。
document.fonts.load()
は拒否されたプロミスを引き起こす傾向があるため、開発者は避けるべきです。また、「system-ui」などの汎用ファミリーだけでは等幅テキストを保証せず、Windows での CJK（中国語・日本語・韓国語）サポートも不十分なため、そのスタイルが必要であれば特定の等幅キーワードを明示的に含める必要があります。長めのスタックで名前付きバリアントを列挙することは推奨されませんが、それらを完全に省略することも解決策ではありません。予期せぬフォントサイズ縮小などの問題を回避するため、開発者はユーザーの好みを尊重しつつ外部アセットを強制しない慎重なスタックを使用すべきです。このアプローチは、ブロックされる可能性があるサブルーソースへの依存を排除し、リソースが欠如して引き起こされるレイアウトの破綻を防ぎ、高速なページロードとユーザーのローカルタイポグラフィ選択の維持を実現します。

本文

ウェブフォントとシステムフォントに関する実践的ガイドライン

1. 特定の名前付きフォントの使用を絶対に行わない

ウェブ上で動作を保証できる「標準フォント（web-safe fonts）」は存在しません。主要プラットフォームすべてで利用可能なものも、また、ネットワーク依存となるウェブフォントも「安全」な選択肢とは言えません。

読み込みリスク

  • インライン埋め込みを行っていない場合、ネットワーク事情により読み込みが失敗する可能性があります。
  • セキュリティ懸念のため、一部のユーザーエージェント（ブラウザ）はフォントの読み込みをブロックする設定を持っています（例：
    uBlock Origin
    はリモートフォント無効化機能を備えています）。
  • データ節約モードを搭載したブラウザではフォント読み込みが遮断されることがあり、これは回避すべき行為です。

JavaScript での注意点

  • document.fonts.load()
    を使用する場合、例外なく成功するとは限りません。Promise が**rejected（拒絶）**される可能性があります。
  • 2020 年から 2025 年にかけての事例で、読み込み破綻が約 4 件発生しています（うち 2 件は 2025 年）。

推奨するフォントスタックの基本原則

a) メモリオ体（Monospace）が必要な場合

  • 必ず汎用ファミリーを含めることが必須です。
  • デフォルト設定が機能しないケース（例：特定のユーザーエージェントや CSS サブセットの設定）が存在するため、完全な対応を依存するのは危険です。
  • 以下の表示欠陥は避けるために、フォールバックとして 
    monospace
    を含めなければなりません。
pre {
    font-family: "jgs", monospace; /* 特定フォント -> fallback に monospace */
}

b) その他のフォントが必要な場合

  • serif
    または 
    sans-serif
    のいずれかをフォールバックとして含めるべきです。
  • これらを指定しない場合、ブラウザのデフォルトフォント（多くは serif）が適用されます。
/* 推奨：Arial は sans-serif より劣っているため避ける */
font-family: Arial, Helvetica, 'Helvetica Neue', Liberation Sans, "Noto Sans", sans-serif;

/* より合理的な指定 */
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

2. システムにインストールされている特定のフォントを列挙するのをやめる

以下のような具体的なフォント名を多数列挙する做法は避けるべきです。

除外すべきフォントリスト

  • Arial: 
    sans-serif
    より劣っており、推奨されません。
  • Roboto: ユーティリティとしてはほぼ役に立ちません。
  • Courier New: macOS の Courier と混同されることが多く、誤ったフォールバック指定になり得ます。

不合理なフォントスタックの例

以下のスタックは非常に非合理であり、単に 

monospace
を使えば十分です。

/* 避けるべき：非合理的な多数のフォント列挙 */
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  • このリストは 
    monospace
    キーワードよりも劣る性能しか発揮しません。
  • 例外：Microsoft Core Fonts for the Web に含まれる Georgia や Times New Roman のように、書字特性が異なり明記が必要な場合は、特定のプラットフォーム向け最適化として認めます。

a) 名前付きフォントの使用制限

  • プラットフォーム固有の最適化を行わない限り、原則として名前付き非ウェブフォントは一つまでに抑えます。
  • modernfontstacks.com
    などが推奨する複雑なスタックは「知恵を超えた規範」と評され、多くの名前付きフォントは削除すべきです。

3. 汎用ファミリー（Generic Fonts）のみに依存すべき理由

ローカルインストールフォントが無用であり、読み込み速度と問題リスクを考慮した上で、ウェブフォントにも同様の原則が適用されます。

font-display
とのトレードオフ

  • font-display
    を利用して読み込み待ちを解決しようとすると、描画差し替え（redraw）やレイアウト再計算（reflow）が発生し、パフォーマンスに悪影響を与えます。
  • ユーザーがシステムで設定済みの良いフォントを使用させる方が、結果として優れている場合があります。

メモリオ体の改善

  • 過去は 
    Courier New
    などの欠陥フォントがデフォルトであったため、多くのスタックに 
    monospace
    を追加して回避する必要がありました。
  • 現在はブラウザのデフォルト設定が大幅に改善されており、
    Menlo
    や 
    Monaco
    などの特定の追加指定は不要です。
  • 単に 
    monospace
     キーワードを使用するだけで十分です。
/* 推奨：簡潔に monospace */
font-family: monospace;

/* 冗長なリストは不要 */
/* font-family: Menlo, Monaco, Lucida Console, ..., monospace, serif; */

コード上の技術的補足

  • monospace, monospace
    の扱い    : ブラウザ仕様上、重複指定は意味を成さない場合がありますが、明示的な 
    font-size
    設定と併せて使用すると安全です。
    • Lightning CSS 使用时：
      monospace, monospace;
      が壊れうるため、一時的に 
      monospace, m
      などの対策が取られることもあります。
  • 推奨アクション: CSSWG に「メモリオ体のデフォルトサイズを 13px から 16px への増加」を提言するよう働きかけることを提案しています。

4. 
system-ui
や 
ui-*
ファミリーをコンテンツ用には使用しない

UI フォントは短いインタフェーステキスト用に設計されており、長文のコンテンツ用としては不適切です。

懸念点

  • 言語対応の問題: macOS では良好ですが、Windows や CJK（中国語・日本語・韓国語）ユーザーでは劣悪なメモリオ体フォントを適用されることがあります。
  • 馬鹿げた外観: Android コミュニティなど一部で意図的にシステム UI フォントを選択する傾向があり、コンテンツとして不釣り合いになります。

業界からの警告

結論：
system-ui
と 
ui-*
の不使用理由

  • これらは「既存の汎用フォントに対する不適切で時代遅れのデフォルト回避手段」として悪用されてきました。
  • 完全なる否定: 
    system-ui
    , 
    ui-serif
    , 
    ui-sans-serif
    , 
    ui-monospace
    , 特に 
    ui-rounded
    は完全に愚かです。
  • Apple 固有の特性であるため、仕様上の必須要素ではなく、単に 
    -apple-
    プレフィックス付きフォントを指定すれば十分です。
/* 避けるべき：コンテンツ用のシステム UI */
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto; 

/* 正解：汎用ファミリーの使用 */
font-family: Arial, sans-serif; /* シンプルかつ有効 */

同じ日のほかのニュース

一覧に戻る →

2026/06/30 4:49

/.self: ホスト環境を構築することを支援する新しいトップレベルドメイン

## 日本語訳: 本件の核心となるメッセージは、ユーザーのデータや注意を搾取する既存のモデルを捨て、倫理的な新アーキテクチャへとインターネットを変革する呼びかけです。Human-Centered Computing Foundation は、ICANN の Applicant Support Program を通じてこのイニシアチブを正式に開始し、その主な目標として、倫理的技術にのみ専属 reserved されるトップレベルドメイン（TLD）の確保を目指しています。この動きは、人間の行動から価値を抽出するという業界の確立されたダイナミクスに直接挑戦し、代わりに人間中心の価値に基づいたシステムを提案しています。 もしこの新しいドメイン拡張を取得することに成功すれば、同財団はユーザーエシクティクスをデータマイニングよりも優先するプロジェクトのみがホストされる特定のデジタル空間を作成します。この転換は大きな利益をもたらすと約束しており、個人は企業の監視ではなく自らの道徳的原則を中心に設計された Web 環境を航行することができます。企業にとっては、持続的な成功には単に注意を採取するのではなく、真の人間のニーズを満たすアーキテクチャが不可欠になる、避けられない未来を示しています。最終的に、このキャンペーンは、技術が人々を利用するために操作するのではなく、人々をサービスするためのセクターとして、誠実さを定義されたインターネットの別個の分野を確立することを目指しています。

2026/06/30 2:05

Qwen 3.6 27B はローカル開発のsweet spot（最適解）です。

## Japanese Translation: 本文は、ローカルコード生成のために Qwen 3.6 27B デンスモデルを優先すること advises（推奨）しています。これは、指示追従の精度と効率的なパフォーマンスのバランスが取れており、Node パッケージの作成といった特定のタスクで失敗する可能性があるように 35B の A3B mixture-of-experts などのより大きなバリエーションを上回る場合があるためです。ベンチマークによると、このモデルは消費者向けハードウェア上で効率的に動作しながら、2025 年の中盤の GPT-5 程度の知能レベルに達します。Apple M5 チップ（共有 RAM を最大 48 GB 使用）では約 30 トokens/秒、量子化された状態で高級な Nvidia RTX 5090 カードでは 50 トokens/秒 にスケールします。重要なのは、著者が倫理的かつ技術的な理由から、Ollama ではなく `llama-server` または `llama-cli` を使用して Hugging Face の量子化版（例：`unsloth/Qwen3.6-27B-MTP-GGUF:Q8_0`）でモデルを実行することを推奨している点です。この構成により、開発者は OpenCode エージェントなどのツールと互換性のあるセキュアな「vibe coding」環境を構築できます。ローカルでモデルを実行することは、データのプライバシーを維持し、機密情報が外部の米中クラウドプロバイダーに漏洩することなく、オフラインでの作業をサポートするために不可欠です。将来的にはツールの呼び出しを通じて事実知識と生粋の知能を分ける傾向があるかもしれませんが、この即席のソリューションは品質を損なうことなく、個人および小規模チームの開発者にとってアクセス可能な入門点を提供します。より大きなモデルが将来的にはエンタープライズレベルのハードウェアを必要とするでしょうが、27B バリエーションは現在、標準的な消費者向けハードウェア上で DeepSeek-V4 Flash などのフロンティア代替案と比較できる堅牢でプライベートな AI 機能を 제공합니다（提供しています）

2026/06/28 0:05

アイコンを解放せよ

## Japanese Translation: 2026 年 6 月 26 日付の投稿で、Paul Kafasis は、macOS 26「Tahoe」がすべてのアプリアイコンに対して義務付けられた統一された「squircle」形状を導入し、ファーストパーティアイコンをボヤけた「Liquid Glass」 appearances に変更したと報告している。多くの人にとってこれはデザインと使いやすさにおける重大な後退だと見られている。サードパーティ製アイコンをこの指定された squircle 形状に強制することで、ユーザーが迅速な識別のために頼りにしていた多様な形状はなくなり、色が主な識別基準になった——特に色覚障害を持つユーザーや類似の色を持つアプリを区別する際には深刻な問題となった。コンプライアンスに反するサードパーティ製アイコンは縮小され、魅力的でない灰色の背景上に表示され、「icon jail」シナリオが引き起こされたほか、Apple の新しい「Clear」と「Tinted」アイコンスタイルは採用率が低かった。これは統一された squircle により識別がほぼ不可能になりつつあったためである。内部的なフィードバックチケット（FB23388490）でこれらの制限への異議が申し立てられたにもかかわらず、macOS 27「Golden Gate」の初期ベータ版では余計な「Liquid Glass」を取り除き、シャープなデザインを復活させ、Automator などのファーストパーティアイコンを見直し、部分的な改善が見られる。Kafasis は、Apple がサードパーティ製アプリに対して単一の squircle 形状を強制することをやめ、多様なアイコン形状を許可してアクセシビリティ、創造性、および総合的な使いやすさを向上させることを求めつつある。

フォントファミリーのおすすめ | そっか～ニュース