Build harmonic font-size scales for design systems—preview steps live, export CSS custom properties or design-token JSON, all client-side.
Quick presets
Ag
Ag
Ag
Ag
Ag
Ag
Ag
Ag
:root {
--text-n3: 8.192px;
--text-n2: 10.24px;
--text-n1: 12.8px;
--text-base: 16px;
--text-1: 20px;
--text-2: 25px;
--text-3: 31.25px;
--text-4: 39.063px;
}
/* Utilities */
.text-n3 { font-size: 8.192px; }
.text-n2 { font-size: 10.24px; }
.text-n1 { font-size: 12.8px; }
.text-base { font-size: 16px; }
.text-1 { font-size: 20px; }
.text-2 { font-size: 25px; }
.text-3 { font-size: 31.25px; }
.text-4 { font-size: 39.063px; }A typography scale generator builds a modular set of font sizes from one base size and a musical ratio (e.g. major third), then exports CSS variables or design tokens.
A modular typography scale multiplies a base font size by a fixed ratio at each step—like major third (1.25), perfect fourth (1.333), or golden ratio (1.618)—to produce harmonious heading and body sizes.
Design systems use scales so components do not invent one-off pixel values. Developers map steps to CSS custom properties (--text-base, --text-2) or JSON design tokens consumed by Tailwind or component libraries.
This tool runs entirely in your browser: pick base size (px or rem), choose a preset ratio or enter a custom multiplier, preview the ladder and a live hierarchy sample, then copy CSS variables or token JSON. Nothing is uploaded to EverydayTools servers.
Generate modular type scales with live preview and CSS/token export—browser-only, never uploaded.
Concise answers for common searches — definitions, steps, and comparisons.
No. Scale math and export strings are computed in your browser. Font settings are never sent to EverydayTools servers.
Major Third (1.25) is the most common web default—clear heading contrast without huge jumps. Use smaller ratios (minor third) for dense dashboards; larger ratios (perfect fourth, golden) for editorial and marketing.
Prefer rem so type respects user font-size preferences and zoom. Use px when you need fixed alignment with raster assets.
Each step size = base × ratio^step. Negative steps shrink below base; positive steps grow for headings.
Formula
size(step) = baseSize × ratio^stepEnter your body font size (often 16px or 1rem) and choose px or rem for exported tokens.
Select a preset such as Major Third (1.25) or Perfect Fourth (1.333), or type a custom ratio between 1.05 and 1.8.
Choose how many sizes to generate above and below the base so headings and captions are covered.
Review the scale list and live hierarchy preview (section title, body, caption) with your sizes applied.
Copy CSS custom properties with utility classes, or JSON design tokens for your design-system repo.
Input
Base 16px · Major Third · 7 stepsOutput
Caption ~12.8px through H1 ~39px with CSS variablesBalanced contrast for nav, cards, and page titles without oversized display type.
Input
Base 18px · Perfect Fourth · 8 stepsOutput
Stronger jumps between body and display sizesMore dramatic hierarchy for landing pages; pair largest step with clamp() if needed.
Input
Base 1rem · export JSONOutput
{ "fontSize": { "base": "1rem", "2": "1.563rem", ... } }Drop into tokens.json for Tailwind or Style Dictionary pipelines.
Common real-world scenarios where this tool saves time.
Define --text-* CSS variables once so buttons, forms, and headings share the same modular sizes.
Compare your ad-hoc pixel list against a ratio-based ladder to consolidate duplicate sizes.
Copy ready-to-paste CSS or JSON tokens instead of redlining arbitrary sizes in Figma.
Preview how musical ratios change hierarchy before committing tokens in production code.
Step-by-step chains that connect related tools for common tasks.
| Ratio name | Multiplier | Best for |
|---|---|---|
| Minor Third | 1.2 | Dense apps, tables, admin UIs |
| Major Third | 1.25 | General web apps and design systems |
| Perfect Fourth | 1.333 | Marketing pages, stronger heading contrast |
| Golden Ratio | 1.618 | Editorial, poster-like hierarchy |
| Approach | Behavior | Use when |
|---|---|---|
| Modular scale (this tool) | Fixed steps from base × ratio | Component tokens, body and heading sizes at breakpoints |
| CSS clamp() | Smooth min–max between viewports | Hero headlines and responsive display type |
| Related tool | Use this tool when | Use related tool when |
|---|---|---|
| Spacing Scale Assistant | You need font-size tokens and hierarchy preview. | You need padding, gap, and margin scales that align to the same design language. |
| CSS Clamp Calculator | You want fixed modular steps for a design system. | You need fluid min/preferred/max values between viewport widths. |
Advertisement
A modular type scale multiplies a base font size by a fixed ratio at each step so every size relates mathematically—avoiding random values like 13px, 17px, and 22px side by side.
Major Third (1.25) is the most common default for product UI. Perfect Fourth and Golden Ratio work well when you want bolder marketing or editorial contrast.
Use rem for accessibility—sizes scale with the user's root font size and zoom. Use px only when you need pixel-perfect alignment with fixed raster assets.
Most systems need 3–5 steps below base (captions, labels) and 3–5 above (h6–h1). Seven total steps around base is a practical starting point.
Copy the JSON design tokens and extend theme.fontSize in tailwind.config.js, or paste CSS variables and reference them with arbitrary values.
No. This tool outputs static modular steps. Use the CSS Clamp Calculator when you need viewport-responsive hero or display type with clamp()—the landing preview shows a suggested clamp for your largest step.
Yes for design-system foundations: export px, rem, or em tokens, then layer fluid clamp() on display sizes. Export formats include CSS, SCSS, Tailwind theme.fontSize, and JSON design tokens.
Typography scale math runs in your browser—base sizes and ratios are never uploaded to EverydayTools.
Preview uses the same formula as export; verify in target browsers if you rely on sub-pixel rounding.
For design systems and prototyping—not a substitute for brand typography audits or accessibility certification.
Part of Design & UI Tools
More free tools for the same workflow.
Free color contrast checker — test text and background color combinations for WCAG AA (4.5:1) and AAA (7:1) compliance. Essential for accessible web design. No signup.
Free CSS clamp() calculator — generate responsive clamp() values for fluid typography and spacing. Enter minimum, maximum, and viewport sizes for instant CSS output. No signup.
Free spacing scale generator — create 4px, 8px, or custom-base spacing systems and export them as CSS variables, Tailwind config, or design token JSON. No signup required.
Advertisement
Reviewed by EverydayTools Editorial Team on 2026-05-20.