웹 타이포그래피은(는) 무엇을 하나요?

화면을 위한 타이포그래피를 설정하는 것입니다. 목표는 식별 가능하고(글자를 구분할 수 있는지), 읽기 쉬우며(장시간 읽기에 편안한지), 계층 구조가 명확한(눈이 어디로 가야 하는지 아는) 텍스트입니다. 이는 모든 뷰포트, 확대 수준, 실제 사용자의 글꼴 기본 설정에서도 마찬가지입니다.

이 스킬은 가장 중요한 소수의 결정을, 내려야 할 순서대로 인코딩합니다. 상향식으로 작업하세요: 멋진 기능을 사용하기 전에 시스템(스케일, 측정, 리듬)을 올바르게 잡으세요. 웹에서 '나쁜 타이포그래피'의 대부분은 누락된 OpenType 플래그 때문이 아니라, 본문 크기가 너무 작고, 줄 길이가 너무 길며, 줄 간격이 너무 좁고, 로드될 때 레이아웃을 이동시키는 글꼴 때문입니다.

출처 — 원칙, 재산이 아님

이 스킬은 널리 가르쳐지는 타이포그래피 원칙의 독립적인 종합이며, 누군가의 글, 예제 또는 디자인을 복제한 것이 아닙니다. 아이디어는 그 계보에 따라 귀속됩니다(예: Bringhurst의 측정, Lupton의 Letter→Text→Grid, Tim Brown의 모듈러 스케일). 아이디어에 출처를 밝히는 것은 학문이지만, 여기서의 표현과 웹 번역은 이 스킬 고유의 것입니다. 이 스킬을 적용하거나 확장할 때도 동일하게 하세요: 원칙을 자신의 말로 표현하고, 자연스러운 경우 아이디어의 출처를 밝히며, 출처의 산문, 샘플 레이아웃 또는 독점 콘텐츠를 절대 복사하지 마세요. 공유된 지식은 여러분이 사용할 수 있는 것이지만, 개인의 표현은 그렇지 않습니다.

결정 순서

다음 결정을 순서대로 내리세요. 각 결정은 다음 결정을 제한합니다.

글꼴 선택 — 브랜드에 웹 글꼴이 필요한 경우가 아니면 빠르고 좋은 시스템 스택을 기본값으로 사용하세요. 웹 글꼴을 로드하는 경우 동시에 로딩 계획(6단계)을 세우세요.
기본 크기 및 측정 — 본문 텍스트 ≥ 1rem (16px), 줄 길이 45–75자(max-width: ~66ch). 이 두 가지가 다른 어떤 것보다 가독성에 더 큰 영향을 미칩니다.
타입 스케일 — 하나의 모듈러 비율을 선택하고 모든 크기를 그로부터 파생시키세요. clamp()를 사용하여 유동적으로 만드세요. 임의의 px 값을 수동으로 선택하지 마세요.
세로 리듬 — 본문은 줄 간격 ~1.5, 큰 제목은 더 좁게(1.1–1.3). 단락 사이는 간격을 두거나 들여쓰기를 하되, 둘 다 하지 마세요.
계층 구조 및 다듬기 — 굵기/크기/간격 대비, 제목에는 text-wrap: balance 및 본문에는 pretty, 대문자 및 디스플레이 텍스트의 자간, OpenType 기능.
로딩 및 성능 — font-display, 중요한 글꼴 하나를 미리 로드, WOFF2 자체 호스팅, 그리고 대체 글꼴을 메트릭 일치시켜 페이지가 이동하는 것을 방지(CLS).
접근성 검사 — 대비, 200% 확대, WCAG 1.4.12 텍스트 간격 재정의, 확대 비활성화 금지, 본문 정렬 금지.

비타협 규칙 (일반적인 실패를 방지하는 규칙)

다시 반복해서 나타나는 실수들입니다. 이유를 내재화하여 새로운 상황에서도 적용할 수 있도록 하고, 단순히 복사하지 마세요.

