タイポグラフィスケール生成（フォントサイズ階層）無料・登録不要

base font-size + レシオ（1.067〜1.618 / 黄金比等）から h1〜h6 までのフォントサイズ階層を自動算出 + CSS Custom Properties + Tailwind config 出力。

最終更新: 2026-05-12

所要時間: 約1分

編集: Free AI Tools JP 編集部

レシオを選択

基本設定

base font-size（px）レシオ段階数（h1〜h6 等）出力単位

root font-size（rem 計算基準・通常 16px）

プレビュー

階層	px	rem	プレビュー
H6	76.3px	4.768rem	Aa あ
H5	61.0px	3.815rem	Aa あ
H4	48.8px	3.052rem	Aa あ
H3	39.1px	2.441rem	Aa あ
H2	31.3px	1.953rem	Aa あ
H1	25.0px	1.563rem	Aa あ
Display M	20.0px	1.250rem	Aa あ
Display L	16.0px	1.000rem	Aa あ
small / caption	12.8px	0.800rem	Aa あ

CSS Custom Properties

:root {
  --font-display-lg: 4.768rem;
  --font-display: 3.815rem;
  --font-h1: 3.052rem;
  --font-h2: 2.441rem;
  --font-h3: 1.953rem;
  --font-h4: 1.563rem;
  --font-h5: 1.250rem;
  --font-h6: 1.000rem;
  --font-body: 1.000rem;
  --font-small: 0.800rem;
}

Tailwind CSS 設定（tailwind.config.js）

theme: {
  extend: {
    fontSize: {
        'display-lg': '4.768rem',
        'display': '3.815rem',
        '4xl': '3.052rem',
        '3xl': '2.441rem',
        '2xl': '1.953rem',
        'xl': '1.563rem',
        'lg': '1.250rem',
        'md': '1.000rem',
        'base': '1.000rem',
        'sm': '0.800rem',
    },
  },
},

レシオの選び方

1.067 - 1.125: 控えめ。本文中心のコンテンツ系（ブログ・ニュース）に最適
1.2 (Minor Third): 人気 No.1。Tailwind CSS 既定。バランスが良く汎用
1.25 (Major Third): モダン Web。Stripe / Vercel が採用
1.333 (Perfect Fourth): LP やヒーローセクション向け。メリハリあり
1.5 (Perfect Fifth): 強コントラスト。Hero タイトルを目立たせたい時
1.618 (Golden Ratio): 黄金比。デザイン重視・最大コントラスト

💡 使い方ガイド

1. base + ratio を決める: 通常 base=16px / ratio=1.25 から始める
2. h1〜h6 にスケール適用: 大→小の順で 6 段階。Display 系を追加するなら 8 段階
3. CSS Custom Properties で実装: `--font-h1` 等で一元管理。後でレシオ変更が即反映
4. Tailwind 派は config に組み込み: theme.extend.fontSize で `text-h1` 等のクラスを使える
5. line-height は無次元（1.2-1.6）: font-size に追随。Heading は 1.1-1.3、本文は 1.5-1.7
6. clamp() と組み合わせ: ビューポート幅に応じて滑らかにスケール変動

良いタイポグラフィスケール生成（フォントサイズ階層）の判断基準

サイト全体のフォントサイズ階層を base とレシオから一括で決めるときに使うツールです。生成された CSS をコピーする前に、下の基準で「自分のコンテンツに当てはめて成立するか」を確認すると、導入後の作り直しを防げます。

生成された段階が実際の見出し階層と対応しているか
スケールは h1〜h6 まで生成されますが、実際のページで使う見出しが h1〜h3 までなら、その範囲で十分な差が付いているかが重要です。自分のサイトの見出し構造を先に確認し、使う段階だけを見て judge します。
本文サイズが読みやすい大きさを保っているか
レシオを大きくすると見出しは迫力が出ますが、base より下の段階（small など）が小さくなりすぎることがあります。本文と注釈のサイズが実際に読める大きさかを確認します。
line-height（行間）をサイズとセットで設計したか
フォントサイズだけ階層化しても、行間が全段階で同じだと見出しと本文のバランスが崩れます。一般に大きい見出しは行間を詰め、本文はゆとりを持たせます。スケール導入時に行間もセットで決めます。
実際のテキストでプレビューしたか
サンプル文字列で良く見えても、自分のサイトの実際の見出し文言（長い日本語見出しなど）では印象が変わります。使用するフォントと実テキストでプレビューしてから確定します。日本語と欧文では同じサイズでも体感の大きさが違う点にも注意します。
モバイルでの表示を想定したか
デスクトップで決めた h1 のサイズが、モバイルの狭い画面では大きすぎて数文字で折り返すことがあります。最大の見出しサイズはモバイル幅でどう見えるかまで確認してから採用します。
生成された CSS をブラウザで確認してから本番に入れたか
コピーした CSS を既存のスタイルに足すと、既存の指定と競合することがあります。本番に入れる前に、実際のブラウザで主要ページの表示を確認します。

ありがちな失敗例（NG → 改善）

NGレシオの大きいスケールを選び、h1 から h6 まで全段階をそのまま採用する。

改善実際に使う見出しレベル（多くのサイトでは h1〜h4 程度）に絞って、その範囲で差が成立するかを確認する。

→ 使わない段階まで含めて評価すると判断を誤ります。実際のコンテンツで使う範囲の差が適切かが本質です。

NGフォントサイズだけ差し替えて、行間は元の指定のままにする。

改善大きい見出しは行間を詰め、本文はゆとりを持たせるなど、サイズと行間をセットで調整する。

