웹 타이포그래피: 가독성, 글줄 길이, 웹폰트

사람은 화면의 글을 어떻게 읽나

서식 단서가 적은 글을 훑을 때 시선은 흔히 F자 패턴을 그린다(제목·굵은 글씨·목록 같은 단서가 많으면 다른 패턴이 나온다). 눈은 단어를 하나씩 읽지 않는다. 중심시(foveal vision)로 몇 글자에 초점을 맞추고, 주변시(peripheral vision)로 다음 지점을 찾아 도약(saccade)한다. 한 줄을 가로로 읽으면서 다음 줄의 시작을 예측하고, 지치면 왼쪽 가장자리를 따라 세로로 훑는다. 가로 이동과 세로 이동의 줄다리기가 F자를 만든다. 그래서 왼쪽 정렬이 기본이다. 줄 시작점이 일정해야 눈이 돌아올 곳을 찾는다.

세 변수의 균형: 글줄 길이, 글자 크기, 줄 간격

글줄 길이

줄이 너무 길면 줄 끝에서 다음 줄 시작을 찾다가 같은 줄을 다시 읽는다(doubling). 너무 짧으면 함께 읽혀야 할 구절이 끊긴다. ch는 숫자 0의 너비라 한글처럼 넓은 글자는 같은 ch 값에 더 적게 들어간다. 언어마다 실제 글자 수를 확인해 값을 조정한다.

글자 크기가 글줄 길이보다 먼저다

이상적인 글줄 길이를 지키려고 글자 크기를 희생하지 않는다.

글자가 지나치게 크면 한 번의 도약에 들어오는 단어가 줄어 읽기가 느려지고, 독자는 가로 읽기를 포기하고 세로로 훑기 시작한다. 반응형 브레이크포인트를 정할 때 글줄 길이는 좋은 출발점이지만, 결정은 실제 기기를 가까이 들고 확인해서 내린다(반응형 디자인과 다국어 타이포그래피).

줄 간격

• 출발점은 글자 크기의 약 1.5배다. 브라우저 기본값 normal은 글꼴에 따라 1.2 안팎이라 본문에는 좁다.
• 너무 좁으면 가로 흐름이 약해져 같은 줄을 다시 읽고, 너무 넓으면 줄들이 각각 떠다녀 한 덩어리로 읽히지 않는다.
• 글자가 작을수록 줄 간격은 오히려 넓힌다. 작은 단어 형태를 알아보기 쉬워진다.
• 제목처럼 큰 글자는 줄 간격 비율을 줄인다.
• line-height는 단위 없는 값(1.5)으로 쓴다. 자식이 자기 글자 크기에 맞춰 다시 계산한다.

.prose {
  font-size: 1rem;              /* 사용자 브라우저 설정을 존중 */
  line-height: 1.5;
  max-inline-size: 65ch;
  margin-inline: auto;
}
.prose h1, .prose h2 { line-height: 1.2; text-wrap: balance; }
.prose p { text-wrap: pretty; }   /* 마지막 줄 외톨이 단어 방지 */

text-wrap: balance(제목 줄 길이 고르기)는 Baseline 2024다. pretty는 Chrome 130·Safari 26부터 지원하고 Firefox는 2026년 10월 기준 지원하지 않는다. 모르는 브라우저는 기본 줄바꿈으로 돌아가므로 점진적 향상으로 그냥 써도 된다.

글꼴 지표를 다루는 CSS

letter-spacing은 모든 글자 사이에 같은 값을 더해 글꼴 고유의 간격 리듬을 깰 수 있다. 가변 폰트는 디자이너가 축(axis)으로 설계한 범위 안에서 조절해 더 자연스럽다. 폰트 지표를 임의로 비트는 것은 피한다.

양쪽 정렬과 하이픈

양쪽 정렬(text-align: justify)을 하이픈 없이 쓰면 단어 사이에 큰 구멍(rivers)이 생겨 읽기를 방해한다. 하이픈을 쓰는 언어라면 hyphens: auto와 문서의 lang 속성을 함께 쓴다. 수동으로 끊을 위치는 소프트 하이픈(­)으로 표시한다. 한국어 본문은 word-break: keep-all로 단어 중간 줄바꿈을 막는 것이 먼저다.

대비와 테마

