Overview

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

개요

SEED 타이포그래피 시스템은 폰트 크기, 줄 높이, 폰트 두께 각각을 토큰으로 정의합니다. 이 토큰들은 두 가지 유형의 텍스트 스타일로 조합됩니다:

• 스케일 텍스트 스타일: t5Regular, t1Bold와 같이 폰트 크기, 줄 높이, 폰트 두께를 축약한 조합입니다. 이 스타일은 제품 전반에 일반적인 텍스트 적용을 빠르게 할 수 있도록 도와줍니다.
• 시맨틱 텍스트 스타일: screenTitle, articleBody와 같이 특정 역할이나 사용 상황에 맞게 구성된 텍스트 스타일입니다. 이 스타일은 디자인 의도를 내포하여 사용자 인터페이스 전반에 일관성을 부여합니다.

글꼴

사용자의 디바이스 환경을 고려하여, 시스템 폰트를 사용합니다. 이는 다양한 국가와 문화권에서 사용되는 여러 기기 및 운영 체제에서 일관된 사용자 경험과 가독성을 보장합니다.

웹에서는 다음과 같은 폰트 스택을 적용할 수 있습니다:

font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
  "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

타이포그래피 토큰

폰트 크기 토큰

폰트 크기 토큰은 접근성과 확장성을 위해 상대 단위(rem)를 사용합니다. 이 값들은 기본 설정 기준 1rem = 16px로 계산됩니다.

줄 높이 토큰

줄 높이 토큰은 적절한 수직 리듬과 가독성을 보장합니다. 동일한 순서의 폰트 크기 토큰과 함께 사용하는 것을 권장합니다.

폰트 두께 토큰

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

타이포그래피 컴포넌트

텍스트 스타일은 토큰들을 조합하여 사용 가능한 컴포넌트로 취급되며, 두 가지 주요 범주로 나뉩니다:

시맨틱 텍스트 스타일

시맨틱 스타일은 UI 내 특정 역할에 맞게 사용됩니다. 이를 통해 텍스트 요소가 일관된 모양과 기능을 가지며, 다음과 같은 역할에 맞게 디자인됩니다:

textStyle=screenTitle

• 화면에 크게 표시되는 주요 제목이나 타이틀에 사용합니다.

textStyle=articleBody

• 게시물이나 콘텐츠 중심 섹션의 본문 텍스트에 사용합니다.

스케일 텍스트 스타일

스케일 스타일은 폰트 크기, 줄 높이, 폰트 두께를 축약하여 빠르게 적용할 수 있습니다.

예를 들어, t4Medium는 폰트 크기가 t4이고 폰트 두께가 medium인 텍스트 스타일을 나타냅니다.

일반적으로 t1-t5는 본문 및 장식적인 텍스트에 사용되며, t6-t10은 제목 및 주요 텍스트에 사용됩니다.

스케일 텍스트 스타일 중 Static 텍스트 스타일은 Static 폰트 크기 토큰과 Static 줄 높이 토큰을 사용하여 폰트 스케일링에 반응하지 않는 텍스트 스타일을 제공합니다.

textStyle=t4Regular

textStyle=t4StaticRegular

• 폰트 스케일링에 반응하지 않도록 static text size와 static line height 토큰을 사용합니다.

사용 가이드라인

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

링크