タイポグラフィスケール生成
黄金比や音楽的比率でフォントサイズスケールを生成。px/rem/em で出力
設定
プレビュー
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つの単位に対応し、プロジェクトのニーズに応じた出力が可能です。ブラウザ上で完結するため、データの外部送信は一切ありません。
The Typography Scale Generator is a modular scale calculator for web designers and front-end developers. A well-defined font size hierarchy is critical for design consistency and readability.
This tool includes presets based on musical theory: Golden Ratio (1.618), Perfect Fifth (1.5), Perfect Fourth (1.333), Major Third (1.25), Minor Third (1.2), Major Second (1.125), Minor Second (1.067), and Augmented Fourth (1.414). Simply adjust the base size, ratio, and number of steps to automatically compute font sizes from h1 down to small text, with optimal line-height values calculated for each size.
Preview each size as rendered text, verify balance visually, and instantly copy the output as CSS custom properties. Now supports px, rem, and em units for flexible integration with any project. Everything runs entirely in your browser with no external data transmission.
タイポグラフィスケール生成の使い方 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
他のカテゴリ Other Categories
デザイン の人気ツール TOP 10 Popular Design Tools Tools TOP 10
デザイン のすべてのツール (15件) All Design Tools Tools (15)
該当するツールが見つかりませんでした No matching tools found