타이포그래피

WCAG는 한 줄을 80자 이하로, 문단 안 줄 간격을 최소 1.5로 권합니다. CSS 속성 두 개면 둘 다 맞출 수 있습니다.

글꼴 고르기

font-family에는 쉼표로 나눈 글꼴 목록을 씁니다. 브라우저는 읽는 사람의 기기에 있는 첫 글꼴을 쓰고, 없으면 다음 글꼴로 넘어갑니다. 목록 끝에는 항상 serif, sans-serif, monospace, system-ui 같은 일반 글꼴 계열을 넣어, 무엇이 설치되어 있든 알맞은 글꼴이 나오게 합니다. "Noto Sans KR"처럼 빈칸이 든 글꼴 이름은 따옴표로 감쌉니다. system-ui는 운영 체제의 화면 글꼴을 쓰므로 잘 다듬어져 있고, 이미 기기에 있으며, 여러 문자 체계를 지원합니다.

body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;          /* 16px unless the reader changed it */
  line-height: 1.6;         /* unitless: 1.6 times the font size */
  color: #222;
}
h1 { font-size: 2rem; font-weight: 700; line-height: 1.2; }
p  { max-width: 65ch; }     /* keeps lines a readable length */
.label { text-transform: uppercase; letter-spacing: 0.08em; }

@font-face 규칙으로 내 서버에 있는 글꼴 파일을 불러오거나 글꼴 서비스에서 받아 쓸 수도 있습니다. 웹 글꼴은 페이지에 개성을 주지만, 글꼴마다 내려받아야 하므로 글자가 늦게 뜨고, 한국어·중국어·일본어 글꼴은 글자가 수천 개라 몇 메가바이트가 되기도 합니다. 필요한 굵기만 불러오고, 목록에 좋은 대체 글꼴을 남겨 두세요.

크기, 굵기, 줄 간격

font-size는 크기를 정합니다. 색과 단위 단원에서 본 것처럼 rem을 쓰면 읽는 사람의 설정을 따라갑니다. font-weight는 100(가장 가느다람)에서 900(가장 굵음)까지이고, 400이 보통, 700이 굵은 글씨입니다. 키워드 normal과 bold는 각각 400과 700입니다. 글꼴에는 디자이너가 만든 굵기만 있어서, 400과 700만 있는 글꼴에 300을 요청하면 가장 가까운 굵기가 나옵니다.

line-height는 줄 사이 간격을 정합니다. 1.6처럼 단위 없는 숫자를 주면 요소마다 자기 글자 크기의 1.6배가 되므로, 제목과 작은 글씨가 각각 알맞은 간격을 갖습니다. 24px처럼 단위가 있는 값은 한 번 계산된 뒤 고정 길이로 상속되어 큰 제목에서는 너무 빡빡해집니다. 본문은 보통 1.4에서 1.7 사이가 읽기 좋고, WCAG 성공 기준 1.4.8은 문단 안에서 최소 1.5를 권합니다. 큰 제목은 1.1에서 1.3 정도로 좁히는 편이 보기 좋습니다.

줄 길이와 정렬

줄이 너무 길면 눈이 다음 줄 처음으로 돌아갈 때 자리를 잃기 쉬워서 쉽게 지칩니다. WCAG 1.4.8은 한 줄에 80자(중국어·일본어·한국어는 40자) 이하를 권합니다. 문단에 ch 단위의 max-width를 주면 간단히 지킬 수 있습니다. 예를 들면 max-width: 65ch입니다. text-align은 정렬을 정합니다. 왼쪽에서 오른쪽으로 쓰는 언어의 긴 글은 left(또는 start)가 가장 읽기 쉽고, center는 짧은 제목에 어울리며, justify는 낱말 사이에 고르지 않은 틈을 만들 수 있습니다.

마무리 손질

text-transform: uppercase는 HTML을 바꾸지 않고 글자를 대문자로 보여 줍니다. 그래서 원문 철자는 그대로이고, 나중에 한 곳에서 스타일만 바꾸면 됩니다. MDN은 대문자가 길게 이어지면 난독증이 있는 사람을 비롯해 일부 독자가 읽기 어려워한다고 적고 있으므로 짧은 이름표에만 쓰고, 0.08em 정도의 letter-spacing을 조금 더합니다. text-decoration은 선을 그립니다. underline, line-through, 링크 밑줄을 없애는 none이 있습니다(링크라는 다른 표시는 남겨 두세요). 간격이 더 필요한 독자는 내 설정을 덮어쓸 수 있습니다. WCAG 1.4.12는 줄 간격 1.5, 글자 간격 0.12em, 낱말 간격 0.16em, 문단 간격 2em일 때도 페이지가 제대로 보여야 한다고 하므로, 높이를 고정해 글자가 잘리는 상자는 피합니다.