Type Scale Generator

Good typography isn’t chosen — it’s calculated. The Type Scale Generator takes a base font size and a mathematical ratio to produce a complete, harmonious scale across every heading and body text level.

Key Features

• Classic Ratios: Choose from Minor Second, Major Second, Minor Third, Major Third, Perfect Fourth, Golden Ratio, and more — or enter a custom ratio.
• Live Preview: See each scale step rendered with actual text so you can feel the rhythm before you ship it.
• CSS Custom Properties: Copy a ready-to-use :root { } block to drop straight into your stylesheet.
• Tailwind Config: Get a fontSize config object for tailwind.config.js with one click.
• Unit Flexibility: Output in rem or px, with a configurable base font size.

[!TIP] The Perfect Fourth (1.333) ratio is a reliable all-rounder for UI work. The Golden Ratio (1.618) creates dramatic display headings but can feel large at smaller base sizes — pair it with a tight line-height.