SaaS dashboard body + headings
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.
Build harmonic font-size scales for design systems—preview steps live, export CSS custom properties or design-token JSON, all client-side.
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.
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 Second | 1.067 | Dense UI, tight data tables, compact labels |
| Major Second | 1.125 | Compact apps with subtle heading jumps |
| Minor Third | 1.2 | Dashboards, admin panels, data-heavy interfaces |
| Major Third | 1.25 | General web apps and design systems (most common default) |
| Perfect Fourth | 1.333 | Marketing pages, stronger heading contrast |
| Augmented Fourth | 1.414 | Display headings, poster-like hero type |
| Perfect Fifth | 1.5 | Editorial layouts, magazine-style hierarchy |
| Golden Ratio | 1.618 | Bold editorial, brand-forward display type |
| 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.
Yes. Choose the Tailwind export tab to copy a theme.fontSize block, or use JSON tokens and extend tailwind.config.js. CSS variables work with arbitrary values like text-[var(--text-lg)].
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.
Each step size equals base × ratio^step. Negative steps shrink below the base (captions, labels); positive steps grow for headings. The tool applies the same math in preview and export.
16px (1rem) is the web default and matches most browser root font sizes. Dashboards often use 14px; marketing pages sometimes use 18px for slightly larger body copy.
Smaller ratios (1.2 or below) produce tighter jumps between sizes—ideal for dense admin UIs, tables, and interfaces where headings must stay compact.
Larger ratios create dramatic heading contrast. Use them on landing pages, editorial sites, and brand campaigns where display type needs to stand out from body copy.
Yes. Open Advanced options and type any multiplier between 1.05 and 1.8. Useful when brand guidelines specify a non-standard ratio like 1.28.
px exports fixed pixel values. rem exports relative to the root font size (recommended for tokens). em exports relative to the parent element—handy for component-scoped typography.
Copy the :root block into your global stylesheet or design-token layer. Reference variables like var(--text-lg) in components instead of hard-coded pixel values.
Paste the Tailwind export into theme.extend.fontSize in tailwind.config.js, or map CSS variables with arbitrary values. Rebuild Tailwind so new sizes appear in utility classes.
A fontSize object keyed by step labels (base, sm, lg, etc.) with string values in your chosen unit. Drop it into tokens.json for Style Dictionary or similar pipelines.
Steps below generate smaller sizes under the base (captions, fine print). Steps above generate larger sizes for headings. Adjust both in Advanced options to control how many tokens you export.
The tool maps ladder steps to common roles—overline, caption, body, h6 through h1—based on step count. Fewer steps mean some roles share the same size; add steps to widen the hierarchy.
They flag common issues such as body text below 16px equivalent or very large display sizes that may need line-height tuning. Pair results with the Contrast Checker for WCAG color validation.
No. All math and exports run in your browser. Settings autosave to localStorage on your device only—they are never sent to EverydayTools servers.
After the page loads, scale generation and export work without a network connection. Autosave uses localStorage on your device.
Article (long-form content), UI card (component-style layout), and Landing (marketing hero). Toggle light or dark backgrounds to judge contrast before shipping tokens.
For marketing display type, the tool suggests a clamp() formula so the largest step scales smoothly between viewports. Copy it or refine values in the CSS Clamp Calculator.
Figma styles are design-layer definitions. This tool outputs developer-ready CSS, SCSS, Tailwind, or JSON tokens from the same modular math—ideal for handoff to code.
Yes. Generate type tokens here, then use the Spacing Scale Assistant for padding and gap tokens. Many teams share the same ratio (e.g. Major Third) across both scales.
Material type scale uses distinct sizes rather than a single ratio multiplier. Bootstrap 5 defaults to a modular-ish scale near Major Second/Major Third. This tool lets you match or customize any approach.
Often yes in product UI (one sans family). Editorial and marketing sites frequently pair a display face for headings with a readable body face—see Font pairing ideas in Advanced options.
List your current pixel sizes, then generate a modular scale with a similar ratio. Compare which ad-hoc sizes can merge into token steps to reduce design debt.
This tool exports font sizes only. A common rule: tighter line-height on large display type (1.1–1.2), relaxed on body (1.5–1.65). Set line-height separately in your design system.
Yes. Export in em when typography should scale with a component's local font-size—useful for buttons, cards, or nested widgets where rem would ignore parent context.
The tool rounds displayed px for readability while preserving precise rem/em values in export. Sub-pixel differences are normal—verify in target browsers if pixel-perfect match matters.
Press Ctrl+Shift+C (Cmd+Shift+C on Mac) to copy the current export format to your clipboard without clicking the copy button.
Design system (16px, Major Third), Dashboard (14px, Minor Third), Marketing (18px, Perfect Fourth), and Editorial (18px, Golden Ratio) set base, ratio, and step counts in one click.
Yes. Use Download in the export panel to save type-scale.css, .scss, or .json depending on the selected format.
The golden ratio (≈1.618) is a classic proportional relationship. As a type scale multiplier it produces bold jumps—best for editorial heroes, not dense application UI.
Click Reset next to the workflow presets to restore base 16px, Major Third ratio, and default step counts. Clears custom ratio selections.
Yes. Every format exports paired line-height tokens (--leading-* in CSS, lineHeight in JSON, and lineHeight in Tailwind fontSize tuples). Values are tuned by step size—tighter for display, relaxed for body.
Fluid CSS wraps each step in clamp() so type scales smoothly between 320px and 1280px viewports. Display steps get more viewport range; body and caption steps stay tighter. Pair with static CSS when you need fixed breakpoint tokens.
Click Share scale to copy a URL that restores base size, ratio, step counts, preview scene, and export format. Settings also autosave in your browser via localStorage.
A complete tailwind.config.js module with theme.extend.fontSize entries—including lineHeight—for every step. Paste into your project and adjust plugins or content paths as needed.
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.
Advertisement
Reviewed by EverydayTools Editorial Team on 2026-06-02.