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

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

最終更新: 2026-05-12

所要時間: 約1分

編集: AIツールキュレーター

レシオを選択

基本設定

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() と組み合わせ: ビューポート幅に応じて滑らかにスケール変動

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

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); } ```