홈페이지 글꼴 선택 기준, 제목·본문 글꼴과 크기·줄 간격 5가지

홈페이지 글꼴 선택은 제목용 하나와 본문용 하나를 정하고 크기·줄 간격·굵기를 맞추는 것이 핵심입니다. 이 글에서는 제목과 본문 글꼴을 고르는 기준, 휴대폰에서 읽기 편한 크기와 줄 간격, 글꼴을 정할 때 자주 하는 실수를 정리했습니다.

홈페이지 글꼴이 중요한 이유

홈페이지 방문자는 글을 처음부터 끝까지 읽기보다 제목과 굵은 글씨를 훑으며 필요한 정보를 찾습니다. 글꼴이 읽기 어렵거나 크기가 작으면 훑어보는 단계에서 이미 지쳐 창을 닫게 됩니다. 특히 휴대폰에서는 화면이 좁아 작은 차이도 크게 느껴집니다.

글꼴은 회사의 인상도 바꿉니다. 같은 문장이라도 각진 고딕은 단정하고 현대적으로, 붓글씨 느낌의 글꼴은 전통적이고 부드럽게 보입니다. 다만 인상을 위한 글꼴은 제목에만 쓰고, 본문은 오래 읽어도 편한 글꼴로 나누는 것이 기본입니다.

제목 글꼴과 본문 글꼴 고르는 기준

제목 글꼴과 본문 글꼴은 하는 일이 다르므로 고르는 기준도 다릅니다. 아래 표는 두 글꼴의 목적과 모양, 굵기, 쓰는 곳을 비교한 것입니다.

구분	제목 글꼴	본문 글꼴
목적	회사 인상과 분위기 전달	오래 읽어도 편한 글자
모양	개성 있는 모양도 가능	획 굵기가 고른 고딕 계열
굵기	굵은 굵기 1~2종	보통과 굵게 2종 정도
쓰는 곳	소제목, 첫 화면 문장	문단, 표, 버튼, 메뉴

그림처럼 두 글꼴의 역할을 나누면 고민이 줄어듭니다. 글꼴을 하나만 쓰고 굵기로 제목과 본문을 구분하는 방법도 좋은 선택입니다. 글꼴 종류가 적을수록 페이지를 불러오는 파일도 줄어 속도에도 유리합니다.

한글 글꼴을 고를 때 볼 것

한글 글꼴은 영문보다 글자 수가 많아 웹폰트 파일이 큽니다. 그래서 굵기를 여러 개 불러오면 첫 화면이 늦게 뜨거나 글자가 잠시 다른 글꼴로 보였다 바뀌는 현상이 생깁니다. 실제로 쓸 굵기만 골라 불러오는지 제작 업체에 확인하세요. 상업용 홈페이지에 써도 되는 글꼴인지는 웹폰트 라이선스 확인 글에서 따로 다뤘습니다.

숫자와 영문 모양도 함께 보기

전화번호, 가격, 영업시간처럼 숫자가 중요한 정보가 많다면 숫자 모양도 확인합니다. 어떤 한글 글꼴은 숫자 1과 영문 l이 비슷하거나 숫자 폭이 들쭉날쭉해 표가 어수선해 보입니다.

글자 크기와 줄 간격 정하기

본문 글자 크기는 휴대폰에서 확대하지 않고 편하게 읽히는지를 기준으로 정합니다. 제목은 본문보다 확실히 크게 해서 단계가 한눈에 보이게 하되, 휴대폰에서 제목이 서너 줄로 쪼개지지 않을 정도로 조절합니다.

줄 간격은 글자 크기의 1.5배 안팎을 많이 씁니다. W3C 웹 콘텐츠 접근성 지침(WCAG)의 텍스트 간격 기준은 사용자가 줄 높이를 글자 크기의 1.5배 이상으로 넓혀도 내용이 잘리거나 겹치지 않아야 한다고 요구합니다. 자세한 수치는 W3C 텍스트 간격 기준 해설에서 볼 수 있습니다.

아래 그림은 본문 글자를 정할 때 확인할 다섯 가지를 한 장에 모은 것입니다.

