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

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

타이포그래피 스케일 생성기는 기준 크기와 모듈러 배율을, 필요한 만큼의 큰 제목 단계와 작은 캡션 단계를 갖춘 완전하고 수학적으로 일관된 타입 스케일로 바꿔 줍니다. 원시 폰트 크기뿐 아니라 각 단계에 어울리는 행간과 자간을 계산하고, 별도의 모바일 배율을 써서 모바일과 데스크톱 뷰포트 사이를 보간하는 선택적 유동 clamp() 식도 만들어 냅니다. 디자이너와 프론트엔드 개발자는 디자인 시스템의 타이포 토큰 구성, 크기 일관성 유지, 바로 붙여넣을 수 있는 CSS·Sass·Tailwind·JSON 확보에 사용합니다. 원하는 커스텀 배율을 입력하거나 정통 배율을 고르고, 기준 크기와 단위(px 또는 rem)를 설정한 뒤, 자신의 font-family로 미리보고 필요한 형식을 복사하세요.

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

1. 배율 입력란에 원하는 커스텀 배율을 입력하거나, 설정의 프리셋 드롭다운에서 완전4도(1.333) 같은 정통 배율을 고릅니다.
2. 기준 크기를 설정합니다. 이 값이 본문 크기이자 스케일의 기준점이 됩니다.
3. 설정에서 더 큰 단계와 더 작은 단계를 각각 몇 개 생성할지 고릅니다. 더 작은 단계는 기준 아래에 놓여 캡션과 작은 글씨에 쓰입니다.
4. 기준 행간·타이트 행간과 큰 글자의 자간을 조정하고, font-family를 입력해 자신의 서체로 스케일을 미리 봅니다.
5. 반응형 글자에는 최소·최대 뷰포트 너비와 모바일 배율을 설정해 유동 clamp() 스케일을 만듭니다.
6. 출력 형식을 CSS 변수·유동 clamp()·Sass·Tailwind 설정·JSON 사이에서 전환한 뒤, 코드나 특정 단계의 크기를 복사합니다.

예시

배율 1.333, 기준 16px, 위 5 / 아래 1

--font-size-2xl: 37.897px; --line-height-2xl: 1.27; --letter-spacing-2xl: -0.017em;

기준 16px, 배율 1.333, 모바일 배율 1.2, 320-1240px

--font-size-2xl: clamp(27.648px, 24.083px + 1.114vw, 37.897px);

임의 스케일, Tailwind 내보내기

fontSize: { base: ['16px', { lineHeight: '1.5', letterSpacing: '0em' }] }

자주 묻는 질문

프리셋 말고 커스텀 배율도 쓸 수 있나요?

네. 배율 입력란에 1.2, 1.5, 1.618 이나 1.45 같은 비표준 값 등 원하는 숫자를 입력할 수 있습니다. 설정의 프리셋 드롭다운은 같은 입력란을 채우는 단축 수단일 뿐이며, 프리셋과 일치하지 않는 값을 고르면 그냥 '커스텀'으로 표시됩니다.

더 작은(음수 방향) 단계는 어떻게 동작하나요?

스케일은 기준 크기(0단계)를 기준점으로 삼습니다. 더 큰 단계는 기준에 배율을 곱하고, 더 작은 단계는 나눠서 기준 아래에 sm, xs 같은 캡션·작은 글씨 크기를 만듭니다. 더 큰·더 작은 단계 수는 설정에서 정합니다.

행간과 자간은 어떻게 계산되나요?

행간은 본문 크기에서의 기준값에서 시작해 글자가 커질수록 더 타이트한 값으로 변하고, 자간은 기준에서의 0에서 큰 글자용 값으로 변하므로 큰 표시 글자는 조금 더 조밀하고 작은 글자는 조금 더 넉넉해집니다. 두 곡선 모두 설정에서 조정할 수 있습니다.

유동 clamp() 스케일이 무엇인가요?

각 단계마다 최소·최대 뷰포트 너비 사이에서 부드럽게 커지는 font-size: clamp()를 만듭니다. 최대 너비에서는 주 배율을, 최소 너비에서는 별도의 모바일 배율을 씁니다. 내보내려면 출력 형식에서 CSS clamp()를 고르세요.

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

아니요. 크기·행간·자간·유동 clamp() 값을 포함한 전체 스케일이 단순 계산으로 브라우저 안에서만 처리됩니다. 아무것도 업로드되지 않으므로 오프라인에서도 작동하고 설정이 비공개로 유지됩니다.