사장님이 직접 만든 상세페이지나 메뉴판이 어딘가 안 읽힙니다. 대개 폰트를 의심합니다. 그런데 진짜 범인은 따로 있습니다.
폰트가 아니라 간격
잘 안 읽히는 한글의 공통점은 폰트가 아니라 간격과 대비입니다. 글자끼리 바짝 붙어 있거나, 줄과 줄이 답답하게 좁거나, 글자색이 배경과 충분히 구분되지 않습니다. 셋 다 돈 한 푼 안 드는 설정값이죠.
안 읽히는 설정
- 자간이 빽빽하거나 너무 벌어짐
- 행간이 글자에 딱 붙음
- 연한 회색 글씨
- 한 줄이 화면 끝까지
읽히는 설정
- 자간 살짝 좁게(약 -0.3)
- 행간 1.5~1.6배
- 대비 4.5대 1 이상
- 한 줄을 적당히 끊기
모바일이라면 더
화면이 작을수록 차이가 큽니다. 본문은 16에서 19픽셀 사이로, 작지 않게 잡아 줍니다. 이 몇 가지만 손봐도 같은 글이 훨씬 수월하게 읽힙니다. 어스큐리 블로그도 화려한 폰트가 아니라 이 설정값들을 매만져 본문 가독성을 잡았습니다.
좋은 가독성은 비싼 폰트에서 오지 않습니다. 자간·행간·대비라는 공짜 다이얼에서 옵니다. 디자이너가 없어도 이 세 개만 만지면 글이 달라집니다.
참고
- 한글 웹 타이포그래피 — parksb
- 읽기 좋은 본문 설정 — brunch
