Modular Type Scale Generator

Generate a complete modular type scale (1.125, 1.25, golden) in any base size.

Base size (px or rem eq.)

Scale ratio

Output unit

Min viewport (px)

Max viewport (px)

Major Third @ 1.250 · base 16px

--text-6xl

clamp(9.31rem, calc(8.15rem + ((100vw - 320px) / 960) * 2.33rem), 9.31rem)

--text-5xl

clamp(7.45rem, calc(6.52rem + ((100vw - 320px) / 960) * 1.86rem), 7.45rem)

--text-4xl

clamp(5.96rem, calc(5.22rem + ((100vw - 320px) / 960) * 1.49rem), 5.96rem)

--text-3xl

clamp(4.77rem, calc(4.17rem + ((100vw - 320px) / 960) * 1.19rem), 4.77rem)

--text-2xl

clamp(3.81rem, calc(3.34rem + ((100vw - 320px) / 960) * 0.95rem), 3.81rem)

--text-xl

clamp(3.05rem, calc(2.67rem + ((100vw - 320px) / 960) * 0.76rem), 3.05rem)

--text-lg

clamp(2.44rem, calc(2.14rem + ((100vw - 320px) / 960) * 0.61rem), 2.44rem)

--text-md

clamp(1.95rem, calc(1.71rem + ((100vw - 320px) / 960) * 0.49rem), 1.95rem)

--text-base

clamp(1.56rem, calc(1.37rem + ((100vw - 320px) / 960) * 0.39rem), 1.56rem)

--text-sm

clamp(1.25rem, calc(1.09rem + ((100vw - 320px) / 960) * 0.31rem), 1.25rem)

--text-xs

clamp(1.00rem, calc(0.88rem + ((100vw - 320px) / 960) * 0.25rem), 1.00rem)

Copy CSS variables

:root {
  --text-6xl: clamp(9.31rem, calc(8.15rem + ((100vw - 320px) / 960) * 2.33rem), 9.31rem);
  --text-5xl: clamp(7.45rem, calc(6.52rem + ((100vw - 320px) / 960) * 1.86rem), 7.45rem);
  --text-4xl: clamp(5.96rem, calc(5.22rem + ((100vw - 320px) / 960) * 1.49rem), 5.96rem);
  --text-3xl: clamp(4.77rem, calc(4.17rem + ((100vw - 320px) / 960) * 1.19rem), 4.77rem);
  --text-2xl: clamp(3.81rem, calc(3.34rem + ((100vw - 320px) / 960) * 0.95rem), 3.81rem);
  --text-xl: clamp(3.05rem, calc(2.67rem + ((100vw - 320px) / 960) * 0.76rem), 3.05rem);
  --text-lg: clamp(2.44rem, calc(2.14rem + ((100vw - 320px) / 960) * 0.61rem), 2.44rem);
  --text-md: clamp(1.95rem, calc(1.71rem + ((100vw - 320px) / 960) * 0.49rem), 1.95rem);
  --text-base: clamp(1.56rem, calc(1.37rem + ((100vw - 320px) / 960) * 0.39rem), 1.56rem);
  --text-sm: clamp(1.25rem, calc(1.09rem + ((100vw - 320px) / 960) * 0.31rem), 1.25rem);
  --text-xs: clamp(1.00rem, calc(0.88rem + ((100vw - 320px) / 960) * 0.25rem), 1.00rem);
}

Perfect-fourth (1.333) and Major-third (1.25) are the most-used ratios in modern design systems. Golden (1.618) and Perfect-fifth (1.5) suit editorial layouts.

Over deze tool

Pick a base font size, a scale ratio (minor second through double octave, plus a custom value), and an output unit. Get the full type scale (h1 through micro), the CSS clamp() values for fluid headings, and a copy-ready CSS snippet. The r/web_design 'what scale should I use' reference and r/typography recurring debate.

Vergelijkbare tools

Meer generators die je misschien handig vindt.

HVAC Maintenance Schedule Generator

Generate a printable HVAC maintenance schedule for any property.

Brand Name Generator

Generate short, brandable business names from one or two keywords.

Lorem Ipsum Generator

Generate lorem ipsum filler text by paragraphs, sentences, or words.

Andere categorieën

Zoek je iets anders? Blader door de rest van de catalogus.

Gesponsorde suggesties

Ready to launch? Get your domain in 60 seconds
Namecheap is our go-to for cheap .com registrations (free WHOIS guard).
Like this site? You'll love our weekly newsletter
One new tool, one fresh Reddit pain point, every Friday. No spam.

Sommige links hieronder zijn affiliatelinks. We kunnen een commissie verdienen als je via deze links koopt, zonder extra kosten voor jou.

Tool voorstellen