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

타이포그래피 스케일 가이드

타이포그래피 스케일은 일관된 수학적 비율을 따르는 글꼴 크기 집합입니다. 크기를 무작위로 선택하는 대신 각 단계에 동일한 비율을 곱하여 제목, 본문, 캡션 전체에 시각적 리듬과 계층 구조를 만듭니다.

기본 크기(16px는 브라우저 기본값이며 확실한 시작점)를 선택한 다음 비율을 선택합니다. 1.125와 같은 작은 비율은 편집 사이트에 미묘하고 우아한 스케일을 만듭니다. 1.618과 같은 더 큰 비율은 마케팅 페이지에 극적인 대비를 만듭니다.

Pro Tips

• 황금 비율(1.618)은 표시 제목에는 아름답지만 본문이 많은 사이트에는 너무 공격적입니다. 긴 형식으로 읽으려면 1.125에서 1.333 사이를 유지하세요.
• 스케일을 CSS 사용자 정의 속성으로 내보내고 글꼴 크기: var(--font-lg) 등 어디에서나 참조합니다. 나중에 스케일을 변경한다는 것은 하나의 파일을 편집한다는 의미입니다.

타이포그래픽 스케일이란

타이포그래픽 스케일은 하나의 수학적 비율을 따르는 고정된 글자 크기 집합으로, 각 단계가 다음 단계와 같은 비율로 이어집니다. 눈대중으로 크기를 고르는 대신 — 14, 17, 22, 31... — 기본 크기를 정하고 비율을 반복해서 곱하거나 나눕니다: 16 × 1.25 = 20, 다시 × 1.25 = 25, 이런 식으로요. 그 결과는 의도적인 계층이 되어 제목, 본문, 캡션, 라벨이 무작위 크기 더미가 아니라 같은 디자인 시스템의 구성원으로 보입니다.

모듈러 스케일 비율 비교

흔한 비율들은 성격이 다릅니다. 1.125와 1.2는 미묘하고 우아한 단계를 만들어 — 텍스트가 빽빽한 인터페이스에 적합합니다. 1.25와 1.333은 웹의 주력으로, 과하지 않으면서 뚜렷한 계층을 만듭니다(1.333은 클래식 음악의 완전 4도이기도 합니다). 1.5는 콘텐츠 사이트용 대담한 점프를 줍니다. 1.618 — 황금비 — 은 강렬하지만 공격적입니다: 디스플레이 제목과 마케팅 페이지에는 아름답지만 장문 읽기에는 보통 과합니다.

기본 글자 크기 고르기

16px는 브라우저 기본값이자 데스크톱 본문의 올바른 출발점입니다. 종이책과 비슷한 읽기 편안함을 주고 대부분의 사용자에게 읽기 쉬우며 접근성 지침과도 맞습니다. 모바일은 15px에서 시작하거나 16px을 유지해도 됩니다. 기본값이 정해지면 나머지는 모두 거기서 파생됩니다 — 제목은 위로 곱하고 캡션과 라벨은 아래로 나눕니다 — 기본값 하나만 바꾸면 전체 계층이 일관되게 재조정됩니다.

행간과 수직 리듬

스케일은 글자 크기만이 아닙니다. 행간은 글자가 작아질수록 넓혀야 합니다: 본문 1.5–1.6, 제목 1.2–1.4. 수직 리듬은 기본 크기에 비율을 곱해 간격 단계를 만듭니다 — 스케일이 16/20/25/31이면 같은 숫자를 마진과 패딩 증분으로 쓸 수 있습니다. 글자 크기와 간격이 하나의 비율을 공유하면 모든 요소가 보이지 않는 그리드에 맞춰져 페이지가 조립된 것이 아니라 구성된 것처럼 느껴집니다.

clamp()로 반응형 타이포그래피

글자는 모바일과 데스크톱 사이를 유연하게 움직여야 합니다. 현대 CSS는 한 줄로 해결합니다: font-size: clamp(1rem, 0.7rem + 1.2vw, 1.75rem) — 최소값, 유동 중간, 최대값. 최소와 최대는 스케일에서 가져오고(예: 16px~28px) 뷰포트 항이 그 사이를 채웁니다. 제목은 폰에서 우아하게 줄고 모니터에서 커집니다 — 미디어 쿼리는 하나도 필요 없습니다.