メインコンテンツまでスキップ
  • Created:
  • Updated:
  • Author:
    Takeshi Takatsudo

日本語フォントファミリーの指定

問題​

日本語Webサイトのfont-family指定は、ラテン文字サイトと比べて格段に複雑です。sans-serifと書くだけでは不十分で、ブラウザはOSによって大きく異なるシステムのデフォルトにフォールバックし、古いOSではビットマップフォントで日本語が表示されることもあります。主な課題は以下の通りです：

  1. プラットフォームの分断: macOSにはヒラギノフォントが、Windows 10以降には游ゴシックが、Linux/Androidにはほぼ Noto Sans CJK が搭載されています。良い表示結果を得るには、各プラットフォームのフォント名を明示的に指定する必要があります。
  2. 日本語フォントにはラテングリフが含まれる: 日本語フォントにはすべてASCII文字の独自グリフが含まれています。日本語フォントを先に指定すると、英数字や記号がすべて日本語フォントのラテン字形でレンダリングされます。これは専用のラテン書体と比べて一般的に幅が広く、精度も劣ります。
  3. 游ゴシックのウェイト表示バグ: Windows上の游ゴシックは、Windowsのフォントマッピングの仕様によりfont-weight: normalで極細のストロークウェイトでレンダリングされます。回避策なしでは、日本語テキストが不自然に細く表示されます。
  4. Webフォントのファイルサイズ: 日本語の文字セットには数千のグリフが含まれます。Noto Sans JPは非圧縮で約9MB（TTF）にもなります。WOFF2でも全文字セットは数MB以上になり、サブセット化やバリアブルフォント戦略なしでは実用的なWebフォントとして使えません。

解決方法​

現代的なアプローチでは、順番を慎重に検討したシステムフォントスタックを使います。順序の原則は次の通りです：

  1. 欧文Webフォント（ある場合）を先頭に — 英語テキストが意図した書体で表示されるよう
  2. 日本語システムフォントをプラットフォームごとに
  3. 最終フォールバックとしてsans-serif

プラットフォーム別フォント一覧​

プラットフォーム推奨フォント備考
macOS / iOS"Hiragino Sans"macOS 10.11 El Capitan以降のデフォルト。10段階のウェイト
macOS（互換用）"Hiragino Kaku Gothic ProN"古いが広くサポートされている。2ウェイトのみ
Windows 10+"Yu Gothic UI"ウェイトマッピングが正しいUIバリアント
Windows 10（フォールバック）"Yu Gothic"オリジナル。デフォルトウェイトで細く表示される
Windows Vista〜8.1"Meiryo"レガシー。現在はデフォルトではないため、古いOS対応用として含める
Linux / Android"Noto Sans CJK JP"オープンソース。ほとんどのLinuxディストリビューションに収録
Android（Google Fonts）"Noto Sans JP"Android上やGoogle Fonts経由で使われるサブセット版

推奨スタック​

body {
  font-family:
    /* 1. 欧文Webフォント（@font-faceやGoogle Fonts経由で読み込んでいる場合） */
    'Inter',
    /* 2. macOS / iOS — モダンなヒラギノ（10ウェイト） */
    'Hiragino Sans',
    /* 3. Windows 10+ — "Yu Gothic UI"がウェイト表示バグを修正 */
    'Yu Gothic UI',
    'Yu Gothic',
    /* 4. 古いmacOS / iOSの互換用 */
    'Hiragino Kaku Gothic ProN',
    /* 5. Linux / Android */
    'Noto Sans CJK JP',
    'Noto Sans JP',
    /* 6. 最終フォールバック */
    sans-serif;
}

欧文Webフォントを使わない場合​

欧文Webフォントを読み込まない場合は、ステップ1を省略します。ブラウザは最初に解決された日本語フォントのラテングリフを使用します。これはブランドタイポグラフィとして理想的ではありませんが、許容範囲内です：

body {
  font-family:
    'Hiragino Sans',
    'Yu Gothic UI',
    'Yu Gothic',
    'Hiragino Kaku Gothic ProN',
    'Noto Sans CJK JP',
    'Noto Sans JP',
    sans-serif;
}

游ゴシックのウェイト修正​

"Yu Gothic UI"はWindows 10以降に搭載された游ゴシックのUI最適化バリアントです。font-weightの値を正しくマッピングするため、font-weight: 400で読みやすいストロークウェイトでレンダリングされます。オリジナルの"Yu Gothic"は700未満のウェイトをすべて最も細いバリアントにマッピングするため、本文テキストが極細になってしまいます。

