Free Typography Tool
Type Scale Calculator: Build a Modular Font Size Scale
Enter a base font size, pick a ratio, and get a complete typographic scale with px and rem values, a live specimen preview, and copy-ready CSS variables you can drop straight into your stylesheet.
Scale settings
Your scale
| Step | Pixels | Rem | Specimen |
|---|
How to Use the Type Scale Calculator
Start with your base font size — the size of your body text. The default is 16px, which matches the browser default and works well for most websites. Then choose a scale ratio from the dropdown: minor second (1.067), major second (1.125), minor third (1.2), major third (1.25), perfect fourth (1.333), golden ratio (1.618), or enter a custom ratio of your own.
The calculator instantly generates a full typographic scale, from small utility sizes (xs, sm) up through your heading hierarchy (h6 to h1). Each step shows its exact value in both px and rem, alongside a live specimen preview so you can see how real text looks at every size before you commit.
When you are happy with the scale, copy the generated CSS variables and paste them into your stylesheet's :root block. From there, apply them anywhere: h1 { font-size: var(--text-4xl); } or .caption { font-size: var(--text-sm); }. Because every size references a single variable set, changing your base size or ratio later means updating one place instead of hunting through your entire codebase.
What Is a Modular Type Scale?
A modular type scale is a sequence of font sizes where each step is derived by multiplying the previous size by a constant ratio. Instead of picking heading sizes by eye — 14px here, 22px there, 31px somewhere else — every size in the system is mathematically related. The result is a font size scale that feels harmonious and intentional, the same way musical intervals sound pleasing because they follow fixed ratios. In fact, most classic scale ratios borrow their names from music: the minor third, the perfect fourth, the major second.
The ratio you choose changes the entire personality of your typography. Small ratios like the minor second (1.067) or major second (1.125) produce tightly spaced steps with subtle contrast between sizes — ideal for dense, information-rich interfaces like dashboards, admin panels, and data tables where you need many distinct levels without any of them shouting. Large ratios like the perfect fourth (1.333) or golden ratio (1.618) create dramatic jumps between steps, giving you huge, commanding headlines next to modest body text — the editorial, magazine-style feel you see on marketing pages and landing pages.
Either way, a modular scale removes guesswork. Designers and developers share one source of truth, new sizes slot in predictably, and your typography stays consistent as the product grows.
Choosing the Right Scale Ratio
There is no single correct ratio — the right choice depends on how much text your design carries and how much drama you want between sizes. These starting points cover most real-world projects:
- Minor second (1.067) and major second (1.125): Best for dense UIs — dashboards, developer tools, and data-heavy screens that need six or more usable text levels in a compact range. Headings stay quiet and content stays scannable.
- Minor third (1.2): The workhorse for product UIs and web apps. It gives clearly distinguishable headings without eating vertical space, and it holds up well on small screens.
- Major third (1.25) to perfect fourth (1.333): A sweet spot for marketing sites, blogs, and documentation. Headlines get real presence and hierarchy is obvious at a glance, while body text remains comfortable for long reading.
- Golden ratio (1.618): Reserved for hero-driven landing pages and editorial splash layouts where one enormous headline carries the design. Expect very large upper steps — pair it with fluid sizing so it doesn't overwhelm mobile.
- Custom ratio: If you're matching an existing brand or design system, reverse-engineer its ratio (divide one heading size by the next size down) and enter it directly.
When in doubt, start with 1.2 for applications and 1.25 for content sites, preview the specimen text at your real content lengths, and adjust from there.
Frequently asked questions
What is a type scale?
A type scale is a predefined set of font sizes used across a design, where each size is calculated by multiplying a base size by a constant ratio. Instead of choosing sizes arbitrarily, you get a mathematically consistent hierarchy — from small captions up to your largest heading — that looks harmonious and is easy to maintain in code.
Which scale ratio should I use?
For product UIs and web apps, a minor third (1.2) is a safe, versatile default. Marketing sites and blogs usually look best between a major third (1.25) and perfect fourth (1.333), where headlines gain presence without breaking layouts. Save the golden ratio (1.618) for hero-driven landing pages with one dominant headline. Very dense interfaces like dashboards benefit from smaller ratios such as 1.067 or 1.125.
Should I use px or rem for font sizes?
Use rem in your CSS. Rem units scale relative to the user's browser font-size preference, so your entire type scale respects accessibility settings automatically — a user who bumps their default from 16px to 20px sees every size grow proportionally. The calculator shows px values too, because they are easier to reason about and are what design tools like Figma use, but the CSS variables it generates use rem.
How many steps do I need in my type scale?
Most projects need 8 to 10 steps: two or three sizes below the base for captions, labels, and fine print, the base itself for body text, and five or six sizes above it for the heading hierarchy (h6 through h1). More steps than that usually signals an inconsistent design — if you find yourself needing in-between sizes constantly, try a smaller ratio instead of adding steps.
Can I use this with Tailwind CSS or design tokens?
Yes. The generated CSS variables map naturally onto Tailwind's fontSize scale — paste the rem values into the theme.fontSize section of your Tailwind config, or reference the variables directly with arbitrary values like text-[length:var(--text-xl)]. For design token systems (Style Dictionary, Tokens Studio, W3C design tokens), each step converts cleanly into a token: the names (xs, sm, base, lg, xl, 2xl) follow the same convention most token sets already use.
Why is my h1 huge on mobile, and how do I fix it?
Large ratios produce very big upper steps — with a 16px base and the golden ratio, an h1 can easily exceed 100px, which overwhelms a 375px-wide phone screen. The standard fix is fluid typography with CSS clamp(): for example, font-size: clamp(2.5rem, 1.5rem + 4vw, 6.85rem) lets the heading shrink smoothly on small screens and hit your full scale value on desktop. Alternatively, define a second scale with a smaller ratio for mobile breakpoints and swap the CSS variables inside a media query.
