타입 스케일 생성기

타입 스케일은 하나의 기본 크기에 같은 비율을 거듭 곱해 얻은 글꼴 크기의 모음입니다. 음악에서 음정이 음을 서로 이어 주는 것과 같습니다. 그러면 제목, 본문, 캡션이 제각각이 아니라 서로 어울려 보입니다. 이 생성기는 기본 크기와 은은한 단2도부터 극적인 황금비까지 고전적인 비율로 스케일을 만들고, 모든 단계를 px와 rem, 권장 용도와 함께 나열하며, CSS 사용자 지정 속성과 제목 규칙을 작성하고, 작은 화면과 큰 화면 사이에서 각 단계를 clamp()로 유동적으로 만들 수도 있습니다.

사용 방법

1. 기본(본문) 글꼴 크기를 입력합니다. 보통 16 px입니다.
2. 비율을 고릅니다. 글이 많은 페이지와 앱에는 1.125–1.25, 대담한 에디토리얼이나 마케팅 페이지에는 1.333–1.618이 어울립니다.
3. 위로 몇 단계, 아래로 몇 단계가 필요한지와 반올림 방식을 고릅니다.
4. 필요하면 유동을 체크하고 휴대폰용으로 더 작은 기본 크기와 비율을 정한 뒤, CSS 변수와 제목 규칙을 복사합니다.

계산식

size(n) = base × ratioⁿ · rem = px ÷ root size · fluid: clamp(small, intercept + slope × 100vw, large)

n은 단계입니다. 0이 기본 크기이고, 양수는 더 크게, 음수는 더 작게 갑니다. 유동을 켜면 각 단계에 작은 기본 크기와 비율에서 나온 작은 화면 크기, 주된 값에서 나온 큰 화면 크기가 생기며, 기울기 = (큰 값 − 작은 값) ÷ (큰 화면 너비 − 작은 화면 너비)입니다.

예시

기본 16 px과 장3도(1.25) 비율이면 단계는 12.8, 16, 20, 25, 31.25 px이고, rem으로는 0.8, 1, 1.25, 1.5625, 1.9531입니다. h1은 위로 세 단계인 31.25 px을 받습니다. 황금비는 훨씬 빠르게 커져서 16, 25.89, 41.89 px가 되고, 정수 픽셀로 반올림하면 26 px과 42 px입니다.