→ サイズと行間はセットで階層感を作ります。サイズだけ変えると、大見出しの行間が間延びするなどバランスが崩れます。

NG英語のサンプルテキストのプレビューだけで確定し、実際の日本語見出しで確認しない。

改善自分のサイトで実際に使うフォント・実際の見出し文言を当てはめて、ブラウザで確認してから確定する。

→ フォントや言語によって同じサイズでも体感の大きさと折り返し方が変わります。実テキストでの確認が最終判断の材料になります。

タイポグラフィスケール生成（フォントサイズ階層）の使い方

1テキストを入力またはペーストします
2「変換する」ボタンをクリックします
3結果を確認してコピーします

よくある質問

タイポグラフィスケール生成（フォントサイズ階層）は無料ですか？

はい、完全無料でご利用いただけます。会員登録も不要です。

スマートフォンでも使えますか？

はい、スマートフォン・タブレット・PCなど、ブラウザがあればどのデバイスでもご利用いただけます。

対応している画像形式は？

PNG、JPG、WebP、GIF、SVG形式に対応しています。

タイポグラフィスケール生成（フォントサイズ階層）について

タイポグラフィスケールが解決する課題

Web デザインで「h1 は何 px？h2 は？本文は？」を場当たり的に決めると、画面全体の階層感が崩れます。プロのデザイナーは「base + レシオ」のモジュラースケール手法で全フォントサイズを統一的に決めますが、毎回手計算するのは面倒。本ツールは base font-size + 8 種のレシオから h1〜h6 + Display + small を自動算出 + プレビュー + CSS / Tailwind 設定コピペで即実装できます。

モジュラースケール（レシオ）の意味

【Minor Second（1.067）】控えめ。本文中心のコンテンツ系（ブログ・ニュース）に最適。

【Major Second（1.125）】汎用・読みやすい。Material Design 系。

【Minor Third（1.2）】<b>人気 No.1</b>。Tailwind CSS 既定。バランス良。

【Major Third（1.25）】モダン Web。Stripe / Vercel が採用。

【Perfect Fourth（1.333）】LP / ヒーローセクション向け。メリハリあり。

【Augmented Fourth（1.414）】√2。大胆ヘッダー強調。

【Perfect Fifth（1.5）】強コントラスト。Hero タイトル目立たせ。

【Golden Ratio（1.618）】黄金比。最大コントラスト。デザイン重視。

こんなシーンで使えます

【1. 新規 Web サイト立ち上げ】design system の最初の決定事項としてフォントスケールを確定。

【2. Tailwind CSS プロジェクト】既定 fontSize を上書きして独自スケールに統一。tailwind.config.js コピペ可。

【3. CSS Custom Properties 化】--font-h1 等で一元管理。後でレシオ変更が即反映。

【4. UI ライブラリの設計】デザインシステム / コンポーネントライブラリの font-size token 設定。

【5. Figma → コード実装】Figma の Type Scale を CSS / Tailwind に変換。

【6. リブランディング**】レシオ変更（1.2 → 1.333）で印象を「控えめ → メリハリ」に切替。

スケール適用パターン

【blog / news サイト】base 16 / 1.125（穏やか）→ h1 = 23.4px / h2 = 20.8px / h3 = 18.5px / body 16px

【LP / マーケサイト】base 16 / 1.333（メリハリ）→ h1 = 50.5px / h2 = 37.9px / h3 = 28.4px / body 16px

【コーポレートサイト】base 16 / 1.25（バランス）→ h1 = 39.1px / h2 = 31.3px / h3 = 25.0px / body 16px

【SaaS ダッシュボード】base 14 / 1.2（コンパクト）→ h1 = 29.0px / h2 = 24.2px / h3 = 20.2px / body 14px

【ヒーロー強調 LP】base 16 / 1.618（黄金比）→ h1 = 109.8px / h2 = 67.9px / h3 = 41.9px / body 16px

よくある失敗と注意点

1つ目: レシオ大きすぎで本文が小さい → ratio 1.5 以上だと small（body / ratio）が 10.7px 以下になりがち。読みづらい。

2つ目: 全段階を「装飾用」に使う → h5 / h6 は使い場面少ない。実用は h1〜h4 + body + small で十分。

3つ目: line-height を変えない → h1 と body で同じ line-height だと階層感が崩れる。Heading は 1.1-1.3、本文は 1.5-1.7。

4つ目: メディアクエリで完全に別スケール → モバイル / デスクトップでスケール根本変更すると一貫性なし。clamp() で滑らかに変化させるのが推奨。

5つ目: 計算精度の罠 → 16 × 1.25^5 = 48.828125。小数点 3 桁で丸めて使う（本ツールは自動）。

6つ目: フォントファミリーを考慮しない → ゴシック系と明朝系で同じ font-size でも体感サイズが違う。実際の文字でプレビュー必須。

CSS Custom Properties 活用例

```css :root { --font-h1: 2.441rem; --font-h2: 1.953rem; --font-h3: 1.563rem; --font-h4: 1.25rem; --font-body: 1rem; --font-small: 0.8rem; }

h1 { font-size: var(--font-h1); line-height: 1.1; } h2 { font-size: var(--font-h2); line-height: 1.2; } h3 { font-size: var(--font-h3); line-height: 1.3; } body { font-size: var(--font-body); line-height: 1.6; } small { font-size: var(--font-small); }

/* レスポンシブで clamp() と組み合わせ */ h1 { font-size: clamp(1.5rem, var(--font-h1), 3rem); } ```