CMYK ↔ RGB ↔ HEX Color Converter
About Typography Scale Generator
The Typographic Hierarchy & Scale Generator calculates proportional font sizes across all heading levels (H1 through H6, Subtitle, Body, Caption) using classical musical intervals (1.125 Major Second to 1.618 Golden Ratio) with `rem`, `px`, and fluid `clamp()` formulas.
How to Use Typography Scale Generator
Step 1
Select base font size (default: 16px) and scale multiplier ratio.
Step 2
Review computed font sizes for H1 through H6 and body text.
Step 3
Click "Copy CSS" or "Copy Tailwind Config".
Practical Use Cases for Typography Scale Generator
Establishing Consistent Heading Scales in Design Systems
Generate standardized heading scales where H1, H2, H3, H4, H5, and H6 maintain mathematical harmony from a single base font size.
Exporting Typography Tokens to CSS and Tailwind
Export calculated typography scales directly into CSS custom properties or Tailwind `fontSize` configuration.
Input & Output Examples
Generating Major Third (1.25) Scale from 16px Base
Base: `16px` | Ratio: `1.25` (Major Third)
H1: `48.83px` (3.05rem), H2: `39.06px` (2.44rem), H3: `31.25px` (1.95rem), Body: `16px` (1rem)
Key Features & Performance
- ✓Scale ratios: Minor Second (1.067), Major Second (1.125), Minor Third (1.200), Major Third (1.250), Perfect Fourth (1.333), Augmented Fourth (1.414), Perfect Fifth (1.500), Golden Ratio (1.618).
- ✓Calculates sizes in `px`, `rem`, and fluid responsive CSS `clamp()`.
- ✓Visual typography specimen hierarchy preview with live font-size badges.
- ✓100% Client-Side memory execution.
- ✓1-Click Copy CSS typography scale.
Key Terminology & Definitions
Musical Typographic Interval
A mathematical ratio derived from classical musical harmonics used to space font sizes proportionately.
Root EM (`rem`)
A relative unit equal to the computed font-size of the root `<html>` element (typically 16px).