Modular Scale Calculator

Create consistent typographic hierarchies, blend multi-stranded base sizes, and export Tailwind v4 custom themes.

Scale Configurations

Base Size A (px)

Base Size B (px - Optional)

Ratio Preset

Scale Range

WYSIWYG Article Layout Preview

Last modified: June 2026 · Typographic Scale System

:root {
  --font-size-5: 3.052rem; /* 48.83px */
  --font-size-4: 2.441rem; /* 39.06px */
  --font-size-3: 1.953rem; /* 31.25px */
  --font-size-2: 1.563rem; /* 25px */
  --font-size-1: 1.25rem; /* 20px */
  --font-size-0: 1rem; /* 16px */
  --font-size-neg-1: 0.8rem; /* 12.8px */
  --font-size-neg-2: 0.64rem; /* 10.24px */
  --font-size-neg-3: 0.512rem; /* 8.19px */
  --font-size-neg-4: 0.41rem; /* 6.55px */
  --font-size-neg-5: 0.328rem; /* 5.24px */
}

Generated Scale

Step	Size	Strand
+5	48.83px (3.052rem)	Strand A
+4	39.06px (2.441rem)	Strand A
+3	31.25px (1.953rem)	Strand A
+2	25px (1.563rem)	Strand A
+1	20px (1.25rem)	Strand A
+0	16px (1rem)	Strand A
-1	12.8px (0.8rem)	Strand A
-2	10.24px (0.64rem)	Strand A
-3	8.19px (0.512rem)	Strand A
-4	6.55px (0.41rem)	Strand A
-5	5.24px (0.328rem)	Strand A

Tailwind v4: Custom scales fit directly into the `@theme` block. Map the scale values directly to custom properties.

Typographic scaling systems in CSS

Typographic modular scales apply geometric and mathematical multipliers to create consistent font sizing structures.

Multi-stranded systems merge multiple font size bases to align content hierarchies, small labels, and large display banners.

Built and maintained by Meet Shah · Last updated 1 August 2026

What this tool is used for

Building a typographic scale from a base size and a ratio.
Comparing two ratios against a preview of every step.
Producing CSS custom properties for a type scale.
Replacing ad-hoc sizes with a consistent progression.
Seeing how many steps a ratio gives before sizes become unusable.

Frequently Asked Questions

What is a modular scale?: A sequence built by repeatedly multiplying a base size by a fixed ratio, so each step relates to its neighbours consistently. It replaces arbitrary font sizes with a small set that share a proportion.
Where do the ratios come from?: Musical intervals — the major third at 1.25, the perfect fourth at 1.333, the perfect fifth at 1.5 — plus the golden ratio at 1.618. The names are borrowed by analogy; there is no acoustic property at work in type.
Which ratio should I pick?: A small one such as 1.125 or 1.2 for dense interfaces where sizes must stay close together, and a large one such as 1.5 or 1.618 for editorial layouts with dramatic headings. Above 1.618 the middle steps become unusable quickly.
What is a second base for?: Interleaving two scales from the same ratio gives you more usable sizes without abandoning the proportion. It is the standard fix for a scale whose steps are too far apart in the range you actually need.
Why are the values given in rem?: Because rem scales with the user's root font size, so the whole hierarchy responds to a browser text-size preference. A scale hard-coded in pixels ignores that setting entirely.
Should I use every step?: No. A scale is a palette to choose from, not a list to exhaust — most interfaces use five or six sizes. Its value is that any size you do pick is guaranteed to relate to the others.

Common errors and gotchas

Choosing a ratio so large that the extremes are unusable in the same design.
Generating more steps than the design needs, which invites inconsistency.
Ignoring line height, which must move with the scale or the rhythm breaks.
Naming steps by pixel value, which makes a change a rename.
Applying the type ratio to spacing, where a different progression usually reads better.