Design Tools

Typographic Scale Generator — Modular Scale to CSS Variables Free

🔒 브라우저에서 실행

Generate a harmonious typographic scale from a base size and named ratio. Choose from eight classic ratios — Minor Second through the Golden Ratio — and get 9 steps from xs to 5xl with pixel and rem values. Export as CSS custom properties ready to paste into your :root block. No upload, no account, no logs.

사용 방법

  1. 기본 글꼴 크기를 px 단위로 입력하세요.
  2. 드롭다운에서 배율 비율을 선택하세요.
  3. CSS 사용자 정의 속성 출력 결과를 복사하세요.
Steppxrem
xs10.20.640
sm12.80.800
base161.000
lg201.250
xl251.563
2xl31.31.953
3xl39.12.441
4xl48.83.052
5xl613.815
:root {
  --text-xs: 0.640rem; /* 10px */
  --text-sm: 0.800rem; /* 13px */
  --text-base: 1.000rem; /* 16px */
  --text-lg: 1.250rem; /* 20px */
  --text-xl: 1.563rem; /* 25px */
  --text-2xl: 1.953rem; /* 31px */
  --text-3xl: 2.441rem; /* 39px */
  --text-4xl: 3.052rem; /* 49px */
  --text-5xl: 3.815rem; /* 61px */
}

Ratio: 1.25 | Base: 16px. All calculations run in your browser.

guide

How to Create a Typographic Scale Online — Free

Generate a modular type scale from a base size and ratio. Output CSS custom properties for your design system.

→
더 많은 무료 도구전체 492개 보기 →
Merge PDFsCompress ImageJSON FormatterPassword GeneratorVAT CalculatorQR Code Generator
Typographic Scale Generator — Modular Scale to CSS Variables Free | brevio