[디자인 기초] #012. 타이포그래피 실전: 실패하지 않는 타이포그래피 법칙

 

 

지난 글에서 우리는 타이포그래피가

단순한 장식이 아니라 '읽기의 설계'임을 확인했다.

 

글자는 정보를 담는 그릇이자,

브랜드의 목소리다.

 

개념을 이해했다면 이제는 손을 움직일 차례다.

막상 디자인 툴을 켜고 텍스트를 입력하면 막막해질 때가 있다.

 

"폰트는 뭘 써야 하지?"

"글자 크기는 얼마나 해야 적당하지?"

"왜 내가 쓴 글자는 어설퍼 보일까?"

 

타이포그래피에는 '절대적인 정답'은 없지만,

실패하지 않는 법칙은 존재한다.

 

이번 글에서는 디자인 실무에서 즉시 활용할 수 있는

타이포그래피 운용의 핵심 원칙을 다룬다.

 

---

 

#1. 서체 선택: 목적에 맞는 옷을 입혀라

가장 먼저 할 일은 서체(Font)를 고르는 일이다.

수만 가지 폰트 중에서 무엇을 골라야 할까?

 

먼저, 서체의 종류에 대해 알아야 한다. 

서체는 형태에 따라 가장 기본적으로는

부리(명조, 세리프)와 민부리(고딕, 산세리프)로 나뉜다.

 

하지만 그 외에도 다양한 형태 분류가 있다. 

다른 서비스에서 폰트를 어떻게 구별하는지를 살펴보면

폰트의 성격을 이해하는 데 도움이 된다. 

 

왼쪽 구글폰트 폰트 분류 필터, 중간 어도비 폰트 분류, 오른쪽 산돌 폰트 분류

 

