CSS Tips | 超実務コアCSSテクニック：タイポグラフィ － フォントスタック設計

Web APP CSS
スポンサーリンク

フォントスタック設計は「どの環境でも破綻しない文字の見え方」を作る技術

フォントスタック（font-family の並び順）は、
「ユーザーの環境にフォントが無いとき、どのフォントにフォールバックするか」
を決める“保険の設計”です。

Web では、ユーザーの OS・ブラウザ・言語設定がバラバラなので、
「指定したフォントが必ず使われる」ことはほぼありません。

だからこそ、
「第一候補 → 第二候補 → 第三候補 → 最終的に汎用フォント」
という順番を丁寧に設計することが大切です。

ここでは、CSS と Tailwind CSS の両方で、
初心者でも迷わない“実務レベルのフォントスタック設計”を解説します。

フォントスタックの基本構造

CSS の基本形

body {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}
CSS

意味はこうです。

  1. Inter があれば使う
  2. なければ Helvetica Neue
  3. それもなければ Arial
  4. 最後に sans-serif（OS の標準サンセリフ）

左から順に「使えるフォント」を探していくのがポイントです。

Tailwind の基本形

Tailwind では font-sans などのプリセットが用意されています。

<body class="font-sans">
HTML

デフォルトの font-sans は、Tailwind が推奨する
「OSごとに最適化されたサンセリフスタック」になっています。

例1：Webフォント＋安全なフォールバック

CSS 版

body {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
}
CSS

深掘りポイント：OSごとの最適フォント

  • -apple-system → macOS / iOS の San Francisco
  • BlinkMacSystemFont → Chrome on macOS
  • "Segoe UI" → Windows
  • Roboto → Android
  • "Helvetica Neue" → 古い macOS
  • Arial → 最後の保険

これにより、
「Webフォントが読み込めなかったときでも、OS標準の美しいフォントで表示される」
という安心設計になります。

Tailwind 版

Tailwind の font-sans はすでにこの考え方を採用しています。

<body class="font-sans">
HTML

Tailwind のデフォルトスタック（抜粋）

ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif

Webフォントを追加したい場合は、Tailwind の設定で上書きします。

// tailwind.config.js
module.exports = {
  theme: {
    fontFamily: {
      sans: [
        "Inter",
        "ui-sans-serif",
        "system-ui",
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Roboto",
        "Helvetica Neue",
        "Arial",
        "Noto Sans",
        "sans-serif",
      ],
    },
  },
};
JavaScript

例2：日本語フォントを含むフォントスタック

日本語は OS ごとに標準フォントが違うため、
日本語サイトでは必ず日本語フォントを含める必要があります。

CSS 版

body {
  font-family:
    "Noto Sans JP",
    "Hiragino Sans",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
}
CSS

深掘りポイント：日本語フォントの優先順位

  • "Noto Sans JP" → Webフォント or Android
  • "Hiragino Sans" → macOS
  • "Yu Gothic" → Windows
  • "Meiryo" → Windows（古い環境）
  • sans-serif → 最終フォールバック

日本語フォントは OS によって太さや字幅が大きく違うため、
「どの環境でも破綻しない」ように順番を工夫します。

Tailwind 版

Tailwind の設定で日本語フォントを追加します。

// tailwind.config.js
module.exports = {
  theme: {
    fontFamily: {
      sans: [
        "Noto Sans JP",
        "Hiragino Sans",
        "Yu Gothic",
        "Meiryo",
        "sans-serif",
      ],
    },
  },
};
JavaScript

HTML 側は変わらず font-sans を使うだけです。

<body class="font-sans">
HTML

例3：見出し用フォントと本文用フォントを分ける

CSS 版

body {
  font-family:
    "Noto Sans JP",
    "Hiragino Sans",
    "Yu Gothic",
    "Meiryo",
    sans-serif;
}

h1, h2, h3 {
  font-family:
    "Montserrat",
    "Helvetica Neue",
    Arial,
    sans-serif;
}
CSS

見出しは欧文フォント、本文は日本語フォントという構成はよく使われます。

Tailwind 版

// tailwind.config.js
module.exports = {
  theme: {
    fontFamily: {
      sans: ["Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", "sans-serif"],
      heading: ["Montserrat", "Helvetica Neue", "Arial", "sans-serif"],
    },
  },
};
JavaScript
<h2 class="font-heading text-2xl font-bold">見出し</h2>
<p class="font-sans">本文テキスト</p>
HTML

例4：等幅フォント（コード表示用）のスタック

CSS 版

code, pre {
  font-family:
    "Fira Code",
    "Source Code Pro",
    Menlo,
    Consolas,
    "Courier New",
    monospace;
}
CSS

Tailwind 版

module.exports = {
  theme: {
    fontFamily: {
      mono: [
        "Fira Code",
        "Source Code Pro",
        "Menlo",
        "Consolas",
        "Courier New",
        "monospace",
      ],
    },
  },
};
JavaScript
<pre class="font-mono text-sm">
  console.log("Hello");
</pre>
HTML

フォントスタック設計の「本質的な考え方」（ここが一番大事）

1. 第一候補（Webフォント）が読み込めない前提で考える

Webフォントはネットワーク状況で読み込めないことがあります。
だからこそ、第二・第三候補の品質がとても重要です。

2. OSごとの標準フォントを理解する

OS によって標準フォントは違います。

macOS → San Francisco / Hiragino
Windows → Segoe UI / Yu Gothic / Meiryo
Android → Roboto / Noto Sans
iOS → San Francisco

これを踏まえてスタックを組むと、どの環境でも破綻しません。

3. 日本語フォントは欧文フォントより差が大きい

日本語フォントは

  • 太さ
  • 字幅
  • 行間

が OS ごとに大きく違うため、
日本語サイトでは必ず日本語フォントを含めるのが鉄則です。

4. Tailwind では「fontFamily を設定して font-sans を上書き」が最も実務的

Tailwind の font-sans を上書きしておけば、
全ページで統一されたフォントスタックが使えます。

実務テンプレート：日本語サイト向けフォントスタック（Tailwind）

// tailwind.config.js
module.exports = {
  theme: {
    fontFamily: {
      sans: [
        "Inter",
        "Noto Sans JP",
        "Hiragino Sans",
        "Yu Gothic",
        "Meiryo",
        "sans-serif",
      ],
      heading: [
        "Montserrat",
        "Inter",
        "Helvetica Neue",
        "Arial",
        "sans-serif",
      ],
      mono: [
        "Fira Code",
        "Source Code Pro",
        "Menlo",
        "Consolas",
        "Courier New",
        "monospace",
      ],
    },
  },
};
JavaScript

まとめ

フォントスタック設計は、
「どの環境でも破綻しない文字の見え方」を作るための基礎技術です。

ポイントは次の通りです。

  • 第一候補（Webフォント）が使えない前提で考える
  • OSごとの標準フォントを理解して順番を決める
  • 日本語サイトでは必ず日本語フォントを含める
  • Tailwind では fontFamily を設定して font-sans を上書きする
  • 見出し・本文・コードでフォントを分けると読みやすさが向上する

スポンサーリンク
タイトルとURLをコピーしました