liminfoTypography Scale Calculator
타이포그래피 스케일 계산기 - 모듈러 스케일 기반 폰트 크기 생성
:root {
--font-h1: 4.209rem;
--font-h2: 3.157rem;
--font-h3: 2.369rem;
--font-h4: 1.777rem;
--font-h5: 1.333rem;
--font-h6: 1rem;
--font-body: 1rem;
--font-small: 0.75rem;
}Typography Scale Calculator 소개
타이포그래피 스케일 생성기는 두 가지 입력(픽셀 단위 기본 폰트 크기와 모듈러 스케일 비율)을 바탕으로 h1부터 h6, 본문 텍스트, 작은 캡션까지 완전한 타입 계층에 걸쳐 조화로운 폰트 크기 세트를 계산합니다. 음악적 음정에서 빌려온 8가지 고전적 비율을 지원합니다: 단2도(1.067), 장2도(1.125), 단3도(1.2), 장3도(1.25), 완전4도(1.333), 증4도(1.414), 완전5도(1.5), 황금비(1.618). 각 제목 수준은 `기본값 × 비율^n`으로 계산되며, n은 기본 수준으로부터의 단계 거리입니다.
웹 디자이너와 타이포그래퍼들은 페이지 전체에 시각적 조화를 만들기 위해 모듈러 스케일을 사용합니다. 폰트 크기를 임의로 선택(16px, 18px, 24px, 32px)하는 대신, 모듈러 스케일은 시스템의 모든 크기가 수학적 관계를 공유하도록 보장하여 디자인이 통일감 있게 느껴지게 합니다. 완전4도(1.333)는 크기가 너무 빠르게 커지지 않으면서 명확한 계층을 만들어 웹 인터페이스에 널리 사용됩니다. 황금비(1.618)는 수준 간 극적인 대비를 만들어 에디토리얼이나 디스플레이 타이포그래피에 적합합니다.
도구는 계산된 크기로 실제 텍스트("The quick brown fox")를 각 수준별로 실시간 미리보기로 렌더링하므로 화면에서 계층이 어떻게 보일지 즉시 확인할 수 있습니다. 크기는 px(디자이너용)와 rem(개발자용) 두 가지로 표시됩니다. 출력 패널은 스타일시트에 직접 붙여넣을 수 있는 커스텀 속성(`--font-h1`, `--font-h2` 등)이 포함된 완전한 `:root {}` CSS 블록을 생성합니다. 완전히 클라이언트 사이드로 동작하며 계정이나 설치가 필요 없습니다.
주요 기능
- 8가지 음악적 스케일 비율: 단2도(1.067)부터 황금비(1.618)까지
- 기본값 16px로 설정된 픽셀 단위 기본 폰트 크기 조정 가능
- 8개 수준 계산: h1(비율^5), h2(비율^4), h3(비율^3), h4(비율^2), h5(비율^1), h6/body(비율^0), small(비율^-1)
- 모든 수준에서 px와 rem 값을 동시에 표시
- "The quick brown fox" 샘플 텍스트를 실제 계산된 크기로 실시간 미리보기
- `--font-{level}` 커스텀 속성 선언이 포함된 완전한 `:root {}` CSS 블록 내보내기
- 전체 `:root` 블록을 클립보드로 전송하는 원클릭 CSS 복사 버튼
- 100% 클라이언트 사이드 — 서버 없음, 회원가입 없음, 오프라인 작동
자주 묻는 질문
모듈러 타입 스케일이란 무엇인가요?
모듈러 타입 스케일은 기본 크기에 고정 비율을 반복적으로 곱(또는 나누어) 생성된 폰트 크기 수열입니다. 이를 통해 각 크기가 다른 크기와 일관된 수학적 관계를 가지는 등비수열이 만들어져, 음악의 음정이 음들 사이에 조화로운 관계를 만드는 것과 유사하게 시각적 조화를 연출합니다.
일반적인 웹 애플리케이션에는 어떤 비율을 선택해야 하나요?
완전4도(1.333)가 웹 UI에서 가장 널리 사용되는 비율입니다. 크기가 지나치게 커지지 않으면서 제목 수준 간 명확한 계층을 만듭니다. 장3도(1.25)는 정보 밀도가 높은 인터페이스에 더 섬세한 선택입니다. 황금비(1.618)는 h1이 본문 텍스트보다 극적으로 커야 하는 에디토리얼 레이아웃에 잘 어울립니다.
기본 크기가 왜 16px인가요?
16px는 모든 주요 브라우저의 기본 폰트 크기입니다. 이를 기본값으로 사용하면 1rem이 스케일의 1단위와 같아져 rem 값을 직관적으로 이해할 수 있습니다. 프로젝트가 다른 루트 폰트 크기(예: 1rem = 10px가 되도록 62.5%)를 사용한다면 기본 크기를 그에 맞게 조정하세요.
음수 지수 크기(small)는 무엇을 의미하나요?
small 수준은 비율^-1을 사용하는데, 기본값보다 한 단계 아래인 `기본값 / 비율`을 의미합니다. 완전4도(1.333)에서 기본값 16px의 경우 약 12px가 됩니다. 음수 단계는 캡션, 각주, 보조 텍스트처럼 본문 텍스트보다 작아야 하는 부차적인 타이포그래피 요소에 사용됩니다.
내보낸 CSS를 프로젝트에서 어떻게 사용하나요?
`:root {}` 블록을 복사하여 메인 CSS 파일이나 디자인 토큰 파일에 붙여넣으세요. 그런 다음 스타일에서 커스텀 속성을 참조합니다: `<h1>` 요소에 `font-size: var(--font-h1)`, 본문 텍스트에 `font-size: var(--font-body)` 등. 이 방식은 커스텀 속성만 변경하면 전체 스케일 시스템을 쉽게 업데이트할 수 있게 합니다.
Tailwind CSS와 함께 이 스케일을 사용할 수 있나요?
네. `tailwind.config.js`의 `fontSize` 테마를 계산된 값으로 확장하거나, `@layer base` 블록에서 CSS 커스텀 속성을 사용하여 제목 요소를 스타일링할 수 있습니다. Tailwind의 내장 타입 스케일은 다른 방법론(고정 크기)을 사용하므로 모듈러 스케일은 다른 시각적 결과를 만들어냅니다.
이 도구가 작은 화면의 폰트 크기를 처리하나요?
이 도구는 모든 화면 크기에 대한 단일 스케일을 생성합니다. 반응형 타이포그래피를 위해서는 모바일용(더 작은 기본값)과 데스크톱용 두 가지 스케일을 생성하고 CSS 미디어 쿼리를 사용하여 전환할 수 있습니다. 유동 타이포그래피(`clamp()` 사용)는 이 도구로 생성되지 않지만 계산된 크기가 clamp 표현식의 최솟값/최댓값으로 사용될 수 있습니다.
각 제목 수준에 사용되는 공식은 무엇인가요?
공식은 `크기 = 기본값 × 비율^지수`이며, 지수는 h1=5, h2=4, h3=3, h4=2, h5=1, h6/body=0, small=-1입니다. rem 값은 브라우저 기본 루트 폰트 크기를 가정하여 `px / 16`으로 계산됩니다. CSS 출력에서 소수점이 지나치게 길어지지 않도록 값은 반올림됩니다.