What is a Modular Type Scale?
A modular scale multiplies a base font size by a fixed ratio, once per step, to produce every size in your typography system. If your body text is 1rem and your ratio is 1.25, H2 is 1.25rem, H1 is 1.5625rem, and so on. The result is a size relationship that feels intentional rather than arbitrary — every heading level is mathematically related to the ones next to it.
Scale Ratios, and When to Use Each
All of these are available as one-click presets in the tool above, and every multiplier is still editable per element afterward.
| Name | Ratio | Best for |
|---|---|---|
| Minor Second | 1.067 | Very subtle — headings barely stand apart from body text. Rare outside dense data UIs. |
| Major Second | 1.125 | Subtle, restrained hierarchy. Common in admin dashboards and UI-dense apps. |
| Minor Third | 1.200 | A safe, professional default — clear hierarchy without feeling dramatic. |
| Major Third | 1.250 | Slightly more contrast than Minor Third. Works well for most marketing and product sites. |
| Perfect Fourth | 1.333 | Confident, editorial hierarchy. A strong default for blogs and content-heavy pages. |
| Augmented Fourth | 1.414 | Bold and a little unconventional — good for design-forward brands. |
| Perfect Fifth | 1.500 | Dramatic size jumps. Best for landing pages and hero-heavy layouts. |
| Golden Ratio | 1.618 | The most dramatic option — striking for display type, risky for anything text-dense. |
Why Fluid Typescale Beats Fixed Breakpoints
A lot of typescale tools compute your sizes for one viewport, or offer a single "responsive" toggle that swaps to a second fixed scale at one breakpoint. That still leaves a visible jump the moment the viewport crosses that line — text snaps rather than scales.
This generator uses clamp() to interpolate continuously across your entire configured viewport range. Every element scales smoothly from your minimum multiplier to your maximum multiplier — no jump, no second breakpoint to maintain, and no gap between "mobile size" and "desktop size" where the text is technically undefined.
font-size: clamp(1.00rem, calc(0.909rem + 0.455vw), 1.25rem);Free vs. Paywalled: What to Check Before You Commit
Several typescale tools let you design a scale for free but put the actual CSS export behind a paid plan — you can preview the result, but copying the code costs money. Before you build a workflow around any typescale tool, it's worth checking:
- ✅ Is the generated CSS export actually free, or gated behind a login/paid tier?
- ✅ Does it output real
clamp()values, or just numbers for one fixed viewport? - ✅ Can you export CSS variables, SCSS, and Tailwind — not just plain CSS?
- ✅ Is font-family and font-weight configurable per section, with a live preview using the real font?
Every one of those is free here, with no account required — CSS, CSS Variable, SCSS, and Tailwind exports are all available directly above.
How to Use This Fluid Typescale Generator
- Set your minimum and maximum base font size (e.g. 16px on mobile, 18px on desktop).
- Set your minimum and maximum viewport width — 360px to 1440px covers most real devices.
- Pick a scale ratio preset, or dial in your own multiplier per element.
- Choose font families and weights for headings and body text, with live preview.
- Drag the preview slider to check every element scales the way you expect at every width.
- Copy the generated CSS, CSS Variable, SCSS, or Tailwind output.
Common Typescale Mistakes to Avoid
- Too many sizes. Six-plus distinct heading sizes plus body variants usually means the hierarchy has stopped communicating anything — most designs need 4-5 meaningfully different sizes, not more.
- A ratio that's too aggressive at small viewports. A dramatic ratio like Golden Ratio can make H1 unreadably large on a 360px phone even if it looks great on desktop — check the mobile end of your preview slider, not just desktop.
- Ignoring line-height. A line-height tuned for your minimum size often looks cramped or too loose at your maximum — use a unitless line-height so it scales with the font-size automatically.
- Different base sizes on different pages. If your blog and your marketing pages don't share the same base font size and viewport range, their typescales will drift out of sync visually even using the same ratio.
- Not testing real content. Lorem ipsum hides overflow and wrapping problems that a real headline reveals — use the live preview's editable text field with your actual copy.
Fluid Typescale Generator FAQs
What is a fluid typescale?
A typescale is a consistent set of font sizes across your headings and text — H1 larger than H2, and so on, in a fixed ratio. A fluid typescale uses clamp() so every size in that scale interpolates smoothly across the full viewport range, instead of jumping at fixed breakpoints.
Is this typescale generator really free?
Yes — every export format (CSS, CSS Variable, SCSS, Tailwind) is free with no login, signup, or paid tier. Some other typescale tools let you design a scale for free but gate the actual CSS export behind a paid plan; nothing here is paywalled.
How is a fluid typescale different from a typical online typescale tool?
Many typescale tools compute a fixed scale for one viewport, or offer a single 'responsive' breakpoint that swaps to a second fixed scale at one screen width. This tool interpolates continuously with clamp() across your entire configured viewport range, so there's no visible jump at any screen size.
Which scale ratio should I use?
Minor Third (1.2) or Major Third (1.25) are safe, professional defaults for most sites. Perfect Fourth (1.333) or Perfect Fifth (1.5) suit editorial or marketing pages that want a bolder hierarchy. Golden Ratio (1.618) is the most dramatic and works best for display-heavy, text-light designs.
Can I use different font families for headings and body text?
Yes — the tool lets you assign separate Google Fonts and font weights to heading elements (H1-H6) and body text (body, small, code), with a live preview using the real fonts.
Can I export the CSS as variables, SCSS, or Tailwind config?
Yes, all four formats are available and free: plain CSS, CSS custom properties, SCSS variables, and Tailwind utility classes with a customizable prefix.
Do I need to know the math behind clamp() to use this?
No. Pick a base font size, a viewport range, and a scale ratio (or set your own), and the tool calculates the slope and intercept for every element automatically. You can still fine-tune each element's multiplier manually if you want more control.
Related Tools
- Typography Clamp Generator (single element)
- Font Size & Typescale Clamp Generator (all-in-one)
- Layout & Spacing Clamp Generator
- ClampGenerator Homepage