그림의 세 번째 항목인 한 줄 길이도 놓치기 쉽습니다. 넓은 모니터에서 본문이 화면 끝까지 이어지면 다음 줄 첫머리를 찾기 어려우므로, 본문 영역의 최대 폭을 정해 둡니다.

문단 간격과 줄바꿈도 함께 정하기

줄 간격만큼 문단 사이 간격도 중요합니다. 문단 사이가 줄 간격과 비슷하면 어디서 이야기가 바뀌는지 알기 어렵습니다. 또 한글은 단어 중간에서 줄이 바뀌면 읽는 흐름이 끊기므로, 제목과 짧은 문구는 어절 단위로 줄이 바뀌도록 설정되어 있는지 휴대폰에서 확인하세요. 웹폰트 파일 크기가 첫 화면 속도에 주는 영향은 홈페이지 속도 개선 방법에서 함께 볼 수 있습니다.

홈페이지 글꼴 선택 순서

1. 회사 인상을 한두 단어로 정한다(예: 단정함, 친근함).
2. 본문 글꼴을 먼저 고른다. 읽기 편한 고딕 계열 후보를 두세 개 둔다.
3. 제목 글꼴을 고른다. 본문과 같은 글꼴의 굵은 굵기로도 충분한지 먼저 본다.
4. 실제 문장으로 휴대폰과 PC 화면에서 비교한다.
5. 상업용 사용 범위를 확인하고, 글꼴 이름과 굵기·크기 규칙을 문서로 남긴다.

글꼴을 정할 때 자주 하는 실수

• 제목·본문·버튼에 서로 다른 글꼴을 세 개 이상 쓴다.
• 글꼴 견본 사이트의 짧은 문구만 보고 긴 문단에서 확인하지 않는다.
• 본문을 얇은 굵기로 정해 휴대폰에서 흐리게 보인다.
• 회색 글자를 너무 연하게 써서 배경과 구분이 약해진다.

얇은 굵기와 연한 회색이 겹치면 디자인 시안에서는 세련돼 보여도 실제 화면에서는 읽기 어려워집니다. 시안을 검토할 때 휴대폰으로 직접 열어 보는 습관이 가장 확실한 점검입니다.

디코랩이 글꼴 선택을 돕는 방식

디코랩은 회사 홈페이지를 제작할 때 제목과 본문 글꼴, 글자 크기와 줄 간격 규칙을 함께 정하고 휴대폰 화면에서 먼저 확인합니다. 제작 범위와 진행 과정은 회사 홈페이지 제작 안내에서 볼 수 있습니다.

자주 묻는 질문

무료 글꼴을 써도 괜찮나요?

무료 글꼴도 웹사이트 사용, 상업적 이용, 파일 수정 허용 범위가 글꼴마다 다릅니다. 쓰기 전에 배포처의 라이선스 안내를 확인하고 내용을 저장해 두세요.

시스템 기본 글꼴만 써도 되나요?

됩니다. 휴대폰과 PC에 이미 설치된 글꼴을 쓰면 글꼴 파일을 내려받지 않아 빠르게 표시됩니다. 다만 기기마다 모양이 조금씩 달라 보일 수 있다는 점은 감안해야 합니다.

제목에 손글씨 글꼴을 써도 되나요?

짧은 첫 화면 문장 정도라면 분위기를 살리는 데 도움이 됩니다. 메뉴나 긴 소제목에 쓰면 읽기 어려워지므로 쓰는 곳을 한정하세요.

글꼴을 바꾸면 검색 노출에 영향이 있나요?

글꼴 자체보다 글자가 이미지가 아닌 실제 글자로 들어가 있는지가 중요합니다. 다만 웹폰트 파일이 무거우면 첫 화면이 늦게 떠 사용 경험이 나빠질 수 있으니 필요한 굵기만 불러옵니다.

지금 홈페이지의 글자가 작거나 읽기 불편하다는 이야기를 듣는다면 사이트 주소를 적어 디코랩 프로젝트 문의로 보내 주세요.