단일 굵기 폰트 조판법: 크기·여백·명도로 제목과 본문 나누기

단일 굵기 폰트 조판은 선택지가 적어서 쉽다고 느껴지지만, 위계를 만드는 책임이 레이아웃으로 옮겨 간다. 고운돋움 400 한 단계로 제목과 본문, 라벨을 나눌 때는 합성 bold 대신 크기와 여백을 계획해야 한다. 강조 상태가 반복되는 실제 화면을 써야 체계의 한계도 일찍 보인다.

작은 전시의 큰 기록
9월 29일부터 10월 12일까지

본문을 먼저 안정시킨다

읽어야 할 문단의 크기와 행간, 폭을 먼저 정한다. 제목부터 크게 만들면 나중에 본문을 남은 공간에 끼워 넣게 된다. 실제 길이의 문단을 두세 개 놓고 모바일에서도 읽히는 값을 기준점으로 삼는다.

고운돋움과 고운바탕처럼 같은 크기에서도 문장 폭과 획 인상이 다른 후보를 비교할 수 있다. 현재 글의 성격에 맞는 본문 기준을 정한 뒤 나머지 역할을 올린다.

제목은 크기와 앞 여백으로 올린다

제목을 본문보다 크게 하고 위쪽 여백을 넓혀 새 구획의 시작을 알린다. 아래 여백은 본문과의 관계가 끊기지 않을 만큼만 둔다. 같은 400이어도 크기와 공간이 충분히 다르면 제목으로 읽힌다.

두 줄 제목에서는 행간을 본문보다 좁게 잡을 수 있지만 받침과 윗줄 획이 닿지 않는지 확인한다. 짧은 제목 한 개로 값을 정하지 말고 가장 긴 제목을 함께 본다.

제목 34/40 · 본문 17/29 · 캡션 13/20

보조 정보는 명도와 위치로 내린다

날짜, 카테고리, 출처는 본문과 같은 굵기라도 크기를 줄이고 본문과 다른 행에 둔다. 명도를 낮출 때는 배경과의 대비가 충분한지 실제 화면에서 읽는다. 흐리게 만드는 것이 곧 보조 정보 설계는 아니다.

아이콘 옆 라벨은 기준선을 맞추고 터치 영역을 유지한다. 작은 텍스트를 위계의 마지막 단계로 쓸 때는 접근성 확대에서 역할이 뒤집히지 않는지 본다.

강조는 위치와 문장으로 해결한다

본문 안의 핵심 문장을 별도 인용 블록으로 옮기거나 앞뒤 여백을 둔다. 합성 bold, 밑줄, 색을 동시에 쓰면 강조가 과해진다. 한 가지 신호로 충분한지 흑백 시안에서 먼저 본다.

버튼과 링크는 컴포넌트 모양과 위치가 역할을 설명한다. 텍스트 굵기를 추가하지 않아도 클릭 가능한 요소로 인식되는지 상태 변화와 함께 확인한다.

한 문장을 남기고, 나머지는 충분한 여백으로 읽게 한다.

상태가 많아지면 조합을 검토한다

정상·주의·오류·성공이 한 화면에 반복되고 제목 단계도 많다면 단일 굵기 체계가 복잡해질 수 있다. 그때는 역할 일부에 다른 패밀리나 여러 굵기의 본문 폰트를 도입한다. 처음부터 예외를 숨기지 말고 경계로 문서화한다.

고운돋움 상세에서 한 굵기 조건을 확인한 뒤 폰트 시뮬레이터에 제목·본문·캡션을 넣자. 크기, 여백, 위치, 명도를 한 단계씩 적용해 어떤 변화가 위계를 만들었는지 남기면 재사용할 수 있다.