• 글자와 배경의 대비는 가독성의 기본이다. WCAG AA 기준으로 본문은 4.5:1 이상이다. 자동 검사 도구는 참고용이고, 실제 화면에서도 확인한다.
• 사용자 선호를 따르려면 prefers-color-scheme(다크 모드), prefers-contrast를 쓴다. 세피아·밝은 회색·야간 모드 같은 읽기 테마는 커스텀 속성으로 색 몇 개만 바꿔 만든다(CSS 커스텀 속성으로 색상 체계 짜기).

웹폰트 선언하기: @font-face

@font-face {
  font-family: "Elena";
  src: url("elena-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Elena";            /* 같은 패밀리 이름 */
  src: url("elena-bold.woff2") format("woff2");
  font-weight: 700;
}
body { font-family: "Elena", Georgia, serif; }   /* 폴백을 반드시 둔다 */

과거에는 IE8용 EOT, 구형 iOS용 SVG 폰트까지 나열하는 "방탄 @font-face 구문"을 썼다. 지금은 WOFF2만으로 충분하다. 웹폰트 로딩 성능은 웹 성능 지표와 Lighthouse의 LCP·CLS와 직결된다.

텍스트 속성 빠른 참조

글꼴 고르기와 굵기

• font-family는 쉼표 목록이다. 브라우저는 목록을 글자 하나하나마다 앞에서부터 찾는다. 첫 글꼴에 한글이 없으면 한글만 다음 글꼴로 그린다.
• 목록 끝에는 일반 글꼴군(serif, sans-serif, monospace, system-ui, cursive, fantasy 등)을 둔다. 원하는 글꼴과 비슷한 군을 고른다. 특정 글꼴 이름은 따옴표로 감싼다.
• @font-face는 글꼴을 선언하고 이름을 붙이는 규칙이고, font-family는 그 이름을 요소에 적용하는 속성이다. @font-face는 선택자 블록 안에 쓸 수 없지만 조건부 그룹 규칙(@supports 등) 안에는 쓸 수 있다. 다른 출처의 글꼴 파일은 CORS 허용이 필요하다.
• font-weight: normal = 400, bold = 700. lighter·bolder는 부모 기준 상대값이다. 가변 글꼴이 아니면 100 단위 값만 의미가 있고, 대부분 글꼴은 400과 700만 가진다. 321 같은 값은 가변 글꼴에서만 된다.
• font-style: italic은 따로 설계된 이탤릭 서체, oblique는 정체를 기울인 것이다.
• font-size 키워드: 절대 xx-small~xx-large, 상대 smaller·larger(부모 기준).
• font 축약형은 font-style, font-variant, font-weight, font-stretch, font-size/line-height, font-family를 한 줄에 쓴다. 크기와 글꼴군은 필수이고, 빠진 하위 속성은 초깃값으로 돌아간다.
• font-variant는 font-variant-caps(작은 대문자), -numeric(tabular-nums 고정폭 숫자, slashed-zero), -ligatures, -east-asian, -alternates의 축약형이다. 표의 숫자 열에는 tabular-nums를 준다.

꾸밈과 변형

공백과 줄바꿈

방향과 쓰기 모드

• direction: rtl보다 HTML dir="rtl" 속성을 쓴다. 방향은 문서 내용의 의미라 CSS가 없어도 유지돼야 한다.
• writing-mode(horizontal-tb, vertical-rl, vertical-lr)와 세로쓰기 때 글자를 세울지 정하는 text-orientation(mixed, upright)은 쓰기 모드와 논리적 속성에 있다.
• 첫 글자·첫 줄·선택 영역은 ::first-letter, ::first-line, ::selection으로 꾸민다(가상 요소).

정리

• 글자 크기를 먼저 편하게 정하고, 글줄 길이는 단의 너비로 맞춘다. 본문은 max-inline-size: 65ch 안팎.
• 줄 간격은 1.5에서 출발하고, 작은 글자일수록 넓힌다.
• 폴백과 웹폰트의 크기 차이는 font-size-adjust와 지표 보정으로 줄인다.
• 하이픈 없는 양쪽 정렬은 피한다. 대비는 4.5:1 이상.
• 웹폰트는 WOFF2 + format() 힌트 + 폴백 글꼴 + font-display.
• 규칙보다 실제 기기에서 읽어 보는 것이 우선이다.

관련 노트: 반응형 디자인과 다국어 타이포그래피, 접근성을 위한 CSS와 타이포그래피, CSS 커스텀 속성으로 색상 체계 짜기, 쓰기 모드와 논리적 속성, 웹 성능 지표와 Lighthouse, 웹 폰트 성능 최적화, line-height와 vertical-align