🔤 타이포그래피 모듈러 스케일 생성기

기준 글꼴 크기와 비율(황금비, 완전5도 등)을 정하면 XS부터 5XL까지 9단계 폰트 크기를 자동으로 계산해 실시간 미리보기로 보여주는 도구입니다. 디자이너와 프런트엔드 개발자가 웹사이트 타이포그래피 체계를 잡을 때 유용하며, 결과는 CSS 변수와 Tailwind CSS 설정 코드로 바로 복사해 프로젝트에 붙여넣을 수 있습니다. 모든 계산은 브라우저에서만 이루어지고 서버로 전송되지 않습니다.

사용 방법

1. 기준 글꼴 크기(px)를 입력합니다.
2. 1.067(단2도)부터 2.000(옥타브)까지 원하는 비율을 목록에서 선택합니다.
3. 미리보기 문구를 원하는 텍스트로 바꿔가며 각 단계의 실제 크기를 확인합니다.
4. 생성된 CSS 변수 또는 Tailwind 설정을 복사 버튼으로 가져와 프로젝트에 적용합니다.

자주 묻는 질문

모듈러 스케일 비율은 어떤 걸 골라야 하나요?

본문이 촘촘한 사이트는 1.125~1.25처럼 작은 비율이, 제목 대비가 강한 랜딩페이지는 1.5나 황금비(1.618)처럼 큰 비율이 적합합니다. 미리보기로 직접 비교해보는 것이 가장 확실합니다.

px 값이 아니라 rem으로 나오는 이유는 무엇인가요?

rem은 사용자의 브라우저 기본 글꼴 크기 설정을 존중해 접근성이 좋고, 반응형 타이포그래피 구현에도 표준적으로 쓰이기 때문입니다. 옆에 참고용 px 값도 함께 표시됩니다.

이 도구로 만든 값을 실제 프로젝트에 어떻게 적용하나요?

CSS 변수 결과를 복사해 :root에 붙여넣거나, Tailwind 설정 결과를 tailwind.config의 fontSize 항목에 붙여넣으면 바로 사용할 수 있습니다.