홈페이지 디자인 이야기를 하면 색과 사진부터 떠올리시지만, 방문자가 가장 오래 보는 것은 사실 글자입니다. 글자가 편하면 끝까지 읽고, 불편하면 조용히 뒤로 가기를 누르죠.
잘 읽히는 글자에는 특별한 비밀이 없습니다. 크기, 줄 간격, 한 줄의 길이, 그리고 배경과의 대비. 이 네 가지만 기준을 잡아도 같은 내용이 훨씬 편하게 읽힙니다. 한걸음이 홈페이지를 만들 때 지키는 기준을 소개할게요.
1. 본문 글자는 생각보다 크게
디자인 시안에서는 작은 글자가 세련돼 보이기 쉽습니다. 하지만 휴대폰으로, 그것도 걸으면서 읽는 손님에게 작은 글자는 그냥 읽기 싫은 글자예요. 한걸음은 본문을 최소 16px 이상으로 잡고, 설명이 긴 페이지는 17~18px까지 키웁니다. 사진 출처나 날짜 같은 보조 정보도 16px 아래로는 내리지 않아요.
2. 줄 간격은 글자 크기의 1.5배 이상
줄과 줄 사이가 너무 붙어 있으면 다음 줄로 눈을 옮기다 같은 줄을 또 읽게 됩니다. 한글 본문은 글자 크기의 1.6~1.9배 정도 줄 간격을 두면 편하게 읽혀요. 웹 접근성 지침(WCAG)도 줄 간격을 글자 크기의 1.5배 이상으로 늘렸을 때 화면이 깨지지 않도록 만들라고 권합니다.
3. 한 줄이 너무 길면 길을 잃습니다
큰 모니터에서 글이 화면 끝에서 끝까지 이어지면, 한 줄을 다 읽고 다음 줄 시작을 찾느라 눈이 지칩니다. 본문 영역의 폭을 적당히 제한해 한 줄에 한글 35~45자 정도가 들어가게 하면 읽는 리듬이 안정적이에요. 이 블로그 본문도 그 기준에 맞춰 폭을 잡았습니다.
4. 연한 회색 글자는 예뻐도 읽히지 않습니다
흰 배경에 연한 회색 글자는 깔끔해 보이지만, 햇빛 아래 휴대폰 화면에서는 거의 보이지 않습니다. 웹 접근성 지침은 일반 본문 글자와 배경의 명도 대비를 4.5:1 이상, 큰 글자는 3:1 이상으로 두도록 정하고 있어요. 온라인 대비 검사 도구에 글자색과 배경색 코드를 넣어 보면 바로 확인할 수 있습니다.
5. 글꼴은 많아야 두 가지
제목용, 본문용, 강조용으로 글꼴을 여러 개 섞으면 화면이 산만해지고 페이지도 느려집니다. 대부분의 홈페이지는 본문용 글꼴 하나에 굵기만 달리 써도 충분해요. 제목에 개성 있는 글꼴을 쓰고 싶다면 하나만 더하는 정도가 적당합니다.
6. 문단은 짧게, 소제목은 자주
화면 속 글은 처음부터 끝까지 읽히기보다 훑어 읽힙니다. 문단은 서너 줄 안팎으로 끊고, 내용이 바뀌는 곳마다 소제목을 달아 주세요. 소제목만 읽어도 글 전체의 흐름이 보이면 잘 정리된 글입니다.
CHECKLIST오늘 바로 점검해 보세요
- 본문 글자가 16px 이상인가요?
- 줄 간격이 글자 크기의 1.5배 이상인가요?
- 큰 화면에서 한 줄이 지나치게 길지 않나요?
- 글자와 배경의 대비가 4.5:1 이상인가요?
- 글꼴을 두 가지 이하로 쓰고 있나요?
참고 자료
보기 좋은 것을 넘어, 쓰기 편한 화면을 고민합니다. 화면 구성과 글자, 버튼처럼 손님이 직접 만지는 부분의 이야기를 씁니다.
