타이포그래피 스케일 생성기

타이포그래피 스케일 생성기란?

타이포그래피 스케일 생성기는 하나의 기준 크기와 모듈러 배율을, 본문과 h1부터 h6까지의 제목을 아우르는 수학적으로 일관된 완전한 타입 스케일로 바꿔 주는 무료 브라우저 내 도구입니다. 모듈러 스케일은 각 단계마다 기준 크기에 고정 배율을 곱하고(줄일 때는 나누고), 그 덕분에 큰 제목들이 균일하고 비례적인 폭으로 커져 임의가 아니라 의도적으로 느껴집니다. 디자이너와 프론트엔드 개발자는 디자인 시스템의 타이포그래피 토큰 구성, 사이트 전체에서 제목 크기 일관성 유지, 고른 배율을 바로 붙여넣을 수 있는 CSS로 변환하는 데 사용합니다. 드롭다운에서 배율을 고르고 기준 크기와 단위(px 또는 rem)를 설정한 뒤, 스케일을 CSS 커스텀 속성·Sass 변수·단순 rem 목록으로 복사하세요.

타이포그래피 스케일 생성기 사용법

1. 드롭다운에서 모듈러 배율을 고릅니다. 예를 들어 단3도(1.2), 완전4도(1.333), 황금비(1.618) 등이 있습니다.
2. 기준 크기 입력란에 기준 크기를 설정합니다. 이 값이 본문 크기이자 스케일의 기준점이 됩니다.
3. 단위 세그먼트 컨트롤로 출력을 px와 rem 사이에서 전환합니다(rem은 루트 16px를 가정).
4. 실시간 미리보기에서 본문과 h1~h6가 계산된 크기로 표시되는 모습을 확인합니다.
5. 출력 형식을 CSS 변수·Sass·rem 사이에서 전환한 뒤, 복사 버튼으로 생성된 코드를 복사합니다.

예시

배율 1.333, 기준 16px

본문 16px, h6 21.328px, h5 28.43px, h4 37.897px, h3 50.517px, h2 67.34px, h1 89.764px

배율 1.618, 기준 16px, CSS 변수

:root {
  --font-size-body: 16px;
  --font-size-h1: 287.072px;
}

배율 1.2, 기준 16px, rem

본문: 1rem; h1: 2.986rem

자주 묻는 질문

모듈러 스케일이 무엇인가요?

모듈러 스케일은 기준 크기에서 시작해 더 큰 각 단계마다 고정 배율을 곱합니다(작은 단계는 나눕니다). 여기서는 본문이 기준 크기를 쓰고, h6는 기준×배율, h5는 기준×배율의 제곱, 이런 식으로 h1까지 이어져 각 제목이 인접한 단계와 비례 관계를 유지합니다.

어떤 배율을 쓸 수 있나요?

드롭다운에는 단2도(1.067), 장2도(1.125), 단3도(1.2), 장3도(1.25), 완전4도(1.333), 증4도(1.414), 완전5도(1.5), 황금비(1.618) 같은 흔히 쓰는 타이포그래피 배율이 들어 있습니다.

px와 rem 단위는 어떻게 다른가요?

px는 절대 픽셀 크기를 출력하고, rem은 흔한 기본값 16px를 가정해 루트 요소 기준 상대 크기를 출력합니다. rem은 사용자의 브라우저 글꼴 크기 설정에 따라 함께 확대·축소되어 접근성 측면에서 자주 선호됩니다.

세 가지 출력 형식은 각각 무엇을 주나요?

CSS 변수는 --font-size-* 커스텀 속성이 담긴 :root 블록을, Sass는 $font-size-* 변수를, rem은 어떤 스타일시트에든 붙여넣거나 직접 참조할 수 있는 간결한 목록을 만들어 줍니다.

제 데이터가 서버로 전송되나요?

아니요. 전체 스케일은 단순 산술로 브라우저 안에서만 계산됩니다. 어떤 폰트 크기·배율·단위도 업로드되지 않으므로 오프라인에서도 작동하고 설정이 비공개로 유지됩니다.