타이포그래피 스케일 생성기
기준 크기와 비율로 모듈러 타이포그래피 스케일을 만듭니다 — 실시간 미리보기, px/rem 표, 바로 복사할 수 있는 CSS 변수까지 한 번에.
조회수 603회
모듈러 스케일을 쓰는 이유
제목 크기를 감으로 정하는 대신, 모듈러 스케일은 기준 크기에 일정한 비율을 단계마다 곱합니다. 16 px 기준에 1.25(장3도) 비율을 적용하면 20, 25, 31.3, 39.1, 48.8...이 됩니다. 크기들은 음악적 관계로 연결되어 있어서, 기준이나 비율을 바꾸면 전체 위계가 함께 다시 조율됩니다.
자주 쓰는 비율: 1.125(장2도 — 밀도 높은 UI), 1.25(장3도 — 무난한 기본값), 1.333(완전4도 — 에디토리얼), 1.618(황금비 — 극적인 효과, 적은 단계만 필요). 생성된 CSS 커스텀 속성은 스타일시트에 바로 붙여넣을 수 있고, rem 값은 16 px 루트를 기준으로 합니다.
자주 묻는 질문
어떤 비율을 골라야 하나요?
제품/UI 작업은 보통 1.125~1.25 사이에 머뭅니다(제목이 본문보다 그리 크지 않음). 마케팅이나 에디토리얼 페이지는 1.333~1.618도 잘 어울립니다. h1이 너무 크게 느껴진다면 한 크기만 손으로 줄이지 말고 비율 자체를 한 단계 낮추세요.
스케일이 왜 기준보다 아래로도 내려가나요?
음수 단계(기준 ÷ 비율)는 같은 시스템에 속한 캡션이나 작은 글자를 만들어 줍니다 — 16/1.25 스케일에서 임의의 13이 아니라 12.8 px가 되는 식입니다.
px와 rem 중 무엇을 써야 하나요?
CSS에서는 rem을 쓰세요. 브라우저 글자 크기를 키운 사용자에게는 스케일 전체가 비례해서 커집니다. px 열은 디자인 툴 목업용입니다.
비슷한 도구
문제 신고하기
타이포그래피 스케일 생성기