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.

About this 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.

Related tools

More generators you might find useful.

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.

Other categories

Looking for something different? Browse the rest of the catalog.

Suggest a tool