Web Guide웹 폰트타이포그래피가독성

웹 폰트와 타이포그래피 읽히는 홈페이지의 조건

홈페이지의 대부분은 글자입니다.

사진과 색이 첫인상을 만들지만 방문자가 실제로 정보를 얻는 것은 글자를 통해서입니다. 어떤 서체를 어떤 크기와 간격으로 쓰는지가 읽히는 홈페이지와 훑고 나가는 홈페이지를 가릅니다.

제목용 · 본문용 두 서체로 조판한 지면 견본

서체는 둘이면 충분하다

제목용 하나, 본문용 하나면 됩니다. 서체가 셋을 넘으면 산만해지고 로딩도 느려집니다. 국문 본문에는 화면에서 검증된 고딕 계열이 안전하고, 제목에서 개성을 주고 싶다면 명조나 특징 있는 고딕을 제한적으로 씁니다.

웹 폰트 라이선스가 상업 이용을 허용하는지 확인은 필수입니다.

모바일에서 본문이 14픽셀 이하면 확대해서 읽게 되고, 그 순간 이탈이 시작됩니다. 제목은 본문의 1.5배 이상으로 차이를 분명히 두어 위계가 한눈에 보이게 합니다.

16px

본문 크기 하한

1.6

줄 간격 배수

35~45자

한 줄 길이(국문)

크기 · 간격 · 대비 세 가지만 지켜도 같은 내용이 끝까지 읽힙니다.

크기와 간격 위계를 적용한 본문 화면

연한 회색 글자를 흰 배경에 쓰는 디자인은 세련되어 보이지만 읽히지 않습니다. 본문은 배경과 충분한 명도 대비(웹 접근성 기준 4.5:1 이상)를 지켜야 합니다.

문단 사이, 섹션 사이의 여백은 글자 크기의 배수로 규칙을 정해 일관되게 적용합니다.

제목이나 슬로건을 이미지로 만들어 올리면 검색엔진과 AI가 읽지 못하고, 확대 시 깨지며, 수정할 때마다 디자이너가 필요합니다. 웹 폰트로 충분히 표현할 수 있는 시대이니 글자는 글자로 두세요.

로고처럼 꼭 이미지여야 하는 경우에는 대체 텍스트를 넣습니다.

CHECK POINT

□ 서체를 제목용 · 본문용 두 가지로 제한했는가

□ 본문이 16픽셀 이상, 줄 간격 1.6배 안팎인가

□ 제목이나 문구를 이미지로 만들어 올린 곳이 없는가

글자는 디자인의 배경이 아니라, 홈페이지가 전달하는 내용 그 자체입니다.

서체 두 가지, 본문 16px, 줄 간격 1.6, 대비 4.5:1 — 이 규칙만으로 가독성은 크게 달라집니다.

#웹 폰트 #타이포그래피 #가독성 #본문 크기 #줄 간격 #명도 대비 #웹 접근성