글자 크기만 키우지 말자: 제목·본문·여백으로 만드는 읽기 순서

읽기 편한 글은 모든 문장이 눈에 띄는 글이 아니다. 어디서 시작하고, 어느 문장이 새 주제를 열고, 어떤 설명이 같은 묶음인지 알아보기 쉬운 글이다. 글자의 크기와 굵기, 문단 사이의 간격을 함께 조절하면 장식이 많지 않아도 읽는 순서를 만들 수 있다.

먼저 내용을 묶고 그다음 크기를 정하기

동네 전시 안내문을 예로 들어 보자. 전시 이름, 날짜와 장소, 관람 방법, 참고 설명을 한 덩어리로 쓰면 어디를 먼저 봐야 할지 어렵다. 전시 이름은 제목으로, 관람 방법은 별도 소제목 아래로 묶는다. 제목은 내용의 구조를 표현해야 하며 단순히 큰 글자 효과를 주는 도구로 쓰지 않는다.

W3C의 제목 구조 안내는 제목 단계가 문서의 조직과 탐색에 쓰인다고 설명한다. 웹에서는 겉보기 크기뿐 아니라 실제 제목 요소도 맞게 사용하자. 제목처럼 보이는 굵은 문장과 화면 낭독기가 제목으로 인식하는 문장은 다를 수 있다.

크기·굵기·여백 중 무엇이 필요한가

소제목과 본문의 크기가 같아도 굵기와 간격으로 구분할 수 있다. 반대로 아주 큰 소제목을 본문에 바짝 붙이면 앞뒤 관계가 어색해질 수 있다. 중요한 제목은 차이를 분명히 주고, 같은 단계의 소제목들은 동일한 방식을 반복해 독자가 규칙을 익히게 한다.

한 가지 출발 예시는 본문 18픽셀, 소제목 24픽셀을 시험하고 소제목 앞뒤 간격을 조절하는 것이다. 이것은 정답 비율이나 모든 사이트의 최소 규칙이 아니다. 서체의 실제 글자 높이, 화면 폭, 읽는 언어, 독자의 환경에 따라 체감 크기와 적절한 간격이 달라진다. 최종 화면에서 문장을 읽으며 정하자.

강조를 줄이면 중요한 것이 드러난다

날짜와 장소, 관람 방법 전체를 모두 굵게 만들면 상대적인 강조가 사라진다. 독자가 바로 찾아야 할 정보부터 고른다. 안내문이라면 날짜와 장소를 짧게 분리하고, 긴 설명은 일반 본문으로 두는 식이다. 링크는 링크임을 알아볼 수 있게 표현하고 색만으로 역할을 구별하지 않는다.

줄 사이가 너무 좁으면 문장이 붙어 보이고, 너무 넓으면 한 문단의 연결이 약해질 수 있다. W3C의 시각적 표현 설명은 텍스트 표시를 독자에게 맞출 수 있는 조건을 다룬다. 여기의 접근성 기준을 특정 글꼴 크기 하나가 모든 독자에게 충분하다는 주장으로 바꾸어 읽어서는 안 된다.

완성 화면에서 읽기 테스트하기

휴대전화와 넓은 화면에서 각각 제목과 소제목만 훑어 본다. 글의 순서가 이해되는지, 날짜와 장소를 빠르게 찾을 수 있는지 확인한다. 다음에는 본문을 확대했을 때 글자가 잘리거나 다른 요소와 겹치지 않는지 살핀다. 언어가 바뀌면 제목 길이도 달라지므로 번역본의 줄바꿈까지 확인하면 좋다.

여백이 아까워 보인다고 모든 빈 공간을 채울 필요는 없다. 같은 주제는 가까이 묶고 새로운 주제 앞에는 숨 쉴 간격을 준다. 어떤 크기를 썼는지보다 독자가 글의 관계를 알아보고 필요한 문장으로 이동할 수 있는지가 결과를 판단하는 기준이다. 내용의 구조가 바뀌면 글자 스타일도 그 구조에 맞춰 다시 조정하자.