타이포그래피 스케일 (글자 크기 체계)

기준 글자 크기 하나와 비율 하나로 제목·본문·캡션의 글자 크기를 한 묶음으로 만듭니다. 크기를 하나씩 정하지 않아도 서로 어울리는 체계가 나오므로, 웹사이트나 앱 화면, 문서 서식을 새로 시작할 때 씁니다.

사용 방법

1. '기준 글자 크기'에 본문 크기를 px로 넣고(웹은 16이 흔합니다) '비율'을 고릅니다. '직접 입력'을 고르면 1.05~2 사이 값을 넣을 수 있습니다.
2. '반올림'에서 소수점을 유지할지, 정수 px로 할지, '4px 격자'에 맞출지 정합니다.
3. '줄 간격'을 정합니다. '제목은 좁게'는 큰 글자일수록 '본문 줄 간격'에서 '제목 줄 간격'으로 줄어들고, '모두 같게'는 한 배수를 씁니다.
4. '미리보기 문장'에 원하는 글을 넣고 '미리보기 글꼴'을 바꿔 가며 각 단계를 실제 크기로 봅니다.
5. 'CSS 변수 복사', '요소 CSS 복사', 'JSON 복사'로 프로젝트에 가져갑니다.

계산 방식과 참고

• n단계 크기 = 기준 크기 × 비율의 n제곱입니다. 단계는 −2(xs)부터 +6(5xl)까지이며, 0단계가 본문(p), 1~6단계가 h6부터 h1까지입니다.
• rem은 기준 크기를 1로 본 값이고, pt는 px × 0.75입니다(화면 기준 1인치 = 96px).
• '제목은 좁게'를 고르면 배수가 기준 크기에서는 본문 값, 기준 크기의 3배에서는 제목 값이 되도록 직선으로 줄어들고 그 뒤로는 제목 값을 유지합니다. '4px 격자'를 고르면 줄 높이도 4px의 배수로 맞춥니다.
• 설정은 이 브라우저에 저장되어 다음에 열어도 같은 체계가 보입니다.

자주 묻는 질문

웹사이트에는 어떤 비율이 좋은가요?

1.2(단3도)와 1.25(장3도)는 긴 글에 어울리는 적당한 제목 크기가 나오고, 1.333 이상은 포스터처럼 큰 제목이 됩니다. 작은 화면에서는 보통 작은 비율이 보기 좋습니다.

본문 글자 크기는 몇 px이 적당한가요?

16px이 브라우저 기본값이자 흔한 출발점이고, 긴 글은 17~18px도 많이 씁니다. 원하는 값을 기준 크기에 넣으면 나머지 단계가 따라옵니다.

px을 rem으로 바꾸려면 어떻게 하나요?

표에 px 옆에 rem이 함께 나옵니다. rem은 px을 기준 크기로 나눈 값입니다. 복사한 요소 CSS처럼 html에 기준 크기를 px로 지정하면 1rem이 기준 크기와 같아집니다.

제목 줄 간격은 얼마로 해야 하나요?

본문은 1.5 전후, 큰 제목은 1.1~1.25 정도를 많이 씁니다. 제목이 두 줄로 넘어갈 때 줄 사이가 너무 벌어지지 않게 하기 위해서입니다. 자동 모드가 이 변화를 대신 적용합니다.