타이포 스케일 생성

사용 방법

1. 1

   기준 크기를 정합니다

   본문 글자 크기이고 거의 항상 16px입니다. 나머지는 전부 여기에 비율을 곱하거나 나눈 값이므로, 이것부터 맞춰 두면 나중에 비율을 다시 고르는 일이 줄어듭니다.

2. 2

   비율을 고릅니다. 이것이 결정입니다

   장2도(1.125)가 무난한 인터페이스 기본값입니다. 여덟 단계를 잡아도 쓸 만한 범위에 들어옵니다. 완전4도(1.333)는 편집 디자인 쪽이라 16px에서 세 단계만 올라가도 벌써 38px입니다. 황금비는 유명하지만 본문 글자에는 너무 가파릅니다. 프리셋마다 용도가 적혀 있으니 이름이 아니라 필요한 범위로 고르세요.

3. 3

   단계 수와 반올림 여부를 정합니다

   아래 단계는 캡션과 라벨용, 위 단계는 제목용입니다. "그대로"는 기하학적 값을 지켜 소수점 픽셀을 주고, 1px이나 2px 반올림은 사람이 외울 수 있는 숫자를 주는 대신 비율을 조금 깹니다. 보통은 반올림을 고르고, 반올림한 값 옆에 원래 값도 계속 보여 줍니다.

4. 4

   열 너비를 정하고 글자 수를 봅니다

   이 글이 실제로 놓일 열의 너비를 넣으세요. 각 줄 오른쪽 끝 숫자가 그 너비에서 한 줄에 들어가는 글자 수이고, 45에서 75 사이면 초록으로 바뀝니다. 이어지는 본문에 대해 실제 근거가 있는 범위입니다. 따로 보면 괜찮은데 한 줄에 110자가 들어가는 크기는 본문 글자 크기로는 틀린 것입니다.

5. 5

   토큰을 내보냅니다

   CSS 변수, Tailwind 테마 블록, SCSS, JSON 중에서 고르면 됩니다. 간격 스케일도 함께 나가므로 한 번 붙여넣으면 둘 다 들어갑니다.

자주 묻는 질문

이 도구로 이어지는 것

다음 단계

이 도구의 결과를 그대로 받을 수 있는 도구들입니다.