[메인 키워드]: 웹 폰트 가독성 [보조 키워드]: 폰트 추천, 행간 설정, 자간 조정, 본문 서체, 웹 디자인 타이포그래피 [검색 의도]: 웹 화면에서 사용자가 글을 읽을 때 피로감을 줄이고 가독성을 극대화하기 위한 서체 선택 기준과 행간/자간/글자 크기 등의 타이포그래피 기본 수치를 습득하는 목적
웹사이트나 블로그에 접속했을 때 내용이 아무리 알차고 좋아도 글씨가 너무 빽빽하거나 폰트 형태가 산만하면 나도 모르게 '뒤로 가기' 버튼을 누르게 된다. 반대로 깔끔하고 보기 편하게 정돈된 문장은 눈에 쏙쏙 들어오며 글에 대한 신뢰도를 높여준다.
글자의 모양과 배열을 다루는 '타이포그래피(Typography)'는 단순히 보기 좋은 폰트를 고르는 작업이 아니다. 읽는 사람의 시각적 피로를 줄이고 메시지를 정확히 전달하기 위한 매우 과학적인 영역이다.
미대 출신이 아니더라도 실무에서 실패 없는 표준 폰트를 선택하고, 가독성을 결정짓는 핵심 수치(행간, 자간, 글자 크기)를 바르게 설정하는 기본 원칙을 알아보자.
1. 실패 없는 본문용 표준 서체 고르기
디자인 작업을 하다 보면 예쁜 손글씨체나 독특한 장식용 폰트에 눈이 가기 쉽다. 하지만 이런 서체들은 제목에 한두 번 쓰일 때는 포인트가 될지 몰라도, 긴 글이 이어지는 본문에 사용되는 순간 최악의 독해력을 선사한다.
웹 화면의 본문 텍스트는 장식이 없고 깔끔한 고딕(Sans-serif) 계열을 사용하는 것이 철칙이다. 픽셀 단위로 표시되는 디지털 모니터에서는 글자 끝에 돌기가 있는 명조(Serif) 계열보다 가독성이 훨씬 뛰어나다.
실무에서 가장 안전하게 추천하는 검증된 본문용 한글 폰트는 다음과 같다.
Pretendard (프리텐다드): 현재 국내 IT 업계와 웹 디자인에서 사실상 표준으로 쓰이는 폰트다. 가독성이 매우 뛰어나고 글자 크기나 굵기 변화에 아주 안정적으로 대응한다.
Noto Sans KR (본고딕): 구글과 어도비가 함께 만든 폰트로, 거의 모든 디바이스에서 깨짐 없이 안정적으로 표시된다.
Spoqa Han Sans Neo (스포카 한 산스 네오): 숫자와 한글의 어울림이 좋아 쇼핑몰이나 데이터 중심의 웹사이트에서 자주 활용된다.
본문 폰트를 고를 때는 최소 5~6가지 이상의 굵기(Weight: Light, Regular, Medium, Bold 등)를 지원하는 서체인지 반드시 확인해야 한다. 굵기 종류가 다양해야 앞서 배운 시각적 계층 구조를 하나의 폰트 패밀리 안에서 깔끔하게 구현할 수 있다.
2. 가독성을 결정짓는 숨은 열쇠: 행간(Line-height)
글씨가 눈에 잘 들어오지 않는 가장 큰 원인은 폰트 자체보다 '줄과 줄 사이의 간격(행간)'이 잘못 설정되었기 때문이다.
기본 프로그램 설정 그대로 행간을 방치하면 글 줄이 서로 바짝 붙어 답답해진 문단이 된다. 시선이 한 줄을 다 읽고 다음 줄로 넘어갈 때 아래 줄의 글자와 부딪히면서 읽던 위치를 놓치게 되는 것이다.
반대로 행간이 너무 넓으면 문장들이 서로 분리되어 보여 하나의 글로 연결되어 읽히지 않는다.
본문 텍스트의 가독성을 확보하는 표준 행간 비율은 글자 크기의 150% ~ 160% (1.5 ~ 1.6)다.
예를 들어 본문 글자 크기가 16px라면, 행간(Line-height)은 24px ~ 25.6px로 설정해야 눈이 피로하지 않고 부드럽게 다음 줄로 시선이 이동한다.
단, 글자 크기가 큼직한 제목(Title)의 경우에는 행간 비율을 120% ~ 130% 정도로 좁혀주어야 문장이 산만하게 흐트러지지 않고 탄탄하게 묶여 보인다.
3. 자간(Letter-spacing)과 본문 글자 크기 수치 가이드
자간은 '글자와 글자 사이의 간격'을 뜻한다. 한글은 구조상 글자 자체에 약간의 여백을 포함하고 있어, 기본 자간(0%) 상태에서는 글자가 다소 벙벙하게 떨어져 보이는 경향이 있다.
따라서 한글 본문 텍스트를 다룰 때는 자간을 약 -1% ~ -2% (또는 -0.01em ~ -0.02em) 정도로 아주 미세하게 줄여주는('윤곽을 모아주는') 것이 시각적으로 훨씬 단정하고 밀도 높은 느낌을 준다.
그렇다면 모바일과 웹 화면에서 사용자가 읽기 가장 편안한 본문 글자 크기는 얼마일까?
데스크톱 웹 화면: 본문 텍스트 16px ~ 18px
모바일 화면: 본문 텍스트 15px ~ 16px
14px 이하의 작은 글자는 고령자나 시력이 안 좋은 사용자에게 큰 불편을 주므로 본문용으로는 피하는 것이 좋다. 제목은 본문 크기의 최소 1.5배 이상(24px~32px)으로 과감하게 키워 확연한 대비를 만들어내야 한다.
[핵심 요약]
본문용 폰트는 Pretendard나 Noto Sans KR처럼 굵기 옵션이 다양한 고딕(Sans-serif) 계열 서체를 선택한다.
본문 행간은 글자 크기의 150%~160%(1.5~1.6배)를 적용하여 시선 이동 시 답답함이 없도록 설정한다.
한글 자간은 -1%~-2% 정도 아주 살짝 줄여 단정하게 모아주고, 본문 글자 크기는 16px 내외를 표준으로 삼는다.
[다음 편 예고]
다음 편부터는 본격적인 실무 디자인 툴로 들어가, 피그마(Figma)를 처음 켰을 때 꼭 알아야 하는 핵심 툴바 기능과 캔버스 조작법을 다룹니다.
0 댓글