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.

이 도구에 대하여

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.

다른 카테고리

다른 것을 찾고 계신가요? 나머지 카탈로그를 둘러보세요.

스폰서 추천

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.

아래 링크 중 일부는 제휴 링크입니다. 해당 링크를 통해 구매하시면 추가 비용 없이 저희가 수수료를 받을 수 있습니다.

도구 제안

Modular Type Scale Generator

이 도구에 대하여

관련 도구

HVAC Maintenance Schedule Generator

Brand Name Generator

Lorem Ipsum Generator

다른 카테고리

도구 제안