타입 스케일
디자인을 위한 모듈식 타입 스케일을 생성하세요. 기본 크기와 비율을 선택하여 완벽한 비율의 제목 크기를 만드세요.
px
Scale PreviewPreview capped at 72px - CSS below ↓
h1
-
The quick brown fox
h2
-
The quick brown fox
h3
-
The quick brown fox
h4
-
The quick brown fox
h5
-
The quick brown fox
h6
-
The quick brown fox
body
-
The quick brown fox
small
-
The quick brown fox
Generated CSS
모듈식 타입 스케일이란?
모듈식 타입 스케일은 Major Third(1.25x)나 Perfect Fourth(1.333x)와 같은 일관된 수학적 비율을 따르는 글꼴 크기 세트입니다. h1부터 h6까지 각 레벨이 아래 레벨보다 비례적으로 크며, 조화롭고 시각적으로 균형 잡힌 타이포그래피를 만들어냅니다.
올바른 비율 선택 방법
Minor Second(1.067)와 같은 작은 비율은 밀도 있는 UI에 적합한 컴팩트한 스케일을 만듭니다. Perfect Fourth(1.333)나 황금비(1.618)와 같은 큰 비율은 편집 사이트에 적합한 극적인 대비를 만듭니다. Major Third(1.25)는 대부분의 화면 크기에 적합한 안전한 기본값입니다.
생성된 CSS 사용하기
CSS 패널은 :root의 CSS 사용자 지정 속성(예: --text-h1)과 각 제목 레벨의 직접 선택자를 출력합니다. 스타일시트에 복사하여 붙여넣기만 하면 됩니다. 사용자의 브라우저 폰트 설정에 맞게 확장되는 접근 가능한 크기를 위해 rem을, 고정 크기를 위해 px를 사용하세요.
타입 스케일과 접근성
px 대신 rem을 사용하면 타이포그래피가 사용자의 시스템 글꼴 크기 설정에 맞게 조정되어 중요한 접근성 요소가 됩니다. WCAG는 텍스트를 200%까지 크기 조절할 수 있도록 권장합니다. rem과 결합된 모듈식 스케일은 자동으로 이 요구 사항을 충족합니다.