Web Tools

Type Scale Calculator

Generate modular type scales for responsive typography using musical ratios. Preview sizes, get CSS custom properties, and choose from 8 ratio presets. Runs entirely in your browser — your data never leaves your machine.

typography type-scale css font-size responsive

Published May 30, 2026

All interactive tools run entirely in your browser. Your data never leaves your device.

How It Works

Set a base font size and choose a musical ratio (Minor Second through Golden Ratio), then see the generated type scale with live preview text. Copy CSS custom properties directly into your project.

Features

8 ratio presets: Minor Second (1.067) through Golden Ratio (1.618)
Custom ratio: enter any value for precise control
Live preview: see each step rendered at actual size
CSS output: ready-to-use :root custom properties for font sizes and line heights
Smart line heights: automatically tighter for larger sizes
Unit options: px, rem, or em output
Configurable precision: 0-6 decimal places
5 examples: Classic, Tight, Dramatic, Golden Ratio, Compact
Private: runs entirely in the browser — no data transmitted

Use Cases

Establishing a consistent typography system for web projects
Creating harmonious font size relationships in design systems
Generating CSS custom properties for responsive type
Comparing different scale ratios before committing to a design