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

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 設定のコピペで即実装できます。

使いどころは幅広く、新規 Web サイト立ち上げで design system の最初の決定事項としてフォントスケールを確定する場面、Tailwind CSS プロジェクトで既定 fontSize を独自スケールに上書きする場面、CSS Custom Properties（--font-h1 等）で一元管理する場面、UI ライブラリの font-size token 設計、Figma の Type Scale を CSS / Tailwind に変換する場面、リブランディングでレシオを 1.2 から 1.333 に変えて印象を切り替える場面などがあります。

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

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

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

【Minor Third（1.2）】人気 No.1。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）】黄金比。最大コントラスト。デザイン重視。

3つのレシオで生成した実処理結果

実測条件です。本ツールは AI を呼ばず、ブラウザ内で計算します。基準サイズ（base）はいずれも 16px（1rem）に固定し、レシオだけを変えて3種類を生成し、返ってきたピクセル値を記録しました。

1つ目は代表格の Minor Third（1.2、画面上で人気 No.1 と表示されます）。生成されたサイズは 13.3px から 57.3px の幅に並びました。最大は 57.3px です。

2つ目は Golden Ratio（1.618・黄金比）。生成された値のうち最大は 464.5px（29.030rem）まで跳ね上がり、同じ結果の中には 9.9px という小さな値も含まれていました。上と下の開きが極端に広いのが特徴です。

3つ目は Minor Second（1.067）。生成値は 15px から 25.2px の狭い範囲に固まり、段階ごとの差は小さいものでした。最大でも 25.2px です。

基準は3件とも同じ 16px なのに、レシオを変えるだけで、生成される最大サイズが 25.2px から 464.5px まで動きました。

ここで、結果を読むときのクセを1つ。本ツールの表は大きい順に並び、一番上の H6 段が最大、一番下の small / caption 段が最小です。段ラベルが H1 から H6 へ上がるほど文字は大きくなる作りで、h1 が一番大きいという一般的な HTML の並びとは逆向きになっています。上で触れた「最大」はいずれも一番上の H6 段の値です。たとえば Golden Ratio では H6 が 464.5px、その1つ下の H5 が 287.1px、さらに下の H4 が 177.4px という並びで、177.4px は最大ではなく H4 段の値でした。加えて、コピー用に出る CSS では表の H6 段が --font-display-lg、H5 段が --font-display という名前で書き出され、表のラベルと変数名が一対一で一致しない点にも注意してください。

同じ 16px 基準でも最大サイズはレシオで大きく変わる

今回の3件で見えたのは、base を同じ 16px にそろえても、レシオ次第で最大サイズが 25.2px から 464.5px まで変わるということです。数値そのものは3件で観測しただけで、他のレシオや base で必ずこの通りになると保証するものではありませんが、傾向ははっきり出ました。

ここから向かない使い方が2つ見えます。1つは、本文の分量が多いページに Golden Ratio（1.618）を使うことです。最大 464.5px と見出しが巨大になり、同じ結果に 9.9px の極端に小さい値も混じるため、そのまま本文まわりに使うと読みづらくなります。もう1つは、見出しにメリハリを付けたい LP に Minor Second（1.067）を使うことです。生成値が 15px から 25.2px に密集し、見出しどうしの大きさの差がほとんど付きません。

手直しの判断は、生成された最大サイズを実際の画面に置いて決めます。作りたい画面に対して最大が大きすぎたらレシオを下げ、見出しの差が物足りなければレシオを上げます。迷ったら、人気 No.1 と表示される Minor Third（1.2）の最大 57.3px 前後から始めて、置いてみて調整する進め方が無難です。

スケール適用パターン

サイトの性格ごとに、どのレシオ（と base）を選ぶかの目安です。ここで挙げるピクセル値は、上の実処理結果と同じ base 16px で実際に測ったプリセットの値だけを載せ、測っていない組み合わせは数値を断定せず、レシオの性格で示します。

【blog / news サイト】本文を読ませるページなので、控えめな Minor Second（1.067）〜 Major Second（1.125）が向きます。段階差が小さく、見出しと本文の落差を付けすぎません。base 16 の Minor Second（1.067）で実際に測ったときは、一番大きい H6 段でも 25.2px、一番小さい small / caption 段が 15.0px と、上下が狭い範囲に収まりました。

【LP / マーケサイト】メリハリを付けたいので Perfect Fourth（1.333、画面では「LP やヒーローセクション向け・メリハリあり」と表示）を選びます。段差が大きくなり、見出しがしっかり立ちます。

【コーポレートサイト】バランス重視なら Major Third（1.25、画面では「モダン Web・Stripe / Vercel が採用」と表示）。本ツールの初期値がこの base 16 / 1.25 で、コピー用 CSS には --font-display-lg: 4.768rem から --font-small: 0.800rem までが書き出されます。

【SaaS ダッシュボード】情報量が多く場所を取りたくない画面では、base を 16px より小さめ（本ツールは 10px まで下げられます）にして、段差の穏やかな Minor Third（1.2）を合わせるとコンパクトにまとまります。

【ヒーロー強調 LP】一番大きく見せたいなら Golden Ratio（1.618・黄金比）。base 16 で測ると、一番上の H6 段が 464.5px、H1 段が 41.9px、一番下の small / caption 段が 9.9px と、上下の開きが極端に広くなります。タイトルだけをドンと見せる用途に向き、本文まわりには使いません。

段ラベルは表の一番上（H6）が最大で、下に行くほど小さくなります。同じレシオでも、どの段を実際の h1 として採用するかで見出しサイズは変わるので、狙いのサイズに近い段を選んでください。

レシオ設計で起きやすいつまずき

1つ目: レシオ大きすぎで本文が小さい → ratio 1.5 以上だと small（body / ratio）が 10.7px 以下になりがち。読みづらい。実際に 1.618 で生成したとき、結果の中に 9.9px という値が含まれていました。

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 活用例

: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); } のように上限・下限を付けると、画面幅が変わっても崩れにくくなります。