liminfo

Type Scale Calculator

타이포그래피 스케일 계산기 - 황금비, 장3도 등 비율

h1
샘플 텍스트

48.8px

3.052rem

h2
샘플 텍스트

39.1px

2.441rem

h3
샘플 텍스트

31.3px

1.953rem

h4
샘플 텍스트

25.0px

1.563rem

h5
샘플 텍스트

20.0px

1.250rem

h6
샘플 텍스트

16.0px

1.000rem

body
샘플 텍스트

16.0px

1.000rem

small
샘플 텍스트

12.8px

0.800rem

CSS 출력

:root { --h1: 3.052rem; } /* 48.8px */
:root { --h2: 2.441rem; } /* 39.1px */
:root { --h3: 1.953rem; } /* 31.3px */
:root { --h4: 1.563rem; } /* 25.0px */
:root { --h5: 1.250rem; } /* 20.0px */
:root { --h6: 1.000rem; } /* 16.0px */
:root { --body: 1.000rem; } /* 16.0px */
:root { --small: 0.800rem; } /* 12.8px */

Type Scale Calculator 소개

타입 스케일 계산기는 타이포그래피 디자인 시스템을 위한 모듈러 폰트 크기 스케일을 계산하는 무료 브라우저 기반 도구입니다. 픽셀 단위 기본 폰트 크기를 입력하고 단2도(1.067)부터 황금비(1.618)까지 8가지 스케일 비율 중 하나를 선택하면, `기본값 × 비율^지수` 공식으로 h1부터 h6, 본문 텍스트, small 텍스트의 크기를 px와 rem 단위로 모두 계산해 표시합니다.

모듈러 타입 스케일은 텍스트 계층에서 시각적 일관성을 만들기 위해 디자이너와 개발자들이 사용합니다. 폰트 크기들이 공통 기하학적 비율을 공유할 때, 타입 시스템은 임의적이 아니라 체계적이고 의도적으로 느껴집니다. 이 계산기는 새 프로젝트를 시작하거나, 기존 디자인 시스템을 검토하거나, 특정 인터페이스에 맞는 계층과 컴팩트함 사이의 적절한 균형을 찾기 위해 다양한 비율을 실험할 때 특히 유용합니다.

도구는 완전히 브라우저에서 실행되며 서버 통신이 없습니다. 기본 크기나 비율을 변경하면 8개 크기 수준이 즉시 업데이트됩니다. 결과의 각 행에는 요소 이름(h1, h2 등), 픽셀값, rem 값, 실제 계산된 크기로 렌더링된 실시간 텍스트 미리보기가 표시됩니다. 하단의 CSS 출력 섹션에는 각 수준에 대한 바로 사용 가능한 커스텀 속성 선언이 표시되며, 복사 버튼으로 출력을 클립보드에 바로 전송할 수 있습니다.

주요 기능

  • 단2도(1.067)부터 황금비(1.618)까지 8가지 사전 설정 스케일 비율
  • 양수면 모두 입력 가능한 기본 폰트 크기 자유 입력 필드
  • 8개 타이포그래피 수준 계산: h1(비율^5)부터 small(비율^-1)까지
  • 모든 계산 수준에서 px와 rem을 나란히 표시
  • 각 수준마다 실제 계산된 픽셀 크기로 인라인 텍스트 실시간 미리보기
  • `--{level}: {rem}rem` 커스텀 속성 선언이 포함된 CSS 출력 블록
  • 전체 CSS 출력을 위한 원클릭 복사 버튼
  • 제출 버튼 없이 모든 키 입력 시 즉각 재계산

자주 묻는 질문

typescale과 typescalecalc의 차이는 무엇인가요?

두 도구 모두 동일한 모듈러 스케일 계산을 수행합니다. typescale은 전체 너비 텍스트 미리보기와 눈에 띄는 패널의 CSS 복사 버튼을 표시하는 반면, typescalecalc는 스케일 행 아래에 CSS 출력이 인라인으로 삽입된 더 컴팩트한 레이아웃을 제공합니다. 워크플로에 맞는 레이아웃을 선택하세요.

타입 스케일 비율이란 무엇인가요?

타입 스케일 비율은 연속된 폰트 크기 단계 사이의 상수 배율입니다. 비율 1.25(장3도)는 각 수준이 그 아래 수준보다 25% 크다는 것을 의미합니다. 비율은 음악적 음정에서 빌려온 것으로, 음악과 시각 디자인 모두 비례적이고 수학적으로 관련된 값에서 이점을 얻기 때문입니다.

rem 값은 어떻게 계산되나요?

rem 값은 브라우저 기본 루트 폰트 크기 16px를 가정하여 `px / 16`으로 계산됩니다. 기본값이 16px일 때 body 수준(기본값과 동일)은 rem 값이 1이 됩니다. 프로젝트가 다른 루트 폰트 크기를 설정한다면 실제 루트 크기로 px 값을 나누면 됩니다.

small 수준은 무엇을 나타내나요?

small 수준은 비율^-1을 사용하며 기본값보다 한 단계 아래인 `기본값 / 비율`을 의미합니다. 장3도(1.25)에서 기본값 16px의 경우 12.8px가 됩니다. 이 수준은 캡션, 레이블, 각주, 보조 텍스트 같은 2차적 텍스트 요소를 위한 것입니다.

14px나 18px 같은 비표준 기본 크기를 입력할 수 있나요?

네. 기본 크기 필드는 양수면 모두 입력 가능합니다. 14px 기본값은 대시보드, 데이터 테이블처럼 정보 밀도가 높은 인터페이스에 흔히 사용되며, 18px 또는 20px는 더 큰 본문 텍스트가 가독성을 높이는 장문 읽기 콘텐츠에 인기 있습니다.

크기 차이가 가장 작은 비율은 무엇인가요?

단2도(1.067)가 수준 간 차이가 가장 작습니다. 스케일의 낮은 쪽에서는 거의 인식하기 어려울 정도입니다. h1이 body 크기의 약 1.38배에 불과해 제목에는 거의 사용되지 않습니다. 테이블 헤더와 테이블 본문을 구분하는 것처럼 동일 콘텐츠 유형 내에서 미묘한 시각적 구분을 위해 더 적합합니다.

실제 프로젝트에서 CSS 출력을 어떻게 적용하나요?

CSS 출력은 `--h1: 2.618rem` 형식의 커스텀 속성을 사용합니다. 이를 `:root {}` 블록에 붙여넣은 다음 제목 스타일에 `font-size: var(--h1)`을 사용하세요. 유틸리티 우선 접근 방식을 선호한다면 숫자 rem 값으로 Tailwind의 `fontSize` 설정을 확장하면 됩니다.

비율이 높을수록 항상 더 좋은 타이포그래피가 되나요?

아니요. 황금비(1.618) 같은 높은 비율은 에디토리얼이나 마케팅 페이지에 잘 어울리는 극적인 크기 차이를 만들지만, UI 중심 애플리케이션에서는 과도하게 느껴질 수 있습니다. 최선의 비율은 콘텐츠 밀도, 화면 크기, 브랜드 개성에 따라 다릅니다. 완전4도(1.333)는 대부분의 웹 제품에 안전하고 다용도로 사용할 수 있는 기본값으로 여겨집니다.