홈페이지 폰트 디자인 글자 크기와 간격 정리하는 법

홈페이지는 방문자에게 필요한 정보를 전달하는 공간이라 멋진 효과를 넣기 전에 읽기 편한 상태를 만드는 것이 우선입니다. 오늘은 다양한 홈페이지에 적용할 수 있는 폰트 디자인 방식에 관해 이야기 합니다.

같은 글꼴과 이미지를 사용했는데도 어떤 홈페이지는 깔끔하고, 어떤 곳은 어수선하게 느껴지는 이유는 무엇일까요? 여러 이유가 있지만, 필자는 이럴때 글자 크기와 두께, 요소 사이의 간격(계층)에서 문제는 찾습니다.

홈페이지 폰트 디자인 한글과 영문을 함께 살펴보세요

많은 분들이 글꼴을 고를 때 한글 모양만 보고 결정하는 경우가 많습니다. 하지만 실제 홈페이지에는 영문 회사명과 전화번호, 가격, 괄호 같은 기호도 함께 들어가죠. 한글은 마음에 드는데 숫자나 영문이 어색하다면 화면 전체의 느낌도 달라집니다.

따라서 글꼴을 적용하기 전에 실제 사용할 제목과 본문, 연락처를 함께 입력해 보세요. 특히 짧은 제목에서는 괜찮아 보이던 글꼴이 긴 문장에서는 답답하게 느껴질 수도 있습니다.

그래서 저는 물론 대부분의 디자이너들은 한글 홈페이지를 만들 때 프리텐다드처럼 한글과 영문, 숫자가 무난하게 어울리는 글꼴을 먼저 고려하죠.

다만 특정 글꼴을 사용해야 디자인이 좋아지는 건 아닙니다. 회사의 분위기에 맞으면서 긴 글도 편하게 읽을 수 있다면 개성 있는 폰트도 나쁘지 않습니다.

그리고 홈페이지에는 기본적으로 여러 글꼴을 섞기보다 하나의 글꼴로 제목과 본문을 구성합니다. 크기와 두께만 달리해도 충분히 차이를 줄 수 있으니까요.

영문에 별도 글꼴을 사용한다면 한글과 나란히 놓았을 때 높이와 굵기가 자연스러운 상태로 보이는지를 주로 확인하면 됩니다.

본문 크기를 정한 뒤 제목의 크기와 두께를 맞춥니다

한 가지 팁을 드리자면 디자인을 시작할 때 큰 제목부터 꾸미다 보면 본문이 지나치게 작아지거나, 페이지마다 글자 크기가 달라지기 쉽습니다. 그래서 저는 방문자가 가장 많이 읽게 될 본문부터 크기를 정하고 제목을 거기에 맞추는 방식을 권합니다.

처음이라면 본문은 16~18px 정도에서 비교해 보세요. 이 수치는 출발점이며, 글꼴과 본문 영역의 너비, 방문자의 읽기 환경에 따라 조정하시면 됩니다. 같은 16px이라도 글꼴에 따라 체감 크기가 다르기 때문이죠.

본문이 정해지면 페이지 제목과 소제목을 구분합니다. 예를 들어 본문이 16px일 때 소제목을 24~30px 정도로 놓고 비교할 수 있습니다. 그렇다고 제목은 반드시 본문의 두 배 이하여야 한다는 식으로 제한할 필요는 없습니다.

두께도 같은 방식으로 정리합니다. 본문은 보통 두께로, 제목은 그보다 두껍게 시작해 보세요. 폰트 디자인 핵심은 크기가 다른 글자들을 최소화하면서 같은 역할의 제목에는 같은 기준을 적용하는 것입니다. 

이렇게 준비해야 방문자가 크기와 두께만 보고도 정보의 순서를 이해하기 쉽습니다.

행간과 자간은 실제 문장을 읽으면서 조절하세요

글자 크기를 정했다면 이제 문장 안의 간격을 살펴볼 차례입니다. 행간은 줄과 줄 사이의 간격이고, 자간은 글자와 글자 사이의 간격입니다. 이 두 가지가 맞지 않으면 좋은 글꼴을 사용해도 읽기 불편해지고 디자인도 뭔가 헐렁해 보입니다.

