What are the benefits of Typography Scale Generator?

Build beautiful font-size hierarchies in seconds using music-theory-based ratio presets. Fine-tune with real-time preview showing actual text at each size. Output as CSS custom properties, ready to integrate into any design system. Support px, rem, and em units for flexible design workflows. Automatically calculates optimal line-height for each font size. Runs entirely in the browser with no data transmission—safe for professional use.

Is Typography Scale Generator free?

Yes, it is completely free to use. No registration is required, and all processing is done entirely in your browser. Your data is never sent to any server.

Typography Scale Generator

Generate font size scales using golden ratio and musical intervals. Output in px, rem, or em

設定

ベースサイズ 16px

スケール比率

上方向ステップ数 5

下方向ステップ数 1

単位

プレビュー

CSS コード

タイポグラフィスケール生成で出来る事 About Typography Scale Generator

タイポグラフィスケール生成ツールは、Webデザイナーやフロントエンド開発者のためのモジュラースケール計算ツールです。タイポグラフィにおけるフォントサイズの階層は、デザインの統一感と読みやすさを大きく左右します。本ツールでは、黄金比（1.618）、完全五度（1.5）、完全四度（1.333）、長三度（1.25）、短三度（1.2）、長二度（1.125）、短二度（1.067）、増四度（1.414）など、音楽理論に基づく比率プリセットを搭載。ベースサイズ・比率・ステップ数を調整するだけで、h1からsmallまでのフォントサイズを自動計算し、行間（line-height）も文字サイズに応じて最適値を設定します。プレビューで各サイズのテキストを実際に表示しながらバランスを確認でき、CSSカスタムプロパティ形式のコードを即座にコピー可能。px / rem / em の3つの単位に対応し、プロジェクトのニーズに応じた出力が可能です。ブラウザ上で完結するため、データの外部送信は一切ありません。

タイポグラフィスケール生成の使い方 How to use Typography Scale Generator

ベースサイズ（14〜24px）を設定します。一般的なWebサイトでは16pxが標準です
スケール比率のプリセット（黄金比、完全五度など）を選択するか、カスタム値を入力します
上方向ステップ数（見出しの段階数）と下方向ステップ数（小文字の段階数）を調整します
プレビューで各サイズの文字を確認し、バランスを目視でチェックします
「CSSコードをコピー」ボタンをクリックして、プロジェクトに貼り付けます
Set the base size (14-24px). 16px is the standard for most websites
Select a scale ratio preset (Golden Ratio, Perfect Fifth, etc.) or enter a custom value
Adjust the steps up (number of heading levels) and steps down (small text levels)
Preview the rendered text at each size and visually verify the balance
Click the Copy CSS Code button and paste into your project

タイポグラフィスケール生成を使うメリット Benefits of Typography Scale Generator

音楽理論に基づく比率プリセットで、美しいフォントサイズ階層を数秒で構築
リアルタイムプレビューで実際の文字サイズを確認しながら微調整が可能
CSSカスタムプロパティ形式で出力するため、デザインシステムにそのまま組み込み可能
px / rem / em 対応で、固定値・ルートベース・相対単位を自由に選択可能
フォントサイズに応じた最適な行間（line-height）を自動計算
ブラウザ完結でデータ送信なし。安心して業務利用可能
Build beautiful font-size hierarchies in seconds using music-theory-based ratio presets
Fine-tune with real-time preview showing actual text at each size
Output as CSS custom properties, ready to integrate into any design system
Support px, rem, and em units for flexible design workflows
Automatically calculates optimal line-height for each font size
Runs entirely in the browser with no data transmission—safe for professional use