Typo

디자인 토큰 기반 시맨틱 타이포그래피 컴포넌트. variant prop으로 fontSize, fontWeight, lineHeight를 한 번에 적용합니다.

개요

Typo는 타입 스케일을 컴포넌트로 추상화합니다. variant prop 하나로 디자인 시스템의 fontSize, fontWeight, lineHeight를 토큰에서 가져옵니다. 기본 요소는 <p>이며, render prop으로 시맨틱 HTML 태그를 지정할 수 있습니다.

반응형 variant도 지원합니다. breakpoint마다 다른 타입 스케일을 쓰고 싶다면 variant에 객체를 전달하세요.

언제 사용하나요

페이지 제목, 섹션 제목 등 heading 계층
본문, 설명, 안내 텍스트 등 body 텍스트
날짜, 메타 정보 등 캡션
타입 스케일 안에 있는 텍스트라면 Typo를 기본으로 선택하세요.

언제 사용하면 안 되나요

버튼 라벨 → Button.Text가 내부에서 처리
입력 필드 라벨 → Label 컴포넌트
타입 스케일에 없는 커스텀 font-size → Box에 $css={{ fontSize: '...' }} 직접 지정

접근성

render prop으로 시각적 variant와 HTML 태그를 독립적으로 지정할 수 있습니다. 시각적으로 큰 텍스트가 필요해도 문서 구조에 맞는 heading 레벨을 유지하세요.

<Typo render={<h2 />} variant="$heading-4">섹션 제목</Typo>

<h2> 태그를 사용하되 시각적으로는 $heading-4 크기를 적용하는 식으로, 시각 표현과 시맨틱 구조를 분리할 수 있습니다.

Usage

기본 사용법

<VStack $css={{ gap: '$spacing-200' }}>
<Typo variant="$heading-3">Heading 3 제목</Typo>
<Typo variant="$body-1">본문 텍스트입니다. 기본 요소는 p 태그입니다.</Typo>
<Typo variant="$caption-1">캡션 텍스트</Typo>
</VStack>

Heading variants 전체

$heading-1이 가장 작고(12px) $heading-7이 가장 큽니다(40px). 숫자가 커질수록 시각적 크기도 커집니다.

<VStack $css={{ gap: '$spacing-300' }}>
<Typo variant="$heading-1">Heading 1 — 12px / 500</Typo>
<Typo variant="$heading-2">Heading 2 — 14px / 500</Typo>
<Typo variant="$heading-3">Heading 3 — 16px / 500</Typo>
<Typo variant="$heading-4">Heading 4 — 20px / 500</Typo>
<Typo variant="$heading-5">Heading 5 — 24px / 500</Typo>
<Typo variant="$heading-6">Heading 6 — 32px / 500</Typo>
<Typo variant="$heading-7">Heading 7 — 40px / 500</Typo>
</VStack>

Body / Caption variants

Body도 숫자가 커질수록 시각적 크기가 커집니다($body-1 12px → $body-4 18px). Caption은 $caption-1이 가장 작습니다(11px).

<VStack $css={{ gap: '$spacing-300' }}>
<Typo variant="$body-1">Body 1 — 12px / 400 (가장 작은 본문)</Typo>
<Typo variant="$body-2">Body 2 — 14px / 400 (일반 본문)</Typo>
<Typo variant="$body-3">Body 3 — 16px / 400 (큰 본문)</Typo>
<Typo variant="$body-4">Body 4 — 18px / 400 (가장 큰 본문)</Typo>
<Typo variant="$caption-1">Caption 1 — 11px / 400 (가장 작은 캡션)</Typo>
<Typo variant="$caption-2">Caption 2 — 12px / 400 (캡션)</Typo>
</VStack>

render prop으로 시맨틱 HTML

render prop으로 렌더링 요소를 교체합니다. 시각적 크기와 HTML 태그가 반드시 일치할 필요 없습니다.

<VStack $css={{ gap: '$spacing-300' }}>
<Typo render={<h1 />} variant="$heading-2">h1 태그, heading-2 크기</Typo>
<Typo render={<h2 />} variant="$heading-4">h2 태그, heading-4 크기</Typo>
<Typo render={<span />} variant="$caption-2">span 태그, caption-2 크기</Typo>
<Typo render={<label />} variant="$body-3">label 태그, body-3 크기</Typo>
</VStack>

반응형 variant

breakpoint마다 다른 타입 스케일을 적용할 때 variant에 객체를 전달합니다.

<Typo
render={<h1 />}
variant={{ mobile: '$heading-4', tablet: '$heading-2', desktop: '$heading-1' }}
>
반응형 제목 텍스트
</Typo>

색상 커스텀 ($css)

$css의 color로 토큰 기반 색상을 지정합니다.

<VStack $css={{ gap: '$spacing-200' }}>
<Typo variant="$body-1" $css={{ color: '$text-1' }}>기본 텍스트 색상</Typo>
<Typo variant="$body-1" $css={{ color: '$text-3' }}>보조 텍스트 색상</Typo>
<Typo variant="$body-1" $css={{ color: '$support-error-3' }}>에러 텍스트</Typo>
<Typo variant="$body-1" $css={{ color: '$support-success-3' }}>성공 텍스트</Typo>
</VStack>

$css로 추가 스타일

$css를 통해 spacing, background, border 등을 함께 적용할 수 있습니다.

<Typo
variant="$body-2"
$css={{
  color: '$text-2',
  padding: '$spacing-400',
  bgColor: '$background-2',
  rounded: '$radius-200',
  marginBottom: '$spacing-300',
}}
>
배경과 패딩이 있는 본문 텍스트
</Typo>

Props

공통 Props — $css, render, className, style는 모든 레이아웃 컴포넌트에서 지원됩니다. useRenderComponent 가이드 →

<p> 요소의 모든 네이티브 속성을 지원합니다. render prop으로 다른 요소를 렌더링할 수 있습니다.

Prop

Type

스타일

TypoVariant

카테고리	Variant
Heading	`$heading-1`, `$heading-2`, `$heading-3`, `$heading-4`, `$heading-5`, `$heading-6`, `$heading-7`
Body	`$body-1`, `$body-2`, `$body-3`, `$body-4`
Caption	`$caption-1`, `$caption-2`

각 variant는 내부적으로 resolveResponsive + typoPropertyMap을 통해 fontSize, fontWeight, lineHeight로 변환됩니다.

FontVariant

Variant	설명
`$sans`	기본 sans-serif 폰트 (현재 유일한 값)

각 variant에 대응하는 CSS 토큰 값은 Typography 토큰 문서 →를 참고하세요.

On this page