긴 본문이라면 행간을 글자 크기의 1.6~1.8배 정도에서 비교해야 합니다. 너무 좁으면 다음 줄을 따라가기 어렵고, 너무 넓으면 하나의 문단이 흩어진 것처럼 보이니 주의해야 하죠. 이때 짧은 제목은 본문과 다른 간격이 필요할 수도 있으니 따로 확인하는 게 좋습니다.

자간은 기본값에서 시작해 조금씩 조절하세요. 한글이라고 무조건 좁히거나 영문이라고 반드시 넓힐 필요는 없습니다. 사용한 글꼴과 크기에 따라 결과는 달라집니다.

간격을 조절할 때는 예시 문장 한 줄만 보지 말고 실제 본문 두세 문단을 넣어보세요. 직접 읽어보면서 답답한지, 줄을 바꿀 때 시선이 자연스럽게 이어지는지 확인하는 것이 가장 확실한 방법입니다.

제목과 본문, 이미지 여백으로 같은 내용은 묶어주기

글자 자체를 정리했는데도 화면이 어수선하다면 요소 사이의 여백을 살펴보세요. 같은 내용을 설명하는 제목과 본문은 가깝게, 다음 주제로 넘어가는 구간은 더 넓게 떨어뜨리면 정보의 묶음이 눈에 들어옵니다. 이런 방식이 그룹핑입니다.

예를 들어 서비스 제목 아래 설명이 있고 그 내용을 보여주는 이미지가 있다면, 세 요소가 하나의 묶음으로 보이도록 배치합니다. 반면 다음 서비스 제목까지 같은 간격으로 이어지면 어디서 내용이 바뀌는지 사람들은 구분하기 어렵습니다.

이미지라고 항상 본문과 멀리 떨어뜨려야 하는 것도 아닙니다. 바로 위 설명을 보여주는 이미지라면 관련성이 느껴지도록 묶고, 새로운 내용을 시작하는 이미지라면 앞선 내용과 여백을 달리하는 게 그룹핑의 핵심이죠.

간격(계층)을 잡는데 정답이 하나만 있는 것은 아닙니다. 다만 같은 구성의 섹션이라면 같은 간격을 반복해 주는게 통일감을 주기 편합니다.

제목과 본문 사이, 본문과 버튼 사이, 다음 섹션까지의 여백이 일정하게 만들면 복잡한 효과 없이도 하나로 정돈된 느낌을 만들 수 있습니다.

색상과 모바일 화면까지 확인해야 기준이 완성됩니다

폰트 색상도 각기 역할에 따라 정리하면 어렵지 않습니다. 초보자에겐 밝은 배경이라면 제목과 본문에 읽기 편한 짙은 색을 사용하고, 링크나 중요한 안내에 포인트 색상을 적용하는 방식이 가장 무난합니다.

연한 회색은 깔끔해 보여도 작은 글자나 휴대전화 화면에서는 읽기 어려울 수 있다는걸 알아야 합니다.

정말 주의해야 할 부분은 강조할 문장이 많다고 컬러를 다양하게 사용하면 오히려 무엇이 중요한지 알기 어렵다는 점입니다. 

그래서 제가 평소에 팀원들과 수강생들에게 강조하는 부분은 먼저 크기와 두께, 여백으로 구분하고 색상은 필요한 부분에만 사용해야 가독성이 더 좋아진다라는 사실입니다.

마지막으로 할일은 휴대전화에서 실제 페이지를 열어보는 것입니다. 컴퓨터에서 한 줄이던 제목이 여러 줄로 바뀌거나, 화면 양쪽 여백 때문에 본문이 지나치게 좁아질 수 있습니다. 이때 글자를 무조건 줄이기보다 제목의 줄바꿈과 본문 너비, 섹션 간격으로 계층을 잡아갑니다.

오늘 이야기에서 여러분이 기억할 것은 복잡하지 않습니다. 

같은 역할에는 같은 기준을 적용하고, 관련된 내용은 가까이 묶으며, 중요한 정보가 먼저 보이게 만드는 것 뿐입니다. 지금 여러분 홈페이지가 어수선하게 느껴진다면 글꼴을 바꾸기 전에 이 기준부터 하나씩 확인해 보시길 바랍니다.

여기까지 오엠지 디자인에서 전해 드렸습니다.