먼저, 구글폰트(https://fonts.google.com/)에서는 다양한 스타일의 폰트들을 구분한다. 

특히 단순한 형태를 넘어, 폰트가 가진 감정이나 느낌으로 분류한다는 점을 알 수 있다. 

어도비(https://fonts.adobe.com/fonts)와

산돌(https://www.sandollcloud.com/fonts) 역시 폰트를 구별하는 방법은

구글에 비해 심플하지만 저마다의 기준으로 세분화된 분류 체계를 가지고 있다.

 

실무에서 가장 많이 쓰이는

세 가지 핵심 분류(민부리, 부리, 손글씨)를 중심으로 그 특징을 알아보자.

 

 

① 민부리 = 산세리프 (Sans-serif / 고딕 계열)

• 특징: 획의 굵기가 일정하고 장식이 없다. 모던하고 깔끔하다.
• 용도: 웹/모바일 UI, 신뢰감을 주는 정보 전달, 젊은 브랜드.
• 실무 팁: 디지털 환경에서는 가독성이 좋은 노토 산스(Noto Sans), 프리텐다드(Pretendard) 같은
  본문용 고딕을 기본으로 쓰면 실패가 없다.

② 부리 = 세리프 (Serif / 명조 계열)

• 특징: 획 끝에 '부리(Serif)'라는 장식이 있고 굵기 변화가 있다. 감성적이고 클래식하다.
• 용도: 책 표지, 감성적인 포스터, 긴 호흡의 인쇄물 본문, 고급스러운 브랜드.
• 실무 팁: 제목에 명조체를 써서 주목도를 높이고, 본문에는 고딕을 섞어 쓰는 방식이 자주 쓰인다.

③ 손글씨 (Calligraphy / Script)

• 특징: 손으로 직접 쓴 듯한 글씨체로 기계적인 느낌이 없는 따스한 감성을 준다.
• 용도: 귀엽고 친근하며 부담스럽지 않고 유머러스한 브랜드.
• 실무 팁: 진지하지 않은 분위기의 이벤트 페이지나, 귀여운 캐릭터와 함께 말풍선 등에 주로 쓰인다.

---

 

#2. 폰트 조합: 과유불급 (Less is More)

초보 디자이너가 가장 많이 하는 실수는 너무 많은 폰트를 섞어 쓰는 것이다.

폰트가 많아지면 디자인은 산만해지고 정보의 위계가 무너진다.

• 최대 2~3가지만 사용하라: 하나의 디자인 작업물에는 1~2개의 폰트 패밀리만 사용하는 것이 가장 안전하다.
• 무게(Weight)로 변화를 주라: 폰트를 바꾸는 대신, 같은 폰트 가족 내에서 굵기(Light, Regular, Bold)를 조절해 위계를 나누는 것이 훨씬 세련되어 보인다. 

왼쪽은 폰트를 과하게 많이 쓴 경우, 오른쪽은 폰트는 1개만 쓰고 굵기만 조절한 경우

 

---

 

#3. 자간과 행간: 글자가 숨 쉴 공간을 주라

아무리 좋은 폰트를 써도 '어딘가 답답하고 촌스러워 보이는' 이유는

90%가 자간(글자 사이 간격)과 행간(줄 사이 간격) 때문이다.

 

① 자간 (Tracking / Letter-spacing)

기본 세팅된 한글 폰트는 글자 사이가 넓은 경우가 많다.

엉성해 보이지 않으려면 자간을 살짝 좁혀야 한다.

• 한글: 보통 -20 ~ -50 정도로 살짝 좁히면 밀도감이 생겨 단단해 보인다.
• 영문: 대문자는 자간을 넓혀주면 고급스럽고, 소문자는 기본값을 유지하거나 살짝만 조절한다.

 

② 행간 (Leading / Line-height)

줄과 줄 사이가 너무 좁으면 읽다가 윗줄과 아랫줄을 놓치게 된다.

반대로 너무 넓으면 문단이 아니라 흩어진 낱말처럼 보인다.

• 황금 비율: 본문 폰트 크기의 140% ~ 160% 정도가 가장 이상적이다. (예: 글자가 30pt라면 행간은 42pt~46pt)
• 글자가 작을수록 행간을 조금 더 넓게 주어야 읽기 편하다.

 

---

 

#4. 정렬: 시선의 흐름을 방해하지 마라

글줄을 어떻게 정렬하느냐에 따라 읽기의 속도가 달라진다.

• 왼쪽 정렬 (Left Align): 가장 기본적이고 가독성이 높다. 긴 본문은 무조건 왼쪽 정렬을 추천한다.
• 가운데 정렬 (Center Align): 시선이 중앙으로 모인다. 짧은 제목이나 초대장, 시적인 문구 등 '주목'이 필요할 때 효과적이다. 긴 글을 가운데 정렬하면 눈이 피로해진다.
• 양끝 정렬 (Justified): 양쪽 끝을 맞추면 박스처럼 정돈되어 보이지만, 단어 사이의 간격이 불규칙하게 벌어질 수 있어 웹 환경에서는 주의해야 한다.

 

---

 

#5. 대비(Contrast): 확실하게 차이를 줘라

지난 글에서 언급한 '위계'를 실현하는 방법은 확실한 대비다.

제목과 본문의 차이를 소심하게 주지 마라.

• 크기 대비: 제목이 본문보다 2배 이상 커도 좋다. 과감하게 키워라.
• 굵기 대비: 제목은 아주 굵게(Bold), 본문은 얇게(Regular) 처리하면 크기가 비슷해도 구분이 간다.
• 명도 대비: 중요한 정보는 검은색(#000), 덜 중요한 정보는 회색(#666)으로 처리하면 자연스럽게 정보의 중요도가 나뉜다.

 

---

 

#6. 마무리하며

타이포그래피 실무는 '감각'보다 '습관'에 가깝다.

자간을 좁히고, 행간을 넉넉히 주고, 폰트 종류를 제한하는 것.

 

이 기본적인 규칙들만 지켜도

여러분의 디자인은 훨씬 더 전문가스럽고 단정해질 것이다.

 

좋은 디자인을 보게 된다면 유심히 관찰해 보자.

어떤 폰트를 썼는지, 행간은 얼마나 비워뒀는지.

 

관찰이 쌓이면 어느새 글자를 다루는 눈이 트이게 될 것이다.

 

물론 지금 트렌드는 타이포그래피의 형식을 파괴하는 것이 유행이긴 하다.

하지만 가장 기본이 되는 규칙을 알아야 형식을 파괴해도 멋들어지게 파괴할 수 있다.

기본을 먼저 지킨 후에 시도해보자.

 

다음 글에서는 타이포그래피를 통해

더 잘 읽히게 만드는 위계(Hierarchy)를 만드는 방법에 대해 알아보자.

 

---

 

 

✦ 탐미스트 | Tammist
디자인의 기초를 탐구하는 공간
실패하지 않는 타이포그래피 법칙

---

 

 

다음 글

[디자인 기초] #013. 타이포그래피 위계: 시선을 이끄는 기술

 

 

---

 

디자인 기초 시리즈

#001. 디자인이란? https://tammist.tistory.com/71

#002. 좋은 디자인을 만드는 생각의 과정 https://tammist.tistory.com/72

#003. 좋은 디자인의 시각 원리 https://tammist.tistory.com/73

#004. 시각 언어의 7요소 https://tammist.tistory.com/75

#005. 시각 언어를 다루는 방법 https://tammist.tistory.com/78

#006. 조형 원리의 기본 https://tammist.tistory.com/79

#007. 감각을 훈련하는 법 https://tammist.tistory.com/80

#008. 색의 원리 https://tammist.tistory.com/81

#009. 색의 조화 https://tammist.tistory.com/82

#010. 색채 심리 https://tammist.tistory.com/83

#011. 타이포그래피 기본 https://tammist.tistory.com/84

#012. 타이포그래피 실전 (현재 글)

#013. 타이포그패피 위계 https://tammist.tistory.com/86

#014. 가독성의 법칙 https://tammist.tistory.com/87

#015. 레이아웃과 그리드 https://tammist.tistory.com/88

 

 

---