글자 크기를 잘 잡아도 줄 사이가 답답하거나 글자가 서로 붙으면 읽기가 힘듭니다. 행간과 자간, 그리고 한 줄 길이는 크기만큼이나 가독성을 좌우합니다. 아래 예제는 그대로 확인할 수 있습니다.
56.1 행간은 단위 없는 숫자로
line-height는 단위 없이 숫자로 주는 것이 정석입니다. 글자 크기가 바뀌어도 그 배수로 따라오기 때문입니다.
/* 나쁜 예: 고정 픽셀 */
body { font-size: 16px; line-height: 24px; }
/* 좋은 예: 배수 */
body { font-size: 16px; line-height: 1.6; }
픽셀로 고정하면 큰 제목에서 줄 간격이 그대로라 답답해집니다. 1.6 같은 배수는 크기에 비례해 늘어나니 어느 크기에서도 알맞습니다.
56.2 본문과 제목의 행간은 다르다
긴 본문은 줄 사이가 넉넉해야 눈이 다음 줄을 잘 찾습니다. 반대로 큰 제목은 줄이 뜨면 한 덩어리로 안 읽힙니다.
p { line-height: 1.7; } /* 본문은 여유 있게 */
h1 { line-height: 1.15; } /* 제목은 바짝 */
h2 { line-height: 1.25; }
본문은 1.7로 벌려 읽기를 돕고, 두 줄짜리 제목은 1.15로 붙여 한 문장처럼 묶습니다. 같은 배수를 전부에 쓰면 어느 한쪽이 어색해집니다.
56.3 한 줄 길이 제한하기
행간보다 먼저 챙길 것이 한 줄 길이입니다. 한 줄이 너무 길면 눈이 다음 줄 첫머리를 놓칩니다. ch 단위로 글자 수를 제한합니다.
.prose {
max-width: 65ch; /* 한 줄 약 65자 */
}
ch는 0 하나의 폭이라, 65ch는 대략 한 줄에 60에서 70자입니다. 이 범위가 눈이 편하게 오가는 길이입니다. 화면이 아무리 넓어도 본문은 이 폭 안에 머뭅니다.
56.4 자간으로 숨 고르기
letter-spacing은 글자 사이를 벌리거나 좁힙니다. 본문은 거의 건드리지 않지만 큰 제목은 살짝 좁히면 단단해 보입니다.
h1 {
font-size: 2.5rem;
letter-spacing: -0.02em;
}
p {
letter-spacing: 0; /* 본문은 그대로 */
}
em 단위라 글자 크기에 비례합니다. 큰 제목의 글자를 아주 조금 당기면 헐거운 느낌이 사라집니다. 값이 크면 오히려 어색하니 0.02em 안팎으로 미세하게 씁니다.
56.5 대문자와 작은 글씨는 벌린다
전부 대문자로 쓰거나 아주 작은 라벨은 글자가 서로 엉겨 붙습니다. 이럴 때는 반대로 자간을 벌려 줍니다.
.eyebrow {
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.08em;
color: #6b7280;
}
대문자는 높이가 같아 붙으면 답답한데, 자간을 벌리면 한 글자씩 또렷해집니다. 작은 카테고리 라벨이 갑자기 읽기 편해집니다.
56.6 문단 사이 여백
행간이 줄 안의 호흡이라면 문단 간격은 단락 사이의 쉼표입니다. 줄 간격보다 조금 넓게 잡아 문단이 구분되게 합니다.
.prose p {
line-height: 1.7;
margin: 0 0 1.2em;
}
.prose h2 {
margin: 2em 0 0.6em;
}
문단 아래 여백을 줄 높이보다 넓게 줘서 단락이 뭉치지 않게 했습니다. 제목 위는 더 크게 벌려 새 절이 시작됨을 알립니다.
56.7 균형 잡힌 제목 줄바꿈
두세 줄로 접히는 제목은 마지막 줄에 한 단어만 남으면 어색합니다. 최근 CSS는 줄을 고르게 나눠 줍니다.
h1, h2 {
text-wrap: balance;
}
.prose p {
text-wrap: pretty; /* 본문 끝 외톨이 단어 완화 */
}
balance는 제목 각 줄의 길이를 비슷하게 맞춰 모양을 안정시킵니다. 본문에는 pretty를 써서 마지막 줄에 단어 하나만 떨어지는 일을 줄입니다.
56.8 읽기 좋은 본문 한 벌
지금까지의 값을 본문 블록에 모으면 이렇게 됩니다. 길이, 행간, 자간, 문단 여백이 함께 맞물립니다.
.article {
max-width: 65ch;
font-size: 1.0625rem;
line-height: 1.75;
letter-spacing: 0;
}
.article p { margin: 0 0 1.25em; }
.article h2 { line-height: 1.25; letter-spacing: -0.01em; }
한 줄이 65자를 안 넘고 줄 사이가 넉넉하니 긴 글도 눈이 덜 피로합니다. 자간은 본문에서 손대지 않고 제목만 아주 조금 당겼습니다.
56.9 목록과 인용의 간격
본문 규칙을 목록에도 그대로 쓰면 항목이 붙어 답답합니다. 항목 사이에 약간의 숨을 더 줍니다.
.prose ul {
line-height: 1.7;
padding-left: 1.25em;
}
.prose li + li {
margin-top: 0.4em;
}
.prose blockquote {
line-height: 1.6;
padding-left: 1em;
border-left: 3px solid #e5e7eb;
}
항목마다 위 여백을 조금 줘서 서로 붙지 않게 했습니다. 인용문은 왼쪽 선과 여백으로 본문과 결을 달리해 눈에 구분됩니다.
56.10 숫자 정렬과 자간
표 안 숫자는 글자마다 폭이 다르면 자릿수가 어긋나 보입니다. 폭을 고정하는 기능을 켭니다.
.price {
font-variant-numeric: tabular-nums;
letter-spacing: 0;
}
.table td {
font-variant-numeric: tabular-nums;
text-align: right;
}
tabular-nums는 숫자 폭을 균일하게 맞춰 세로로 자릿수가 딱 떨어지게 합니다. 가격이나 통계 표에서 숫자가 흔들리지 않고 줄을 섭니다.
56.11 제목 위아래 여백 다루기
제목은 위 여백을 아래보다 넉넉히 줘야 앞 문단과 뭉치지 않습니다. 제목이 아래 본문에 딸린 것처럼 붙어 보이게 하는 것이 요령입니다.
.prose h2 {
margin-top: 2.2em;
margin-bottom: 0.5em;
line-height: 1.3;
}
.prose h2 + p {
margin-top: 0;
}
제목 위를 크게 벌리고 아래는 바짝 붙였습니다. 제목과 바로 뒤 문단이 한 묶음으로 읽혀서 절의 경계가 또렷해집니다. em 단위라 제목 크기가 커지면 여백도 비례해 늘어납니다.
.prose h3 {
margin-top: 1.6em;
margin-bottom: 0.4em;
line-height: 1.35;
}
작은 제목은 큰 제목보다 위 여백을 조금 줄여, 위계에 따라 간격에도 층을 둡니다. 큰 절은 넓게, 작은 소절은 좁게 벌어지니 문서의 구조가 여백만으로 드러납니다.
56.12 정리
행간은 배수로 주고 본문은 넉넉히 제목은 바짝, 한 줄은 65자 안팎으로 묶고, 자간은 본문에 거의 안 대되 대문자와 작은 라벨만 벌리는 것, 이 몇 가지가 읽기 편한 글의 뼈대입니다. 크기가 무대라면 행간과 자간은 조명이라, 눈에 잘 안 띄지만 없으면 글이 금세 피로해집니다.