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.

Informazioni su questo strumento

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.

Strumenti correlati

Altri generatori che potrebbero esserti utili.

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.

Altre categorie

Cerchi qualcos'altro? Sfoglia il resto del catalogo.

Suggerimenti sponsorizzati

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.

Alcuni dei link qui sotto sono link di affiliazione. Potremmo ricevere una commissione se acquisti tramite questi link, senza costi aggiuntivi per te.

Suggerisci uno strumento