타이포그래피 (Typography)

타이포그래피는 정보를 읽고 이해하는 방식을 결정하는 핵심 시각 요소로, 글자의 크기와 굵기, 행간, 자간, 정렬 방식 등을 통해 콘텐츠의 구조와 우선순위를 명확하게 보여줘요. 잘 설계된 타이포그래피 체계는 사용자가 중요한 정보를 빠르게 인식하고 자연스럽게 읽어 내려갈 수 있도록 돕고, 화면 전반의 분위기와 브랜드의 성격을 일관되게 전달하는 역할을 해요.

Display

디스플레이(Display)는 히어로, 랜딩 페이지, 배너 등 시각적 임팩트가 필요한 영역에 사용하는 대형 텍스트에 사용해요.

Display-xlarge

Display-large

Display-medium

Display-small

Display-xsmall

StyleSize(pc)Size(tablet)Size(mobile)Font weightLine height
xlarge60px48px36pxbold120%
large52px42px32pxbold120%
medium44px36px28pxbold120%
small38px34px26pxbold120%
xsmall34px30px24pxbold120%

Heading

제목(Heading)은 섹션 제목, 카드 제목, 리스트 타이틀 등 콘텐츠의 위계를 나타내는 텍스트로 HTML 시멘틱 태그(h1~h6)의 스타일은 이 디자인 시스템에 포함되지 않으며, 각 프로젝트에서 텍스트 스타일 h1~h6 토큰을 활용하여 개별 설정해서 사용해요.

Heading-xlarge

Heading-large

Heading-medium

Heading-small

Heading-xsmall

Heading-xxsmall

StyleSize(pc)Size(tablet)Size(mobile)Font weightLine height
xlarge32px28px24pxbold120%
large28px24px20pxbold120%
medium24px20px18pxbold120%
small20px18px16pxbold120%
xsmall16px16px14pxbold120%
xxsmall14px14px13pxbold120%

Body

본문(Body)은 문단, 설명문, 리스트, 입력 안내 등 사용자가 실제로 읽고 이해해야 하는 주요 콘텐츠에 사용하는 기본 텍스트예요. 가독성과 정보 전달력을 가장 중요하게 고려하며, 다양한 화면 크기와 사용 환경에서도 편안하게 읽을 수 있도록 적절한 크기, 행간, 굵기를 유지해요. Body 스타일은 콘텐츠의 성격과 중요도에 따라 여러 단계로 구분해 사용하며, 화면 전반의 정보 밀도와 읽기 흐름을 안정적으로 만드는 역할을 해요.

Body-xlarge

Body-xlarge-bold

Body-large

Body-large-bold

Body-medium

Body-medium-bold

Body-small

Body-small-bold

Body-xsmall

Body-xsmall-bold

StyleSize(pc)Size(tablet)Size(mobile)Font weightLine height
xlarge20px20px18pxregular150%
xlarge-bold20px20px18pxsemibold150%
large18px18px16pxregular160%
large-bold18px18px16pxsemibold160%
medium16px16px14pxregular160%
medium-bold16px16px14pxsemibold160%
small14px14px13pxregular160%
small-bold14px14px13pxsemibold160%
xsmall13px13px12pxregular160%
xsmall-bold13px13px12pxsemibold160%