디자인 시스템의 핵심인 모듈러 타입 스케일을 즉시 생성합니다. 기준 크기에 황금비·1.25 등 비율을 적용해 h1~h6과 본문이 자연스럽게 비례하도록 만들고 CSS 변수 코드까지 한 번에 가져가세요.
🎯 미리보기
📋 CSS 코드
타입 스케일 생성기 사용법
- 기준 크기(Base)를 설정합니다. 본문 폰트 크기로 보통 16px이 표준입니다.
- 비율(Ratio)을 선택합니다. 1.2~1.333이 무난, 1.5 이상은 인상적이지만 모바일에서 거대할 수 있음.
- 단위(rem·px·em)와 제목 굵기를 선택합니다.
- 미리보기에서 h1~h6과 본문의 위계가 자연스러운지 확인합니다.
- CSS 변수 복사 또는 전체 CSS 복사로 코드를 가져갑니다.
주요 기능
- 11가지 모듈러 비율 (Minor Second ~ Octave, 황금비 포함)
- 기준 크기·단위(rem/px/em)·제목 굵기 커스터마이징
- h1~h6 + p + small + caption 자동 매핑
- 실시간 미리보기 + CSS 변수 / 전체 CSS 두 가지 출력
- line-height·letter-spacing 권장값 자동 산출
활용 예시
- 디자인 시스템 구축 — CSS 변수로 일관된 타이포 토큰
- 새 웹사이트 디자인 — 처음부터 비례 잡힌 폰트 계층
- 리뉴얼 전 검토 — 기존 제목/본문 비율 문제 진단
- 발표 자료·문서 템플릿 — 슬라이드 제목·본문 일관성
- Tailwind 커스텀 설정 —
fontSize값으로 그대로 사용
왜 모듈러 스케일을 써야 하나?
음악의 화성처럼, 타이포에서도 일정한 비율로 증가하는 폰트 크기가 시각적으로 가장 안정적입니다. 임의로 정한 18·22·30·40 같은 크기는 어색하지만, 1.2배율로 16·19·23·28·33·40으로 증가하면 자연스럽게 위계가 잡힙니다. 황금비(1.618)는 가장 극적인 인상, 1.25 (Major Third)는 부드럽게 위계가 살아 본문 중심 사이트에 적합합니다. CSS 변수(--text-lg 등)로 토큰화하면 디자인 시스템의 가장 기본 단위가 됩니다.
자주 묻는 질문
rem과 px 중 뭘 써야 하나요?
rem이 표준입니다. 사용자가 브라우저 폰트 크기를 키우면 rem 기반 사이즈는 비례 확대되어 접근성에 좋습니다. px는 고정 크기라 접근성에 불리합니다.
모바일에서 폰트가 너무 커요.
비율이 1.5 이상이면 모바일에서 h1이 거대해질 수 있습니다. 미디어쿼리로 모바일에서는 기준 크기를 줄이거나 더 작은 비율로 교체하세요. (예: @media (max-width: 640px) { html { font-size: 14px; } })
한글에도 같은 스케일을 쓰면 되나요?
한글은 영문보다 글자 면적이 커서 같은 px라도 더 크게 느껴집니다. 영문 사이트보다 1단계 작은 비율(1.2 → 1.125)을 쓰거나 본문을 16 → 15px로 약간 줄이는 것도 방법입니다.
line-height는 어떻게 정하나요?
본문은 1.5~1.7이 가독성 최적. 제목은 글자가 클수록 작게 설정(h1은 1.1~1.2, h3은 1.3~1.4). 본 도구는 자동으로 권장 line-height를 함께 출력합니다.