🛠️ FreeTool.jp JP
FAQ Privacy Policy

Typography Scale Generator

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

設定

プレビュー

CSS コード

About Typography Scale Generator

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

  1. Set the base size (14-24px). 16px is the standard for most websites
  2. Select a scale ratio preset (Golden Ratio, Perfect Fifth, etc.) or enter a custom value
  3. Adjust the steps up (number of heading levels) and steps down (small text levels)
  4. Preview the rendered text at each size and visually verify the balance
  5. Click the Copy CSS Code button and paste into your project

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

他のカテゴリ

Image Tools PDF Tools Text Tools Audio Tools Video Tools Calculators Business Documents Other

Design Tools の人気ツール TOP 10

🎨 E-Seal Gen
🎨 SVG Path Editor
🎨 Glassmorphism
🎨 Random Color
🎨 CSS Box Shadow
🎨 Font Preview
🎨 CSS Unit Convert
🎨 Neumorphism
🎨 Mesh Gradient
🎨 CSS Gradient Gen

Design Tools のすべてのツール (15件)