홈페이지 글자 크기, 본문 크기·줄 길이·확대 대응 기준 4가지

홈페이지 글자 크기는 브라우저 기본값보다 작게 줄이지 말고, 200%까지 확대해도 내용이 깨지지 않게 만드는 것이 기준입니다. 이 글에서는 본문 글자 크기를 정하는 방법, 읽기 편한 줄 길이와 줄 간격, 확대에 대응하는 점검 순서를 W3C 기준과 함께 정리했습니다.

홈페이지 글자 크기가 중요한 이유

홈페이지를 만드는 사람은 큰 모니터로 화면을 보지만, 방문자는 작은 휴대폰으로 지하철에서, 노안이 온 눈으로 안경 없이 글을 읽기도 합니다. 디자인을 깔끔하게 보이려고 본문 글자를 작게 줄이면 화면은 정돈돼 보여도 읽는 사람은 금방 지칩니다. 글자가 작으면 확대해서 읽어야 하고, 확대했을 때 화면이 깨지면 그대로 떠납니다.

그래서 글자 크기는 취향의 문제가 아니라 누구나 읽을 수 있는지의 문제입니다. 국제 웹 접근성 기준인 W3C의 WCAG에도 글자 확대, 화면 재배치, 글자 간격에 대한 기준이 따로 있습니다.

본문 글자 크기를 정하는 방법

MDN의 font-size 문서는 브라우저의 기본 글자 크기가 보통 16px이라고 설명합니다. 방문자가 브라우저나 기기 설정에서 글자를 키워 두면 이 기본값이 커집니다. 본문 크기를 기본값에 맞춰 상대 단위로 정해 두면, 방문자가 키운 설정이 홈페이지에도 그대로 반영됩니다.

같은 문서는 글자 크기를 px 같은 고정 단위로만 정하면 일부 브라우저에서 사용자가 글자 크기를 바꿀 수 없어 접근성에 좋지 않다고 설명하고, 사용자의 기본 글자 크기에 비례하는 단위(rem·em)를 권합니다. 제목은 본문보다 확실히 크게, 사진 설명이나 주석처럼 작은 글자도 본문보다 지나치게 작아지지 않게 단계를 정해 둡니다. 글꼴 고르기는 홈페이지 글꼴 선택에서 따로 다뤘습니다.

읽기 편한 줄 길이와 줄 간격

글자 크기가 적당해도 한 줄이 너무 길면 다음 줄 시작을 찾기 어렵고, 줄 간격이 좁으면 글이 빽빽해 보입니다. 아래 표는 W3C WCAG 2.2의 관련 기준이 무엇을 요구하는지 비교한 것입니다.

기준	수준	요구 내용
1.4.4 텍스트 크기 조절	AA	보조 기술 없이 200%까지 확대해도 내용과 기능이 사라지지 않을 것
1.4.10 리플로우	AA	가로 320 CSS 픽셀 폭에서도 가로세로 양방향 스크롤 없이 읽을 수 있을 것
1.4.12 텍스트 간격	AA	줄 높이 글자의 1.5배, 문단 간격 2배, 자간 0.12배, 단어 간격 0.16배로 바꿔도 깨지지 않을 것
1.4.8 시각적 표현	AAA	사용자가 한 줄 너비 80자 이하(한중일 문자는 40자), 양쪽 정렬 해제 등을 할 수 있을 것

한 줄은 몇 자가 적당한가

그림의 마지막 기준인 1.4.8 시각적 표현은 가장 높은 AAA 수준이라 모든 사이트에 요구되지는 않지만, 한국어처럼 한중일 문자를 쓰는 글은 한 줄을 40자 이하로 볼 수 있어야 한다는 기준은 참고할 만합니다. 큰 모니터에서 본문 영역을 화면 가득 넓히지 말고 적당한 폭으로 묶어 두면 됩니다. 이 기준은 양쪽 정렬도 다루는데, 양쪽 정렬은 단어 사이 간격이 들쭉날쭉해져 읽기 어려울 수 있으므로 본문은 왼쪽 정렬이 무난합니다.

