Modular Type Scale Generator
Generate a complete modular type scale (1.125, 1.25, golden) in any base size.
Major Third @ 1.250 · base 16px
--text-6xl
clamp(9.31rem, calc(8.15rem + ((100vw - 320px) / 960) * 2.33rem), 9.31rem)
Aa--text-5xl
clamp(7.45rem, calc(6.52rem + ((100vw - 320px) / 960) * 1.86rem), 7.45rem)
Aa--text-4xl
clamp(5.96rem, calc(5.22rem + ((100vw - 320px) / 960) * 1.49rem), 5.96rem)
Aa--text-3xl
clamp(4.77rem, calc(4.17rem + ((100vw - 320px) / 960) * 1.19rem), 4.77rem)
Aa--text-2xl
clamp(3.81rem, calc(3.34rem + ((100vw - 320px) / 960) * 0.95rem), 3.81rem)
Aa--text-xl
clamp(3.05rem, calc(2.67rem + ((100vw - 320px) / 960) * 0.76rem), 3.05rem)
Aa--text-lg
clamp(2.44rem, calc(2.14rem + ((100vw - 320px) / 960) * 0.61rem), 2.44rem)
Aa--text-md
clamp(1.95rem, calc(1.71rem + ((100vw - 320px) / 960) * 0.49rem), 1.95rem)
Aa--text-base
clamp(1.56rem, calc(1.37rem + ((100vw - 320px) / 960) * 0.39rem), 1.56rem)
Aa--text-sm
clamp(1.25rem, calc(1.09rem + ((100vw - 320px) / 960) * 0.31rem), 1.25rem)
Aa--text-xs
clamp(1.00rem, calc(0.88rem + ((100vw - 320px) / 960) * 0.25rem), 1.00rem)
AaCopy 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.
Über dieses 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.
Ähnliche Tools
Weitere generatoren, die nützlich sein könnten.
Andere Kategorien
Etwas anderes gesucht? Stöbern Sie im restlichen Katalog.
Rechner
Zahlen im Griff.
Formatierer
Text aufräumen.
Prüftools
Alles überprüfen.
Konverter
Einheiten blitzschnell umrechnen.
Tracker
Immer im Zeitplan.
SEO
Schlauer ranken.
Ingenieurwesen
Schlauer bauen.
YouTube
Kanal zum Wachsen bringen.
Gaming
Schärfer spielen.
Musik
Richtig abmischen.
Investieren
Schlauer investieren.
Gesundheit & Fitness
Stärker leben.
Heim & DIY
Macht es heimisch.
Reisen
Schlauer reisen.
Produktivität & Lifestyle
Schneller entscheiden.
Fotografie
Bilder schärfen.
Autos
Sparfaktor Auto.
Gesponserte Empfehlungen
- 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.
Einige der folgenden Links sind Affiliate-Links. Wir erhalten ggf. eine Provision, wenn Sie darüber kaufen — ohne Mehrkosten für Sie.