본문 텍스트는 rem으로 크기를 정하고, 절대 px를 사용하지 마세요. rem은 사용자의 브라우저 글꼴 크기 설정을 존중하지만, px는 접근성 기본 설정을 자동으로 무시합니다. px는 가는 테두리와 진정으로 고정된 물리적 세부 사항에만 사용하세요.
줄 간격은 단위 없이 설정하세요. line-height: 1.5는 비율로 상속되므로 각 요소가 자신의 크기에서 다시 계산합니다. 고정된 line-height: 24px는 계산된 픽셀 값을 상속하고 크기가 다른 하위 요소에서 깨집니다.
절대 순수 vw로 글꼴 크기를 정하지 마세요. 뷰포트 단위는 확대나 사용자 글꼴 크기에 반응하지 않습니다. 이는 WCAG 1.4.4를 위반합니다. 항상 유동적 크기 조정을 clamp()에 rem 항목과 함께 감싸세요: clamp(2rem, 1rem + 3vw, 4rem). rem은 확대가 계속 작동하도록 합니다.
측정을 제한하세요. ~75자보다 긴 줄은 눈이 다음 줄로 돌아갈 때 위치를 잃게 만듭니다. ~45자보다 짧으면 뚝뚝 끊깁니다. 텍스트 컨테이너에 max-width: 66ch를 적용하는 것은 단일 지렛대 효과가 가장 큰 가독성 수정입니다.
웹에서 본문 텍스트를 절대 양쪽 정렬하지 마세요. 정교한 하이픈 넣기 없이 CSS 양쪽 정렬은 공백의 '강'을 만듭니다. 왼쪽 정렬, 오른쪽은 거칠게 남겨두세요.
웹 글꼴은 로드될 때 레이아웃을 이동시키지 않아야 합니다. font-display를 메트릭 일치 대체 글꼴(size-adjust + ascent/descent/line-gap-override)과 쌍으로 사용하여 실제 글꼴을 바꿀 때 리플로우가 전혀 발생하지 않도록 하세요. 이것이 글꼴 기반 CLS를 수정하는 방법입니다.

빠른 시작 CSS

거의 모든 프로젝트에 바로 적용할 수 있는 합리적이고 접근 가능한 기준선입니다. 시스템 글꼴 스택(다운로드 없음)과 유동적 스케일을 사용합니다. 비율과 글꼴을 요구 사항에 맞게 조정하세요.

:root {
  /* 글꼴 — 기본 시스템 스택 (즉시, CLS 없음, 기본 느낌) */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
               "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* 유동적 타입 스케일 (≈ 데스크탑에서 장3도 1.25). 실제 프로젝트는 Utopia.fyi로 생성하세요 */
  --step--1: clamp(0.833rem, 0.80rem + 0.17vw, 0.9rem);
  --step-0:  clamp(1rem,    0.95rem + 0.25vw, 1.125rem);   /* 본문 */
  --step-1:  clamp(1.25rem, 1.15rem + 0.50vw, 1.5rem);
  --step-2:  clamp(1.563rem,1.40rem + 0.80vw, 1.953rem);
  --step-3:  clamp(1.953rem,1.70rem + 1.25vw, 2.441rem);
  --step-4:  clamp(2.441rem,2.00rem + 2.00vw, 3.052rem);

  --measure: 66ch;
}

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.5;
  font-synthesis: none;            /* 굵게/기울임꼴 가짜 생성 금지 */
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { line-height: 1.15; text-wrap: balance; }   /* 좁고 균일한 줄 길이 */
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p, li, blockquote { max-width: var(--measure); text-wrap: pretty; }  /* 측정 + 홀수 금지 */
p + p { margin-block-start: 1em; }                                   /* 간격, 들여쓰기 금지 */

:is(h1, h2, h3, h4) + * { margin-block-start: 0.5em; }