확대 대응 점검 4단계

제작 업체가 아니어도 아래 네 단계로 우리 홈페이지가 확대에 잘 대응하는지 확인할 수 있습니다. 1.4.4 텍스트 크기 조절과 리플로우 기준을 운영자가 해 볼 수 있는 점검으로 옮긴 것입니다.

1. 브라우저 200% 확대: 컴퓨터에서 Ctrl 키와 + 키로 200%까지 키워 글자가 겹치거나 잘리는 곳이 없는지 봅니다.
2. 400% 확대로 좁은 화면 확인: 가로 1280px 화면에서 400%로 키우면 320px 폭과 같아집니다. 옆으로 스크롤하지 않고 읽히는지 봅니다.
3. 휴대폰 글자 크기 키우기: 휴대폰 설정에서 글자를 크게 하고 메뉴·버튼·표가 넘치지 않는지 봅니다.
4. 두 손가락 확대 확인: 휴대폰 화면을 두 손가락으로 벌려 확대가 막혀 있지 않은지 확인합니다.

그림의 네 번째 단계에서 확대가 되지 않는다면 페이지 설정에서 확대를 막아 둔 경우가 많습니다. MDN의 viewport 메타 태그 문서는 확대를 끄는 설정(user-scalable=no)이 저시력 사용자가 내용을 읽지 못하게 만든다고 경고합니다. 이런 설정이 있다면 제작 업체에 빼 달라고 요청하세요.

글자 크기에서 자주 하는 실수

• 디자인을 위해 본문을 브라우저 기본값보다 작게 줄인다.
• 글자를 이미지 안에 넣는다. 이미지 속 글자는 확대하면 흐려지고 검색과 화면 낭독 프로그램도 읽지 못합니다.
• 회색 글자를 연하게 써서 크기는 충분해도 배경과 구분이 잘 안 된다.
• 버튼과 상자 높이를 고정해 글자를 키우면 글이 밖으로 넘친다.

색 대비를 포함한 기본 접근성 점검은 웹 접근성 기본에 정리했습니다.

디코랩이 돕는 방식

디코랩은 홈페이지를 만들 때 본문을 상대 단위로 정하고, 확대와 좁은 화면에서 글이 깨지지 않는지 확인합니다. 운영 중인 사이트의 글자 크기나 줄 간격 조정은 유지보수 서비스에서 요청할 수 있습니다.

자주 묻는 질문

본문 글자는 몇 px로 해야 하나요?

정해진 하나의 값은 없습니다. 브라우저 기본값(보통 16px)을 출발점으로 삼아 그보다 작게 줄이지 않고, 상대 단위로 정해 방문자의 설정을 따르게 하는 것이 기본입니다.

고령층 방문자가 많으면 더 키워야 하나요?

방문자 특성상 큰 글자가 필요하다면 본문을 기본값보다 키우는 것도 좋은 선택입니다. 다만 크기만 키우기보다 줄 간격과 색 대비를 함께 넉넉히 하는 것이 읽기에 더 도움이 됩니다.

글자 크기 조절 버튼을 따로 달아야 하나요?

요즘 브라우저와 휴대폰은 자체 확대 기능이 있어 별도 버튼이 꼭 필요하지는 않습니다. 브라우저 확대에 화면이 깨지지 않게 만드는 것이 먼저입니다.

확대했을 때 표가 옆으로 넘치는 것도 문제인가요?

W3C 리플로우 기준은 데이터 표처럼 가로세로 배치가 꼭 필요한 내용은 예외로 둡니다. 다만 표의 제목과 주변 글은 좁은 화면에서도 옆으로 스크롤하지 않고 읽혀야 합니다.

우리 홈페이지 글자가 너무 작거나 확대하면 화면이 깨진다면 사이트 주소를 적어 디코랩 프로젝트 문의로 보내 주세요.