Typographic Scale Generator
Pick a musical ratio and a base font size to generate a mathematically harmonious type scale. Copy ready-to-use CSS custom properties or a Tailwind config block. Fluid clamp() mode for responsive sizes. Nothing uploaded.
Scale Preview
Statistics
Generated Code
Learn more: typographic scales and modular design
What is a modular typographic scale and why it matters
A modular type scale applies a single mathematical ratio to a base font size to generate all heading and text sizes. For example, a Perfect Fourth ratio (1.333) applied to a 16px base gives 16px, 21px, 28px, 37px sizes that feel harmonious together because they share a mathematical relationship. This is far better than picking arbitrary sizes (16px, 18px, 22px, 28px) that have no relationship to each other.
CSS custom properties and fluid clamp() for responsive typography
CSS custom properties (variables like --text-base: 16px) let you define your entire scale in one place and reuse it throughout your stylesheets. The modern approach is CSS clamp(min, preferred, max), which scales font sizes smoothly between a minimum at small viewports and a maximum at large viewports without needing media queries. The generator outputs ready-to-paste clamp() values for each scale step and custom property declarations.
Choosing the right scale ratio for your design
Minor Third (1.2) works well for body-heavy, text-heavy designs where you want subtle size differences. Perfect Fourth (1.333) is the most versatile for general web interfaces. Major Third (1.25) sits between them. Golden Ratio (1.618) creates very dramatic contrast and is best for design-forward sites where large display headings are a visual feature. Start with Perfect Fourth and adjust based on your visual hierarchy needs.
FAQ
What is a modular type scale?
A modular type scale applies a single ratio to a base font size to generate all heading and text sizes. For example, a Perfect Fourth ratio (1.333) applied to a 16px base gives 16px, 21px, 28px, 37px sizes that feel harmonious together because they share a mathematical relationship.
What is CSS clamp() for fluid typography?
CSS clamp(min, preferred, max) lets a font size scale smoothly between a minimum value at small viewports and a maximum value at large viewports, with no media queries needed. The generator outputs ready-to-paste clamp() values for each scale step.
Which scale ratio should I use?
Minor Third (1.2) works well for body-heavy text-heavy designs. Perfect Fourth (1.333) is the most popular for general web interfaces. Major Third (1.25) sits between them. Golden Ratio (1.618) creates very dramatic contrast between heading levels.