SUITE와 SUIT는 어떻게 나눠 쓸까: 제목체·본문체 역할 비교

이름이 비슷한 SUITE와 SUIT를 한 화면에 쓰면 자연스럽게 어울릴 것 같지만, 역할을 나누지 않으면 차이가 약해 보일 수 있다. SUITE는 카탈로그에서 SUIT보다 자폭이 넓은 화면용 고딕으로, SUIT는 UI 본문용 고딕으로 정리돼 있다. 제목과 본문에 실제로 배치해 구별이 충분한지 보자.

새로운 작업 공간
팀의 아이디어를 한곳에서 정리하세요

두 패밀리의 제공 범위를 확인한다

공식 저장소 기준으로 SUIT는 100~900, SUITE는 300~900의 가변·정적 배포 정보를 제공한다. 같은 계열이라고 굵기 범위가 완전히 같지는 않다. 프로젝트가 받을 파일과 CSS 선언을 먼저 확인한다.

획획클럽 카탈로그에는 두 패밀리 모두 상용 한글 중심의 문자 범위가 기록돼 있다. 고정 카피와 사용자 입력을 구분하고 드문 글자에서 폴백이 생기는지 별도로 본다.

SUITE는 제목의 폭과 리듬을 본다

SUITE를 페이지 제목과 섹션 제목에 놓고 넓은 자폭이 주는 호흡을 확인한다. 짧은 문구에서는 여유롭게 보이지만 긴 한글 제목은 예상보다 빨리 줄을 바꿀 수 있다. 가장 긴 제목과 숫자가 섞인 제목을 함께 시험한다.

300부터 900까지 모든 굵기를 쓸 필요는 없다. 섹션 제목 600, 큰 제목 800처럼 두 단계부터 적용하고 본문과 대비가 충분한지 본다.

SUITE 800 제목 · SUIT 400 본문 · SUIT 600 버튼

SUIT는 본문과 작은 UI에서 본다

SUIT를 카드 설명, 라벨, 버튼, 입력 도움말에 적용한다. 12~16px에서 받침과 숫자가 뭉치지 않는지, 좁은 버튼에서 문구가 유지되는지 확인한다. 제목과 같은 계열이라는 이유로 작은 글씨 검증을 건너뛰지 않는다.

본문 400과 강조 600을 먼저 비교하고, 합성 굵기가 들어오지 않도록 실제 제공 파일을 연결한다. 숫자와 영문 약어가 많은 화면에서는 한영 기준선도 살핀다.

같은 화면에서 구별과 통일감을 확인한다

제목을 SUITE, 본문을 SUIT로 바꾼 화면과 SUIT 한 벌로 만든 화면을 나란히 둔다. 두 패밀리 조합이 실제로 정보 위계를 분명하게 만드는지, 이름만 다른 비슷한 선택이 됐는지 판단한다. 색과 여백은 같은 조건으로 둔다.

모바일에서는 SUITE 제목의 줄바꿈 때문에 카드 높이가 늘 수 있다. 크기만 줄이기 전에 최대 줄 수와 문구 편집, 컨테이너 폭을 검토한다.

프로젝트 현황 24건 · 이번 주 마감 7건 · 완료율 68%

폴백과 로딩 실패에서 역할을 지킨다

두 웹폰트가 늦게 오거나 한쪽만 실패하는 상태를 만든다. 제목과 본문의 폭 차이가 갑자기 뒤집히지 않는지, 시스템 폴백에서도 정보 순서가 유지되는지 확인한다. 파일을 둘 쓰는 비용도 네트워크에서 측정한다.

SUITE 상세에서 제목 후보를 확인하고 폰트 시뮬레이터에 같은 랜딩 문구를 올려 보자. 제목 폭, 본문 가독성, 굵기 대비, 실패 상태 네 항목이 조합의 근거가 된다.