한글 타입 스케일 생성기
제목부터 본문까지, 글자 크기를 감으로 정하지 않고 하나의 비율로 정리하는 도구입니다. 분위기를 고르고, 아카이브 실폰트로 미리본 뒤, 한글 기본값(행간·word-break)이 반영된 CSS를 그대로 복사하세요.
아카이브 98종 전부 상업용 무료(검증)입니다. 프리텐다드 라이선스 보기
읽는 글의 기본 크기입니다. 웹 표준은 16px — 헷갈리면 그대로 두세요.
단계가 올라갈 때마다 글자가 몇 배씩 커질지 정합니다. 숫자가 클수록 제목이 극적으로 커집니다.
페이지 제목(h1)부터 작은 소제목까지의 단계 수입니다. 보통 4~5단계면 충분합니다.
줄과 줄 사이의 여유입니다. 한글은 라틴 글자보다 넉넉한 1.6 전후가 읽기 편합니다.
왼쪽으로 갈수록 좁아집니다. 한글 제목은 살짝 좁히면 더 단단해 보입니다.
대비는 WCAG 공식으로 그 자리에서 계산합니다. 본문 기준 4.5:1(AA) 이상을 권장합니다.
결과 CSS
프로젝트 스타일시트에 그대로 붙여넣으면 됩니다. 선택한 폰트와 한글 줄바꿈 설정(word-break)까지 포함되어 있습니다.
:root{
--fs-h1: 2.488rem; /* 39.81px */
--fs-h2: 2.074rem; /* 33.18px */
--fs-h3: 1.728rem; /* 27.65px */
--fs-h4: 1.44rem; /* 23.04px */
--fs-h5: 1.2rem; /* 19.2px */
--fs-body: 1rem; /* 16px */
--fs-caption: 0.833rem; /* 13.33px */
--lh-body: 1.65;
--lh-heading: 1.35;
--ls-heading: -0.02em;
--color-text: #1a1a1a;
--color-bg: #faf8f4; /* 대비 16.41:1 (AA 통과) */
}
body{
font-family: "Pretendard Variable", "Pretendard Variable", sans-serif; /* 프리텐다드 — designnews 검증 상업용 무료 */
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-text);
background: var(--color-bg);
word-break: keep-all; /* 한글 어절 단위 줄바꿈 */
overflow-wrap: break-word;
}
h1,h2,h3{
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
}왜 비율로 정하나요
페이지마다 제목 크기를 따로 정하면 화면 사이의 위계가 흔들립니다. 기준 크기에 일정한 배율을 곱해 단계를 만들면 어떤 화면에서도 같은 리듬이 유지되고, 나중에 기준 하나만 바꿔도 전체가 함께 움직입니다.
한글 기본값이 따로 필요한 이유
한글은 라틴 글자보다 글자 속이 촘촘해 행간을 더 넉넉히 잡는 편이 읽기 좋고, 어절 단위 줄바꿈을 위해 word-break: keep-all이 필요합니다. 이 도구의 결과 CSS에는 두 가지가 기본으로 들어갑니다. 색을 고르면 글자·배경 대비를 WCAG 공식으로 그 자리에서 계산해 본문 기준(4.5:1) 충족 여부를 알려줍니다. 더 정밀한 색 검증은 색 대비 검사기에서, 여러 폰트를 한 화면에서 비교하려면 타입 테스터를 함께 쓰세요.