폰트보다 먼저 문장 역할을 구분합니다
제목, 부제, 본문, 캡션, 버튼 문구는 모두 다른 역할을 합니다. 같은 폰트를 써도 역할에 따라 크기와 굵기, 줄간격이 달라져야 합니다.
입문자는 제목을 크게 만드는 것에 집중하지만, 실제로는 본문이 편하게 읽히는지가 더 중요합니다. 본문이 피곤하면 사용자는 제목이 좋아도 페이지를 오래 읽지 않습니다.
굵기는 강조가 아니라 구조입니다
굵은 글자는 눈에 잘 띄지만 많이 쓰면 화면 전체가 무거워집니다. 특히 한글은 획이 많기 때문에 굵기를 과하게 쓰면 줄 사이가 답답해 보일 수 있습니다.
제목은 강하게, 소제목은 명확하게, 본문은 오래 읽어도 피곤하지 않게 잡는 것이 좋습니다. 강조가 필요한 단어만 굵게 처리하고 문장 전체를 계속 굵게 만들지 않는 편이 안정적입니다.
줄간격은 글의 속도를 만듭니다
짧은 버튼 문구에는 촘촘한 줄간격이 어울리지만, 긴 본문에는 더 넉넉한 줄간격이 필요합니다. 줄간격이 좁으면 다음 줄로 넘어갈 때 시선이 흔들리고, 너무 넓으면 문단이 흩어져 보입니다.
정보형 글에서는 본문 줄간격을 넉넉하게 두고, 문단 사이 간격을 확실히 주는 편이 좋습니다. 독자는 긴 글을 한 덩어리로 읽지 않고 작은 단위로 끊어 읽기 때문입니다.
모바일에서는 제목 줄바꿈을 먼저 확인합니다
데스크톱에서 멋있던 큰 제목이 모바일에서 한 단어씩 끊기면 완성도는 바로 떨어집니다. 제목은 단순히 작게 줄이는 것이 아니라 의미 단위로 줄바꿈될 수 있어야 합니다.
중요한 제목은 HTML에서 줄 단위를 나누거나, CSS의 `word-break: keep-all`과 `text-wrap: balance`를 활용해 어색한 줄바꿈을 줄이는 방식이 필요합니다.
타입 스케일 예시: 제목과 본문 사이의 거리 정하기
랜딩 페이지의 강의 소개 영역을 기준으로 보면, 제목은 눈에 띄지만 본문은 오래 읽어도 피곤하지 않아야 합니다. 글꼴을 바꾸기 전에 각 문장의 역할을 나누면 크기와 간격의 기준이 빨리 잡힙니다.
같은 폰트라도 줄간격과 문단 간격이 달라지면 화면의 속도가 완전히 달라집니다. 입문 단계에서는 새 폰트를 찾기보다 역할별 간격표를 먼저 만드는 편이 안정적입니다.
역할별 타이포그래피 기준
| 페이지 제목 | 한 화면에서 한 번만 강하게 사용하고 두 줄 이상이면 의미 단위로 나눕니다. |
|---|---|
| 섹션 제목 | 본문보다 굵게 처리하되 카드 제목과 혼동되지 않게 간격을 둡니다. |
| 본문 | 긴 문단은 줄간격을 넉넉하게 두고 한 문단에 하나의 설명만 넣습니다. |
| 캡션 | 정보 보조 역할이므로 작게 쓰되 대비를 너무 낮추지 않습니다. |
수정 기록 예시
포트폴리오에는 “Pretendard를 사용했다”보다 “본문 줄간격을 넓혀 모바일에서 한 문단을 두 번에 나누어 읽게 했다”는 기록이 더 설득력 있게 남습니다.
- 제목과 본문의 크기 차이가 충분한가?
- 본문 줄 길이가 모바일에서 과도하게 길거나 짧지 않은가?
- 굵은 글자가 강조점에만 제한되어 있는가?
- 캡션과 라벨이 작아도 기능을 잃지 않는가?
작성자 검수 메모
타이포그래피는 감각처럼 보이지만 실제로는 역할을 나누는 작업입니다. 화면을 오래 읽는 사람의 피로를 줄이는 것이 가장 중요한 기준입니다.
이 글은 제목, 소제목, 본문, 캡션의 관계를 먼저 정하고 폰트 선택은 그 다음에 다루는 흐름으로 정리했습니다.
현장 적용 노트
타입 스케일을 정할 때는 데스크톱 한 화면만 보지 말고 모바일 제목, 카드 제목, 긴 본문을 같은 기준으로 함께 봅니다. 한 위치에서만 보기 좋은 크기는 실제 서비스 화면이 늘어날수록 유지하기 어렵습니다.
디자인 입문자는 폰트 이름에 집중하기 쉽지만, 실무에서는 본문이 오래 읽히는지가 더 중요합니다. 같은 폰트라도 문단 폭, 줄간격, 문단 사이 간격을 어떻게 잡는지에 따라 완성도가 크게 달라집니다.
포트폴리오 기록 포인트
작업 기록에는 사용한 폰트보다 역할별 수치를 남기는 편이 좋습니다. 제목, 소제목, 본문, 캡션의 크기와 줄간격을 표로 남기면 다음 화면을 만들 때 같은 기준을 반복할 수 있습니다.
읽기 밀도 테스트
타입 시스템은 예쁜 샘플 문장보다 실제 본문에서 검증해야 합니다. 안내문, 후기, 가격 설명처럼 길이가 다른 문장을 같은 폭에 넣어보고 눈이 멈추는 지점을 표시하면 간격 문제가 보입니다. 줄간격이 좁으면 문단이 한 덩어리로 보이고, 문단 간격이 넓으면 관계가 끊겨 보이므로 두 값을 따로 조정해야 합니다.
- 모바일 기준으로 한 줄 18자 안팎에서 문장이 과하게 끊기지 않는지 봅니다.
- 소제목 위 간격은 아래 간격보다 넉넉하게 두어 이전 문단과 분리합니다.
- 숫자 정보는 본문과 같은 크기라도 굵기나 정렬로 찾기 쉽게 만듭니다.
타입 시스템을 유지하는 방법
타입 시스템은 한 번 정하고 끝나는 규칙이 아닙니다. 새 섹션이나 카드가 추가될 때 기존 역할 안에 들어가는지 먼저 확인해야 합니다. 매번 새 크기를 만들면 화면은 금방 복잡해지고, 나중에는 어떤 크기가 제목인지 구분하기 어려워집니다.
새 스타일이 필요하다고 느껴질 때는 기존 제목, 본문, 캡션 중 무엇으로 해결할 수 있는지 먼저 비교합니다. 그래도 부족할 때만 새 스타일을 추가하는 편이 안정적입니다.