Skip to content
ZeroServer.tools

Modular Scale Calculator

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

Scale Configurations

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
StepSizeStrand
+548.83px (3.052rem)Strand A
+439.06px (2.441rem)Strand A
+331.25px (1.953rem)Strand A
+225px (1.563rem)Strand A
+120px (1.25rem)Strand A
+016px (1rem)Strand A
-112.8px (0.8rem)Strand A
-210.24px (0.64rem)Strand A
-38.19px (0.512rem)Strand A
-46.55px (0.41rem)Strand A
-55.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.

Private & free — this tool runs entirely in your browser.

Related Calculators tools