긴 글을 읽히게 만드는 명조 조판: 폭·행간·문단 간격 점검

좋은 명조를 골라도 문단 폭이 너무 넓거나 행간이 촘촘하면 긴 글은 금세 피곤해진다. 반대로 여백을 크게 늘리기만 하면 문장 사이 연결이 끊긴다. 고운바탕을 예로 들어 크기, 폭, 행간, 문단 간격을 한 번에 바꾸지 않고 순서대로 맞춰 보자.

비가 그친 뒤 골목의 소리가 또렷해졌다. 우리는 천천히 다음 장을 넘겼다.

실제 원고로 기준 문단을 만든다

한글 500자 안팎의 본문에 짧은 문장과 긴 문장, 괄호, 숫자, 인용을 섞는다. 임시 문구보다 발행할 글의 어휘와 문장 길이를 반영해야 줄바꿈이 의미가 있다. 소제목과 링크 한 줄도 같은 화면에 둔다.

처음에는 색과 굵기를 고정한다. 폰트 크기와 컨테이너 폭을 조정한 뒤 행간, 문단 간격 순으로 옮겨 가면 어떤 값이 읽기 흐름을 바꿨는지 알 수 있다.

읽기 폭은 글자 수와 화면으로 본다

데스크톱에서 넓은 공간을 모두 본문으로 채우면 시선이 한 줄 끝에서 다음 줄 시작을 찾기 어렵다. 컨테이너를 몇 단계로 바꿔 같은 문단의 줄 수와 눈의 이동을 비교한다. 고정된 글자 수 공식보다 실제 폰트와 독자 환경이 우선이다.

모바일에서는 여백을 줄인 대가로 한 줄 글자 수가 늘지 않는다. 작은 폭에서 조사 하나가 홀로 남거나 고유명사가 어색하게 갈라지는지 보고 문구와 폭을 함께 조정한다.

본문 폭 34rem · 글자 크기 17px · 행간 후보 1.7

행간은 받침과 획의 밀도로 맞춘다

명조의 가는 획과 긴 세로획은 같은 숫자 행간에서도 다른 밀도를 만든다. 받침이 많은 문장과 따옴표가 연속되는 문장을 놓고 위아래 줄이 붙어 보이지 않는지 살핀다. 줄 상자만 넓고 문단이 흩어져 보이지 않는지도 같이 본다.

브라우저 기본값에 기대지 말고 본문 토큰에 크기와 행간을 묶는다. 소제목과 인용문은 별도 역할이므로 같은 비율을 기계적으로 복사하지 않는다.

문단 간격은 내용의 끊김을 표시한다

모든 줄 사이보다 문단 사이가 분명히 넓어야 단락을 찾기 쉽다. 그러나 문단마다 큰 공백이 생기면 글이 카드 목록처럼 보일 수 있다. 짧은 문단과 긴 문단이 교차하는 실제 글에서 간격을 정한다.

소제목 앞 여백은 이전 문단과의 관계를, 소제목 뒤 여백은 새 내용의 시작을 보여 준다. 위아래를 같은 값으로 두기보다 페이지를 훑을 때 묶음이 분명한지 확인한다.

인용은 본문보다 크기보다도 폭과 들여쓰기에서 먼저 구별된다.

모바일 확대와 폴백까지 검사한다

접근성 글자 확대에서 고정 높이 상자가 본문을 자르지 않는지, 링크가 겹치지 않는지 본다. 웹폰트가 늦거나 실패했을 때 대체 폰트로 줄 수가 크게 바뀌는지도 확인한다. 긴 글은 한 번의 이동이 페이지 전체에 누적된다.

고운바탕 상세에서 후보를 확인한 뒤 폰트 시뮬레이터에 원고 두세 문단을 넣자. 폭, 행간, 문단 간격을 한 단계씩 바꾸고 데스크톱과 모바일을 나란히 캡처하면 다음 글에도 쓸 기준이 남는다.