スタックでは必ず"Yu Gothic UI"を"Yu Gothic"より前に記述してください：

/* 誤り — WindowsでYu Gothicがウェイト400で細く表示される */
font-family: 'Hiragino Sans', 'Yu Gothic', sans-serif;

/* 正しい — Yu Gothic UIはウェイトマッピングが正確 */
font-family: 'Hiragino Sans', 'Yu Gothic UI', 'Yu Gothic', sans-serif;

コード例​

推奨スタックの動作確認​

推奨日本語フォントスタック — 日本語と欧文の混在テキスト

欧文フォントの順序: 日本語フォントより前か後か​

日本語フォントには独自のラテングリフが含まれています。日本語フォントを欧文フォントより前に指定すると、すべてのASCII文字が日本語フォントのラテン字形でレンダリングされます。これは一般的に幅が広く、スペーシングやストロークコントラストも異なります。欧文フォントは必ず先頭に置いてください。

欧文フォントの順序 — 日本語フォント先頭 vs 欧文フォント先頭

日本語テキストのフォントウェイトバリエーション​

日本語フォントは欧文フォントと同じfont-weightスケールをサポートしますが、動作はOSのフォントと利用可能なウェイトによって異なります。ヒラギノSansは10段階のウェイト（W0〜W9）を提供しますが、ヒラギノ角ゴシックProNは2段階（W3、W6）のみです。

フォントウェイトスケール — 異なるウェイトでの日本語テキスト

包括的なシステムスタック vs 最小限のフォールバック​

このデモは、包括的なシステムスタックとsans-serifだけに頼った場合の違いを示します。ほとんどのモダンデスクトップブラウザでは結果が似て見えることもありますが、CJKフォントの設定が不十分なLinuxシステムでは、sans-serifがビットマップや形の悪いフォントにフォールバックすることがあります。

包括的なスタック vs sans-serifのみ

AIがよくやるミス​

  • 日本語システムフォントをまったく省略する — system-ui, sans-serifのみを使い、日本語フォント名をまったく指定しない。フォント選択がブラウザのデフォルトマッピングに完全に委ねられ、プラットフォーム間で一貫性のない結果になる
  • 日本語フォントを欧文フォントより前に並べる — 英語テキスト、数字、記号が意図したラテン書体ではなく日本語フォントのラテングリフでレンダリングされる
  • "Yu Gothic UI"なしで"Yu Gothic"を使う — Windows 10で通常ウェイトのテキストが極細になる。"Yu Gothic UI"を必ずスタックの先に置かなければならない
  • "Meiryo"をWindowsのメインフォントとして含める — MeiryoはWindows VistaとWindows 7のデフォルトだったが、Windows 10以降は游ゴシックがデフォルト。Meiryoは互換フォールバックとして游ゴシックの後に置くべき
  • サブセット化なしで日本語Webフォントを読み込む — すべてのページでNoto Sans JPなど（9MB以上）をフルでダウンロードする。システムフォントならダウンロードコストゼロで同等の表示が得られる
  • 日本語テキストにitalicスタイルを使う — 日本語フォントには真のイタリック体がない。ブラウザはCSSのobliqueトランスフォームを適用するため、文字が斜めに傾いて不自然に見える
  • ヒラギノ角ゴシックProNをmacOSの現行フォントと見なす — "Hiragino Sans"（macOS 10.11で追加）は10段階のウェイトを持つ現代的な後継フォント。ProNの2ウェイトより優れており、常にヒラギノSansを先に並べるべき

使い分け​

フルシステムフォントスタックは、次のような日本語Webサイトやアプリケーションで使います：

  • ページに日本語テキスト（本文、見出し、UIラベル）が含まれる
  • macOS、Windows、Linux間で一貫したレンダリングが必要
  • 日本語Webフォントを読み込まない（パフォーマンスを考慮した一般的なケース）

欧文Webフォントを先頭に含めるのは：

  • ブランドが特定のラテン書体（Inter、Noto Sans、Robotoなど）を使っている
  • プラットフォーム間で欧文の一貫したレンダリングが重要
  • 他の理由（バリアブルフォントなど）ですでにWebフォントを読み込んでいる

日本語Webフォント（Noto Sans JP、BIZ UDPGothicなど）を読み込むのは：

  • プリント品質のデザインシステムなど、クロスプラットフォームでの完全な視覚的一貫性が必要
  • ファイルサイズを管理するためのフォントサブセット化またはプログレッシブローディング戦略を採用している
  • システムフォントでは利用できない特定のグリフスタイルをデザインが要求している

参考リンク​

にTakeshi Takatsudoが最終更新