Modular Typography Scale & Fluid Font Generator
Generate a mathematically harmonious type scale, a proportional line-height ramp, and responsive CSS clamp() fluid font sizes — export straight to CSS variables or a Tailwind config.
Scale Parameters
16px matches the browser default and is the safest accessible baseline for body copy.
Headings (H6 and above) interpolate smoothly between a mobile and desktop size. Body, Small, and Caption stay fixed.
Drag to preview exactly how the scale looks at that viewport width, without resizing your browser.
Applies to the CSS Variables tab. clamp() and Tailwind output always use rem.
Live Preview
simulating 860px viewportEvery row re-renders at its real computed size — this is not a mockup.
:root {
/* Fluid type — interpolates between 400px and 1280px viewport width */
--text-display: clamp(2.281rem, 1.150rem + 4.523vw, 4.768rem);
--text-h1: clamp(2.027rem, 1.215rem + 3.250vw, 3.815rem);
--text-h2: clamp(1.802rem, 1.234rem + 2.272vw, 3.052rem);
--text-h3: clamp(1.602rem, 1.220rem + 1.527vw, 2.441rem);
--text-h4: clamp(1.424rem, 1.183rem + 0.962vw, 1.953rem);
--text-h5: clamp(1.266rem, 1.131rem + 0.540vw, 1.563rem);
--text-lead: clamp(1.125rem, 1.068rem + 0.227vw, 1.250rem);
--text-body: 1.000rem;
--text-small: 0.800rem;
--text-caption: 0.640rem;
--leading-display: 1.12;
--leading-h1: 1.17;
--leading-h2: 1.23;
--leading-h3: 1.28;
--leading-h4: 1.34;
--leading-h5: 1.39;
--leading-lead: 1.45;
--leading-body: 1.5;
--leading-small: 1.56;
--leading-caption: 1.6;
}Understanding Modular Typography Scales
A modular scale multiplies a base font size by a fixed ratio to generate a harmonious progression of sizes for headings, body copy, and UI text — instead of picking arbitrary pixel values by eye. The technique borrows its ratio names (Minor Third, Perfect Fifth, Golden Ratio) from musical interval theory and classical typography, both of which rely on the same idea: proportions that repeat at a consistent rate feel intentional and well-balanced to the human eye, the same way they sound balanced to the ear.
The 8 Scale Ratios, Explained
Every ratio below produces a different personality for your type hierarchy. Smaller ratios (closer to 1.0) create subtle, utilitarian hierarchy; larger ratios create bold, editorial hierarchy. Pick a ratio in the tool above that matches the tone of the product you're designing.
Minor Second
1.067Best for: Dense admin dashboards & data tables
The subtlest ratio available. Sizes barely differ from one step to the next, so hierarchy comes from weight and color rather than scale. Ideal when a screen has many small text variants (table headers, badges, metadata) and you can't afford large jumps eating up vertical space.
Major Second
1.125Best for: Enterprise SaaS dashboards & utility UIs
A gentle step up from Minor Second. Still restrained enough for information-dense products, but with just enough contrast to separate section titles from body copy without dominating the layout.
Minor Third
1.200Best for: Design systems & component libraries
One of the most widely used ratios in production UI design systems (Material Design uses something close to it). Balanced hierarchy that reads clearly on both desktop and mobile without feeling dramatic.
Major Third
1.250Best for: Content-led marketing sites & SaaS landing pages
The default in this generator. A warm, classic ratio that gives headings real presence while keeping body copy comfortably readable — the sweet spot for most SaaS marketing and product pages.
Perfect Fourth
1.333Best for: Landing pages & editorial layouts
Noticeably bolder jumps between steps. Headlines start to command real attention, which works well for pages built to sell a single idea fast — hero sections, launch pages, editorial features.
Augmented Fourth
1.414Best for: Expressive brand sites (use sparingly)
Also known as the 'tritone' ratio. Produces dramatic, sometimes jarring jumps in size. Best reserved for brand-forward sites that want typography itself to feel like a design statement.
Perfect Fifth
1.500Best for: Hero sections & single-page product launches
A very large step between sizes, pushing display text and body copy far apart. Good for pages with one dominant headline and comparatively little supporting text, like a pre-launch landing page.
Golden Ratio
1.618Best for: Portfolios, editorial & premium brand experiences
The most dramatic ratio, derived from the golden proportion found throughout classical art and architecture. Produces striking, editorial-feeling type hierarchies — best used where typography carries most of the visual weight.
How Fluid Typography with clamp() Works
CSS clamp() takes three values — clamp(MIN, PREFERRED, MAX) — and picks whichever is in the middle. The PREFERRED value is a linear equation mixing a fixed rem amount with a vw (viewport width) amount, so it grows continuously as the browser resizes. Below the minimum viewport it locks to MIN, above the maximum viewport it locks to MAX — no media queries required.
This generator calculates the slope and intercept for you using the same two-point interpolation technique popularized by Utopia.fyi: it takes the size at your Mobile Scale Ratio (evaluated at Min Viewport) and the size at your Desktop Scale Ratio (evaluated at Max Viewport), then draws a straight line between them.
Notice that Body, Small, and Caption don't scale fluidly in this tool — that's intentional. Real-world fluid type systems (like Utopia's) almost always keep body copy near-constant across screen sizes, since paragraph text needs a consistent, readable size on every device. Only headings and display text — which exist to create visual hierarchy — benefit from scaling with the viewport.
Why Line-Height Shrinks as Font Size Grows
Large display text and headlines already have tall, open letterforms, so extra line-height between wrapped lines starts to look disconnected and loose. Small body and caption text needs the opposite: generous line-height (around 1.5–1.6× the font size) gives the eye enough vertical breathing room to track from the end of one line to the start of the next. This tool ramps line-height down from 1.6 at Caption to roughly 1.1 at Display, so every step stays comfortable to read at its own size.
rem vs. px — Which Unit Should You Export?
rem units are relative to the root html { font-size }, which means they scale correctly when a user increases their browser's default font size for accessibility. px is fixed and ignores that preference. Export rem for production CSS, and only reach for px when you're quickly matching a Figma spec or prototyping.
Step-by-Step: How to Use This Generator
Set your base font size
16px matches the browser default and is the accessible baseline most browsers, screen readers, and zoom tools expect. Avoid going below 14px for body copy.
Choose a desktop scale ratio
Use the ratio guide above to match your product's tone — subtle ratios (1.067–1.125) for dense dashboards, bolder ratios (1.25–1.618) for marketing and editorial layouts.
Enable fluid typography
Toggle it on, pick a smaller Mobile Scale Ratio, and set Min/Max Viewport bounds. 400–1280px comfortably covers small phones through laptop screens.
Preview and simulate
Drag the Simulate Viewport Width slider to see exactly how each heading grows between your min and max breakpoints before you ship a single line of CSS.
Export your tokens
Copy CSS custom properties, the clamp() fluid ruleset, or a ready-to-paste Tailwind fontSize config, then drop it into your project's :root or tailwind.config.js.
Frequently Asked Questions
What is a modular typography scale?
A modular typography scale multiplies a base font size by a fixed ratio (like 1.25 or 1.333) to generate a harmonious sequence of heading and body text sizes, instead of picking arbitrary pixel values by eye.
What's the difference between a modular scale and fluid typography?
A modular scale defines the ratio between sizes at any single moment. Fluid typography, built with CSS clamp(), makes those sizes interpolate smoothly between a minimum and maximum value as the viewport width changes, removing the need for font-size media queries.
Which scale ratio should I use for a SaaS product?
Dense, data-heavy dashboards usually work best with subtle ratios like Minor Second (1.067) or Major Second (1.125). Marketing and landing pages read better with Major Third (1.25) or Perfect Fourth (1.333) for stronger visual hierarchy.
Do I need JavaScript to use clamp() typography in production?
No. clamp() is native CSS, supported in every modern browser. Paste the generated CSS variables (or Tailwind config) straight into your stylesheet — there's no runtime cost or JavaScript required.
Will fluid typography hurt Core Web Vitals or cause layout shift?
No, as long as the font-size is set before content paints (which it is with plain CSS). clamp() changes size continuously on resize rather than snapping at breakpoints, which typically produces less visible shift than media-query-based type, not more.
How does this relate to accessibility (WCAG)?
Exporting sizes in rem (not px) respects a user's browser font-size preference, and the line-height ramp in this tool keeps body text at or above the 1.5x ratio recommended by WCAG 2.1 Success Criterion 1.4.12 (Text Spacing).
Suggested Tools for Your Stack
Explore related utilities in this workflow or discover cross-category tools.
Related in Design Systems & Code
SaaS Design Token & Theme Studio
Generate 8pt spacing scales, typography ramps, and export to Tailwind v3/v4 & Figma JSON.
Accessible SaaS Color Palette Generator
Generate harmonious 10-shade UI color ramps (50–950) with automated WCAG contrast validation.
Recommended from Other Categories
SaaS UX & Friction Audit
0–100 Product Experience Score across onboarding, IA, visual hierarchy, and navigation.
SaaS Pricing Page & Psychology Analyzer
Audit tier differentiation, annual toggle psychology, feature comparison, and objection handling.