タイポグラフィースケールジェネレーター カスタマイズ可能なベースサイズ、比率、および単位を持つモジュラー型のタイポグラフィースケールを生成します。

What Is タイポグラフィースケールジェネレーター?

Typography Scale Generatorは、数学的比率（モジュラー・スケールとも呼ばれる）に基づいて調和のとれたフォントサイズのセットを作成します。一貫したタイポグラフィーは良いデザインの基本であり、モジュラー・スケールは数学的な比例を通じて自然に関連するフォントサイズを提供します。このツールでは、8つのクラシックなスケール比率（マイナーセカンド（1.067）、メジャーセカンド（1.125）、マイナースリード（1.200）、メジャースリード（1.250）、パーフェクトフォース（1.333）、オーギュメントドフォース（1.414）、パーフェクトファイフス（1.500）、および黄金比（1.618））を提供します。ベースサイズから始めて、各ステップは選択した比率で乗算されます。出力には、CSSカスタムプロパティ（--font-size-xsから--font-size-5xlまで）が含まれており、好みの単位とサンプルテキストを使用した視覚的なプレビューも表示されます。

Why Use タイポグラフィースケールジェネレーター?

• 音楽とデザイン理論から得られた8つのクラシックな数学的スケール比率
• px, rem, em の単位で出力可能 - プロジェクトのニーズに応じて選択できます
• ベースサイズ、行間、高さの調整が可能です
• CSS カスタムプロパティが出力されるため、簡単に統合できます

Common Use Cases

デザインシステムのタイポグラフィー

一貫したタイプスケールをデザインシステムの基盤として確立します。

新しいプロジェクトの設定

新しい Web プロジェクトを作成する際に、調和のとれたフォントサイズを生成します。

ブログや記事のスタイリング

長文コンテンツ用の読みやすいタイポグラフィーの階層構造を作成します。

レスポンシブタイポグラフィー

異なるレスポンシブブレークポイントで使用するスケール値を生成します。

Technical Guide

モジュラー型スケールは、数学的比率を使用して一連の比例値を生成します。ベースサイズ（通常、Webでは16px）から始めて、各ステップは比率で乗算されて計算されます。メジャー・サード（1.25）スケールと16pxのベースの場合：12.8px、16px、20px、25px、31.25px、39.06pxです。比率はサイズ間のコントラストを決定します。小さい方の比率（1.067、1.125）は、ボディーテキストに適した繊細な差異を作成し、大きい方の比率（1.5、1.618）は、表示用タイポグラフィーに適したドラマティックな差異を作成します。人気のある比率は音楽理論（マイナースリード、パーフェクトフォース、パーフェクトファイフス）と数学（黄金比）から来ています。Webでの実装では、サイズをCSSカスタムプロパティとして定義し、スタイルシート全体で使用します。アクセサビリティのためには、ユーザーのフォントサイズ設定を尊重するrem単位が好まれます。行間は一般に、フォントサイズが増加すると減少する必要があります。ボディーテキストでは1.5、ラージヘッダーでは1.1〜1.2です。

Tips & Best Practices

• 1
  Major Third (1.25) または Perfect Fourth (1.333) をほとんどの Web プロジェクトに使用
• 2
  アクセシビリティが高く、ユーザーの好みを尊重するため、rem 単位を使用します
• 3
  見出しの行間は小さくし (1.1-1.2)、本文は大きくします (1.5-1.7)
• 4
  タイプスケールの階層構造が扱いやすいように、ステップ数は 5-7 に抑えます

Related Tools

スペーシングスケールジェネレーター

カスタマイズ可能なベースユニットと乗数を持つ一貫したスペーシングスケールシステムを生成します。

🎨 CSS & Design

Google フォントプレビュー

カスタマイズ可能なテキスト、サイズ、重さ、文字間隔で Google フォントをプレビューします。

🎨 CSS & Design

CSS

CSS(, , )

🎨 CSS & Design

CSS スピナー生成ツール

カスタマイズ可能なスタイルを持つCSSローディングスピナーとアニメーションローダーを生成します。

🎨 CSS & Design

Frequently Asked Questions

Q モジュラースケールとは何か?

一貫した数学的比率によって関連付けられた数字の系列で、視覚的な調和を生み出します。

Q どの比率を選択するべきか?

Major Third (1.25) はほとんどのプロジェクトに適しています。微妙な階層構造には小さな比率、劇的なコントラストには大きな比率を使用します。

Q px または rem を使用するべきか?

rem が推奨されます。これはユーザーのフォントサイズの好みを尊重し、アクセシビリティが向上します。

Q いくつのステップ数が必要か?

5-7 ステップでほとんどのニーズをカバーできます: xs, sm, base, lg, xl, 2xl, 3xl.

Q モバイルとデスクトップ用に異なるスケールを使用できるか?

はい、メディアクエリを使用してモバイルでは小さな比率、デスクトップでは大きな比率を切り替えることができます。

About This Tool

タイポグラフィースケールジェネレーター is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.