Typography

타이포그래피는 모든 디지털 채널에서 텍스트를 명확하고 일관되며 접근 가능하게 표현하기 위한 핵심 요소예요. 재사용 가능한 토큰을 정의해서 제목, 본문 등 다양한 텍스트 스타일을 체계적으로 관리하고, 시각적 계층 구조와 일관성을 유지해요.

개요Copy Anchor Link

타이포그래피 시스템은 폰트 크기, 줄 높이, 폰트 두께를 각각 토큰으로 정의해요. 이 토큰들은 두 가지 유형의 텍스트 스타일로 조합돼요.

• 스케일 텍스트 스타일 — t5Regular, t1Bold 처럼 폰트 크기·줄 높이·폰트 두께를 축약한 조합이에요. 제품 전반에 텍스트를 빠르게 적용할 수 있어요.
• 시맨틱 텍스트 스타일 — screenTitle, articleBody 처럼 특정 역할이나 사용 상황에 맞게 구성한 스타일이에요. 디자인 의도를 담아 UI 전반에 일관성을 부여해요.

Tailwind에서는 text-t4 하나로 크기와 줄 높이가 함께 적용되고, 두께는 font-regular · font-medium · font-bold 로 따로 지정해요.

<p className="text-t4 font-medium">t4Medium</p>
<h1 className="text-t9 font-bold">화면 제목</h1>

글꼴Copy Anchor Link

사용자의 기기 환경을 고려해 대부분 각 플랫폼의 시스템 글꼴을 사용해요. 다양한 기기와 운영 체제에서 일관된 경험과 가독성을 보장해요.

Windows에서는 시스템 글꼴인 맑은 고딕과 Segoe UI가 디자인 의도와 어긋나는 경우가 많아 Pretendard 를 사용해요. 사용자 기기에 Pretendard가 없고 제품이 웹폰트를 준비하지 않았다면 맑은 고딕과 Segoe UI로 표시돼요.

글꼴 스택은 브랜드 토큰 --rb-font-sans 로 정의되고, Tailwind font-sans 로 사용해요.

폰트 크기와 줄 높이Copy Anchor Link

폰트 크기 토큰은 접근성과 확장성을 위해 상대 단위(rem)를 사용해요. 기본 설정 기준 1rem = 16px 로 계산돼요. 줄 높이 토큰은 적절한 수직 리듬과 가독성을 보장하며, 같은 번호의 폰트 크기 토큰과 함께 쓰는 것을 권장해요.

일반적으로 t1–t5는 본문 및 장식적인 텍스트에, t6–t10은 제목 및 주요 텍스트에 사용해요. t11–t14는 큰 화면을 위한 대형 제목 스케일로, sm breakpoint 이상에서 사용하는 것을 권장해요.

StaticCopy Anchor Link

Static 텍스트 스타일은 px 단위의 Static 토큰을 사용해서 사용자 폰트 크기 설정(폰트 스케일링)에 반응하지 않아요. 공간이 엄격하게 고정된 배지·탭 라벨처럼 꼭 필요한 경우에만 사용해요.

폰트 두께Copy Anchor Link

명확한 시각적 대비와 계층 구조를 위해 세 가지 폰트 두께 토큰을 정의해요.

사용 가이드라인Copy Anchor Link

• 일관성 유지 — 모든 경우에 정의된 토큰을 사용해 일관된 타이포그래피를 유지해요.
• 명확한 계층 구조 — 제목과 본문 등의 계층을 명확하게 구분해서 사용자가 정보를 효율적으로 인식하게 해요.
• 상대 단위 사용 — 고정 단위(px) 대신 rem 같은 상대 단위를 사용해서 사용자의 폰트 크기 설정을 존중해요.
• 시맨틱 우선 — 화면 제목, 게시물 본문처럼 특정 역할이 필요한 경우 시맨틱 텍스트 스타일로 디자인 의도를 함께 담아요.