/* 데이터/숫자를 열로 정렬 */
table, .tabular-nums { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

더 완전하고 주석이 포함된 스타터(메트릭 일치 웹 글꼴 예제 포함)는 assets/starter.css에 있습니다. 프로젝트의 타입을 처음부터 구성할 때 읽으세요.

참조 파일 — 필요한 것을 읽으세요

이 파일을 컨텍스트에 유지하고, 작업이 필요할 때 참조 파일을 가져오세요.

references/decision-records.md — 이 분야의 추론을 요약: 다섯 가지 메타 패턴(타이포그래퍼가 생각하는 방식)과 각 규칙을 그 근거 및 거부된 대안에 연결하는 ADR 스타일의 결정 기록. 다른 파일이 직접 다루지 않는 새로운 판단에 직면했을 때 읽으세요 — 메타 패턴을 사용하면 전문가처럼 올바른 답을 도출할 수 있습니다. 또한 '원칙, 재산이 아님' 경계의 본거지입니다.
references/foundations.md — 고전적 원칙(Lupton의 Letter / Text / Grid, Bringhurst, Butterick)을 웹으로 번역: 구조, 측정, 계층 구조, 쌍 구성, 정렬. 글꼴을 선택하거나 쌍을 구성할 때, 또는 레이아웃이 '이상하게 느껴지지만' 명확히 깨진 규칙이 없을 때 읽으세요.
references/fluid-scale.md — clamp()를 사용한 유동적 타입, clamp() 수학, 모듈러 스케일 비율, Utopia, 컨테이너 쿼리 단위(cqi)를 사용한 컴포넌트 수준 타입. 타입 스케일을 구축하거나 조정할 때, 또는 타입이 뷰포트 대신 컨테이너에 반응하도록 만들 때 읽으세요.
references/font-loading.md — 웹 글꼴 성능: font-display, 미리 로드, 자체 호스팅 vs Google Fonts(GDPR), WOFF2, 서브세팅, unicode-range, 가변 글꼴, 그리고 메트릭 일치 대체 글꼴로 CLS 제거(size-adjust, *-override, Fontaine, next/font). 프로젝트가 사용자 정의 웹 글꼴을 로드하거나 레이아웃 이동/느린 텍스트 문제가 있을 때마다 읽으세요.
references/accessibility.md — 텍스트를 위한 WCAG 2.2: 대비 비율, 200%로 크기 조정(1.4.4), 텍스트 간격 재정의(1.4.12), 확대, 난독증/가독성, 동작 감소. 타입 작업이 완료되었다고 주장하기 전, 그리고 작업이 접근성, a11y, 대비 또는 준수를 언급할 때마다 읽으세요.
references/modern-css.md — 브라우저 지원 상태를 포함한 현재 CSS 타입 기능: text-wrap: balance/pretty, OpenType(font-variant-*, font-feature-settings), text-box-trim/text-box-edge, hanging-punctuation, initial-letter, 글꼴 상대 단위(lh, cap, ch, ic), line-clamp, 색조를 위한 color-mix. 다듬기 기능을 사용할 때, 그리고 어떤 것이 점진적 향상이 필요한지 확인하기 위해 읽으세요.

전달 방법

타입을 변경할 때, 코드뿐만 아니라 결정을 설명하세요 — "본문을 1.125rem으로 높이고 측정을 66ch로 제한하여 줄이 120자가 넘지 않도록 했습니다." 타이포그래피는 느낌으로 판단됩니다. 사용자에게 무엇을 볼지 알려주세요.
기존의 평행한 스케일을 발명하기보다는 프로젝트의 기존 토큰/스케일을 편집하는 것을 선호하세요. 프로젝트가 Tailwind를 사용하는 경우, 임의의 값을 흩뿌리기보다는 theme.fontSize / CSS 변수에 스케일을 설정하세요.
브라우저 지원에 민감한 기능(modern-css.md에 표시됨)은 점진적 향상으로 추가하세요 — 기능이 없어도 페이지가 올바르게 읽혀야 합니다.
사소하지 않은 변경 후에는 완료를 선언하기 전에 접근성 검사(references/accessibility.md)를 수행하세요. 대비와 레이아웃이 200% 확대 및 텍스트 간격 재정의에서도 유지되는지 확인하세요.

웹 타이포그래피