A type scale calculator generates a mathematically harmonious set of font sizes by multiplying a base size by a consistent ratio. Modular type scales ensure visual consistency across all heading levels and body text — the foundation of every well-designed UI.
Scale Settings
Visual Scale
Scale Values
| Step | px | rem | Use |
|---|
CSS Custom Properties
How to Use the Type Scale Calculator
Modular type scales create visual harmony by applying the same mathematical ratio to every font size step. Instead of picking sizes arbitrarily (14px, 18px, 24px, 36px...), a type scale calculator generates sizes that feel naturally proportional to each other.
Step 1: Set Your Base Size
The base size is typically your body text size. The industry standard is 16px — this is the browser default and what rem units are relative to. Adjust to 14px for dense UIs or 18px for reading-focused content like blogs and articles.
Step 2: Choose a Scale Ratio
The ratio determines how much each step grows. Perfect Fourth (1.333) is the most versatile — used by Tailwind CSS and Material Design. Major Third (1.25) is more subtle for text-heavy content. Golden Ratio (1.618) creates dramatic display type but becomes unwieldy for body sizes. Try different ratios to see what fits your design.
Step 3: Set Number of Steps
6 steps gives you a value for h1-h6. 8-10 steps add xs/xl display sizes for marketing pages. 4 steps is sufficient for simple single-page applications.
Step 4: Copy the CSS Custom Properties
The output generates --step-0 through --step-N CSS variables. Step 0 is your base size. Positive steps scale up (headings), negative steps scale down (captions, labels). Apply them with font-size: var(--step-2).
FAQ
Is this type scale calculator free?
Yes, completely free with no limits or account required. All calculations run locally in your browser.
What is a modular type scale?
A modular type scale is a series of font sizes generated by multiplying a base size by a consistent ratio. For example, with base 16px and ratio 1.25, the scale is: 16px, 20px, 25px, 31.25px, 39px, etc. This creates visual harmony through mathematical consistency.
What is the Perfect Fourth ratio (1.333)?
The Perfect Fourth ratio (1.333) is derived from musical intervals. It creates a moderate scale that works well for most websites — not too cramped between sizes, not too extreme. It's widely used in design systems like Tailwind CSS and Material Design.
What is the difference between px and rem?
px is an absolute unit. rem (root em) is relative to the root font size (usually 16px). Using rem allows users to scale all text by changing their browser's base font size. For accessibility, type scales in rem are preferred because they respect user font size preferences.
How do CSS custom properties work with type scales?
CSS custom properties (variables) like --step-0, --step-1, etc. let you reference scale values throughout your stylesheet. Set them on :root and use them as var(--step-2) in any CSS rule. This makes it easy to change the entire scale from one place.
What scale ratio should I use for my project?
For large displays with lots of hierarchy (marketing sites, landing pages): Major Third (1.25) or Perfect Fourth (1.333). For text-heavy content (blogs, docs): Minor Third (1.2) or Major Second (1.125). For tight interfaces (apps, dashboards): Minor Second (1.067).
What is the Golden Ratio (1.618) in typography?
The Golden Ratio (φ = 1.618) creates dramatic size differences between scale steps. While visually striking for display type, it can be too extreme for body text — steps become very large, very quickly. It's best used for poster-style headings where you want maximum visual impact.