워드프레스로 블로그를 만들면서 블로그 가독성 높이기 위해 몇 가지 조치를 해보았는데 그 내용을 정리해 보았습니다. 사소하고 기본적인 내용이지만 간과할 수도 있는 부분이기도 합니다.
블로그 가독성 높이기 – 폰트
시스템 폰트 사용
폰트는 가독성에 가장 큰 영향을 주는 요소라 생각합니다. 눈에 편안한 폰트를 선택하는 게 가장 중요한데 제일 좋은 것은 시스템 폰트(컴퓨터 등에 내장된 기본 폰트)를 사용하는 것입니다. 어떤 기기에서 접속을 하더라도 내장된 폰트로 보이게 되면 평소 보아왔던 폰트로 글자를 볼 수 있어서 ① 가장 익숙하고 따로 폰트 파일을 불러오지 않아도 되어서 ② 사이트 속도에 영향을 주지 않으며 ③ 기기에 최적화된 폰트이기 때문입니다.
웹폰트 사용
저도 위의 세 가지 이유로 시스템 폰트를 고수해왔으나 최근 웹폰트를 적용하게 되었습니다. 그 이유는 각각의 시스템 폰트에 따라 글자 크기에 차이가 있어서 스타일이 일치하지 않는 점 때문이었습니다.
★ Mac OS의 시스템 폰트 AppleGothic 보다 MS Window PC의 맑은 고딕 폰트는 크기가 조금 더 크고 자간이 벌어져 있습니다. 이러한 부분이 전혀 신경 쓰이지 않는다면 시스템 폰트를, 어떤 기기에서든 일관된 글꼴 스타일을 적용하고 싶다면 웹폰트 사용을 고려해 보세요!
하지만 웹폰트를 잘 선택해야만 합니다. 로고나 디자인에 적합한 폰트나 손으로 쓴 듯한 귀여운(?) 폰트는 블로그 본문에 적용했을 때 오히려 가독성을 해치기 쉽습니다.
블로그 본문에 사용하기 적합한 웹폰트는 고딕체 또는 바탕체입니다. 제가 추천하는 폰트는 다음과 같습니다. 해당 폰트를 설정한 블로그들을 봤는데 가독성이 아주 뛰어났어요!
| 고딕체 | 바탕체 |
|---|---|
| 네이버 나눔스퀘어네오 | 리디 바탕 |
| 프리텐다드 (Pretendard) | 네이버 마루 부리 |
| 이롭게 바탕 |
글자 크기 · 자간 · 행간 설정
글자가 너무 작거나 따닥따닥 붙어 있으면 보기 불편하고 눈이 피로합니다. 글자의 모양을 알맞게 선택했다면 이제 글자의 크기, 글자 간격, 줄 간격을 보기 좋게 설정합시다.
저는 모든 연령대가 보기 쉽도록 본문 글자 크기와 행간은 늘리고, 포스트 타이틀의 자간을 줄여 보았습니다.
대부분의 테마에서는 글자 크기, 자간, 행간 등을 쉽게 변경할 수 있는 UI를 포함하고 있을 것입니다. 만약 수동으로 변경을 해야 한다면 아래 예시와 같은 형태로 적용할 수 있습니다.
/* 글자 크기 조절 */
.p {
font-size: 18px; /* 18픽셀 크기로 설정 */
}
/* 자간(글자 사이 간격) 조절 */
.h1 {
letter-spacing: 1px; /* 1픽셀 간격으로 설정 */
}
/* 행간(줄 간격) 조절 */
.p {
line-height: 2; /* 2 배 간격으로 설정 */
}
제목 · 밑줄 · 텍스트 박스 등
알맞은 폰트, 글자 크기, 자간, 행간 설정이 완벽하더라도 긴 문장은 지루함을 유발하고 가독성을 해칩니다. 다음과 같은 조치를 통해 가독성을 높여 봅시다.
- 문장의 줄바꿈 또는 단락 구분하기 :
Enter 키를 누르면 다음 단락, Shift+Enter 키를 누르면 줄바꿈이 됩니다. - 소제목 눈에 띄게 스타일 꾸미기:
소제목에 다른 폰트 적용하거나, 글자색 · 배경색 등을 지정해 눈에 띄게 합니다. - 밑줄 · 굵은 폰트로 문장 내에서 핵심 내용 강조하기
- 텍스트 박스를 활용하여 핵심 문단 강조하기
- 목록 태그 적절하게 사용하기
저 같은 경우 검색하여 접속한 블로그 가독성이 좋지 않으면 읽기를 포기하게 되더라고요. 원하는 정보가 그 블로그에만 있는 건 아니니까요. 치열한 경쟁 속에서 방문자의 체류 시간이 단축되지 않게 하려면 가독성을 점검하는 것도 한 방법이 될 수 있을 것 같습니다.