글꼴 조합·색채 조합·웹 글꼴·한글 폰트 선택, 읽히는 디자인의 기준
카페 메뉴판을 만들던 중 제목은 눈에 띄는데 본문은 어딘가 어수선해 보인 적이 있나요? 서로 예뻐 보이는 글꼴을 골랐지만 막상 함께 배치하니 글자 크기와 분위기가 따로 노는 경우도 많습니다. 글꼴은 하나씩 볼 때보다 서로 나란히 놓았을 때 인상이 크게 달라집니다.
이 글을 읽으면 제목과 본문에 어떤 글꼴을 배치해야 하는지, 글꼴 조합과 색채 조합을 어떤 순서로 판단해야 하는지 알게 됩니다. 인쇄물뿐 아니라 웹 글꼴을 사용하는 화면에서도 확인할 기준과 자주 하는 실수까지 함께 살펴보겠습니다.
글꼴 조합은 비슷함보다 역할 나누기가 먼저다
좋은 글꼴 조합은 단순히 서로 다른 글꼴 두 개를 고르는 일이 아닙니다. 제목은 시선을 끌고, 본문은 편하게 읽히며, 강조 문구는 중요한 부분을 알려주는 식으로 역할을 나누는 작업입니다.
가장 무난한 방법은 제목과 본문에 대비를 주되, 분위기는 맞추는 것입니다. 예를 들어 제목에 획이 굵고 개성이 있는 글꼴을 사용했다면 본문에는 획이 일정하고 글자 사이가 지나치게 좁지 않은 글꼴을 배치합니다. 둘 다 장식이 강하면 내용보다 글자 모양이 먼저 보입니다.
- 제목: 짧은 문장에서 특징이 드러나고 크기를 키워도 형태가 무너지지 않는 글꼴
- 본문: 작은 크기에서도 자음과 모음이 잘 구분되는 글꼴
- 강조: 굵기, 색, 밑줄 중 한두 가지 방식만 사용
처음부터 두세 개의 글꼴을 섞기보다 제목용과 본문용 두 개로 시작하는 편이 안전합니다. 한 글꼴 안에서 굵기만 달리해도 충분히 다양한 위계를 만들 수 있습니다.
고르기 전에 확인할 기준
글꼴을 고를 때는 예쁜 견본보다 실제로 들어갈 문장을 먼저 봐야 합니다. 한글은 같은 글꼴이라도 받침이 많은 문장과 짧은 제목에서 인상이 크게 달라집니다. 다음 문장을 복사해 직접 비교해 보세요.
“오늘의 이야기를 천천히 읽어 보세요.” “밝은 색의 메뉴와 안내 문구입니다.”
- ㅁ, ㅇ, ㅂ처럼 닫힌 모양이 뭉쳐 보이지 않는가?
- 받침이 이어질 때 글자가 서로 붙어 보이지 않는가?
- 숫자와 영문이 한글 옆에서 지나치게 튀지 않는가?
- 작은 화면에서 줄 간격이 답답하거나 문장이 쉽게 끊기지 않는가?
- 굵은 글자와 보통 글자의 차이가 분명한가?
사용 목적도 중요합니다. 포스터 제목은 짧은 시간에 주목받아야 하므로 개성 있는 글꼴이 어울릴 수 있습니다. 반면 안내문이나 블로그 본문은 오래 읽어야 하므로 장식보다 편안함이 우선입니다.
서로 다른 조합을 비교하는 방법
글꼴을 비교할 때는 같은 글자 크기만 보는 것보다 실제 역할을 배치해 보는 것이 좋습니다. 제목은 본문보다 1.8배에서 2.5배 정도 크게 설정하고, 본문은 화면과 인쇄물에 맞춰 읽기 편한 크기로 시험합니다. 숫자는 정해진 법칙이 아니라 출발점입니다.
| 조합 방식 | 느낌 | 어울리는 사용처 | 주의할 점 |
|---|---|---|---|
| 굵은 고딕과 보통 고딕 | 깔끔하고 안정적 | 공지, 카드 뉴스, 안내 화면 | 굵기 차이가 작으면 위계가 약함 |
| 고딕과 부드러운 명조 | 현대적이면서 차분함 | 에세이, 잡지, 브랜드 소개 | 분위기 차이가 너무 크지 않은지 확인 |
| 개성 있는 제목 글꼴과 중립적인 본문 | 주목도가 높음 | 행사 포스터, 썸네일 | 제목 글자가 길어지면 복잡해짐 |
글꼴의 분류가 다르다고 항상 잘 어울리는 것은 아닙니다. 글자 폭, 획의 굵기, 모서리의 느낌이 모두 다르면 화면이 산만해질 수 있습니다. 조합을 만든 뒤에는 흑백으로도 확인해 보세요. 색을 제거했을 때도 제목과 본문의 순서가 보인다면 기본 구조가 잘 잡힌 것입니다.
실제 작업 순서
- 내용의 우선순위를 정합니다. 제목, 소제목, 본문, 설명, 버튼처럼 정보의 층을 나눕니다.
- 본문 글꼴부터 고릅니다. 가장 많은 면적을 차지하고 오래 읽히는 글자이므로 먼저 안정성을 확인합니다.
- 제목 글꼴을 맞춥니다. 본문과 완전히 같게 하거나 확실한 차이를 주는 두 방향 중 하나를 선택합니다.
- 크기와 굵기를 정합니다. 글꼴을 더 추가하기보다 크기, 굵기, 줄 간격으로 차이를 만듭니다.
- 색채 조합을 적용합니다. 글꼴을 고른 뒤 배경과 글자 색의 밝기 차이를 확인합니다.
- 실제 기기에서 시험합니다. 디자인 프로그램 화면만 보지 말고 휴대전화, 태블릿, 인쇄물에서 읽어 봅니다.
웹 글꼴은 화면에 글자를 표시하기 위해 내려받는 글꼴 파일입니다. 글꼴 파일이 늦게 불러와지면 처음에는 다른 글꼴로 보이다가 뒤늦게 바뀔 수 있습니다. 파일 용량, 한글 지원 범위, 굵기 종류, 사용 허가 조건을 확인해야 합니다. 특히 상업용 콘텐츠라면 무료라는 말만 믿지 말고 제공처의 이용 범위를 살펴보세요.
자주 하는 실수와 고치는 방법
첫째, 예쁜 글꼴을 너무 많이 섞는 실수입니다. 제목마다 다른 글꼴을 쓰면 각각은 돋보여도 페이지 전체의 규칙이 사라집니다. 한 화면에서는 보통 두 종류 안팎으로 제한하고, 차이는 굵기나 크기로 만드는 편이 좋습니다.
둘째, 글꼴만 바꾸고 줄 간격을 그대로 두는 경우입니다. 글자 모양이 바뀌면 같은 크기라도 답답함이 달라집니다. 본문이 뭉쳐 보이면 글꼴을 바로 바꾸기 전에 줄 간격을 조금 넓히고 문단 사이 간격을 조정해 보세요.
셋째, 색을 진하게 하면 더 잘 읽힌다고 생각하는 경우입니다. 검은 배경에 강한 색을 여러 개 올리면 눈이 피로할 수 있습니다. 배경과 본문의 밝기 차이를 먼저 확보하고, 강조 색은 한 가지를 중심으로 사용하세요.
넷째, 한글과 영문을 따로 확인하지 않는 실수입니다. 한글은 편안한데 숫자나 영문만 유난히 작거나 굵어 보일 수 있습니다. 가격, 날짜, 주소처럼 숫자가 많이 들어가는 디자인이라면 해당 문장을 별도로 시험해야 합니다.
자주 묻는 질문
글꼴은 몇 개까지 사용하는 것이 좋나요?
정해진 숫자는 없지만, 처음 만드는 편집물이라면 제목용과 본문용 두 종류로 시작하는 것이 좋습니다. 작은 안내 문구까지 별도 글꼴로 바꾸기보다 굵기와 색으로 구분해 보세요. 페이지가 길거나 여러 지면으로 이어지는 작업은 사용 규칙을 먼저 적어 두면 일관성을 유지하기 쉽습니다.
제목과 본문을 같은 글꼴로 써도 되나요?
가능합니다. 같은 글꼴의 굵기와 크기를 달리하면 단정하고 안정적인 인상을 만들 수 있습니다. 다만 제목과 본문의 차이가 충분히 보여야 합니다. 제목이 본문보다 조금만 크다면 독자가 어디부터 읽어야 할지 헷갈릴 수 있습니다.
웹 글꼴과 컴퓨터에 설치한 글꼴은 무엇이 다른가요?
설치한 글꼴은 주로 내 컴퓨터에서 작업할 때 사용합니다. 웹 글꼴은 방문자의 기기에서도 같은 글꼴을 보이게 하려고 웹페이지에 연결합니다. 연결이 늦거나 지원되지 않는 기기에서는 다른 글꼴로 바뀔 수 있으므로, 대체 글꼴과 줄바꿈까지 함께 점검해야 합니다.
색채 조합과 글꼴 조합 중 무엇을 먼저 정하나요?
본문 글꼴과 정보의 위계를 먼저 정한 뒤 색을 입히는 순서가 안전합니다. 색이 강하면 글꼴의 문제를 가려서 처음에는 괜찮아 보일 수 있기 때문입니다. 흑백 상태에서 읽기 흐름을 확인하고, 그다음 배경색과 강조색을 추가해 보세요.
글꼴 조합의 기준은 유행하는 이름보다 읽는 사람과 사용 환경에 있습니다. 제목이 눈에 들어오고 본문이 편하게 읽히며, 색과 간격이 그 구조를 돕는다면 화려하지 않아도 좋은 디자인이 됩니다.