한 화면에 제목체와 본문체를 묶는 법: 타이포 토큰 실전 예시

제목체와 본문체를 정한 뒤에도 화면마다 값을 새로 고르면 조합은 금세 흐트러진다. 토큰은 숫자 목록이 아니라 어떤 역할이 어느 패밀리와 굵기를 쓰는지 설명하는 약속이다. SUITE와 SUIT를 display, title, body, label 네 단계로 묶어 보자.

Display 캠페인 제목 · Title 섹션명 · Body 설명 · Label 상태

역할 네 개로 시작한다

display는 캠페인이나 페이지의 가장 큰 제목, title은 반복되는 섹션 제목, body는 읽는 문단, label은 버튼과 상태값으로 정한다. 이름만 보고 크기를 정하지 말고 실제 컴포넌트 예시를 하나씩 연결한다.

같은 16px이라도 body와 label은 행간과 굵기가 다를 수 있다. 토큰에는 family, size, weight, line-height를 함께 묶고 사용 금지 예시도 짧게 남긴다.

패밀리는 역할별로 명시한다

display와 title에는 SUITE, body와 label에는 SUIT를 지정한다. 예외 화면이 생겨도 컴포넌트에서 임의로 바꾸지 말고 토큰을 추가할 만큼 반복되는지 확인한다. 프리텐다드를 폴백 또는 대안으로 쓸 때도 정확한 순서를 기록한다.

두 패밀리의 공식 배포 굵기 범위가 다르므로 존재하지 않는 값이 토큰에 들어가지 않게 한다. 디자인 파일과 CSS가 같은 파일을 쓰는지도 확인한다.

display/SUITE/800 · title/SUITE/600 · body/SUIT/400 · label/SUIT/600

크기와 행간은 실제 문구로 묶는다

display는 긴 제목 두 줄, body는 여섯 줄 문단, label은 가장 긴 버튼으로 시험한다. 역할별 최대 문구를 통과한 값만 토큰에 넣는다. 한 줄 견본에서 예쁜 비율이 실제 화면에서도 안전하다고 가정하지 않는다.

제목 행간은 촘촘하게, 본문 행간은 넉넉하게 둘 수 있지만 받침과 영문 대문자가 잘리지 않는지 확인한다. 숫자 단위와 괄호도 표본에 포함한다.

모바일은 축소 규칙을 따로 둔다

데스크톱 display 값을 비율대로 줄이는 대신 모바일의 최대 줄 수와 카드 폭을 기준으로 새 값을 정한다. title과 body가 같은 크기로 가까워지면 굵기와 여백으로 역할을 보완한다. label은 터치 영역 안에서 잘리지 않아야 한다.

토큰 이름은 같게 유지하고 반응형 값만 바꾸면 컴포넌트 의미가 보존된다. 화면마다 임의 미디어 쿼리를 넣지 않도록 대표 breakpoint와 예외 규칙을 함께 적는다.

모바일 display 36/42 · title 24/31 · body 16/27 · label 14/20

폴백 변화도 토큰 계약에 넣는다

웹폰트가 실패했을 때 사용할 스택과 허용할 줄바꿈 변화를 기록한다. 고정 높이 제목과 버튼은 폴백 폭 변화에 취약하므로 정상·지연·실패 상태를 각각 본다. 토큰은 로딩 상태에서도 역할을 유지해야 한다.

SUIT 상세에서 본문 후보를 확인하고 폰트 시뮬레이터에 네 역할 예문을 넣자. 토큰 표에는 값과 함께 대표 컴포넌트, 최대 문구, 모바일 값, 폴백을 남기면 된다.