Typography
SPI 디자인 시스템의 타이포그래피 스케일, 합성 프리셋, 사용 가이드입니다.
Typography
SPI는 Pretendard 폰트를 기본으로 사용하며, Primitive(크기/굵기/행간/자간) → Semantic(합성 프리셋) 구조로 타이포그래피를 관리합니다.
Font Family
| 토큰 | 값 |
|---|---|
typography.primitive.font-family.base | Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif |
Tailwind에서는 font-sans 클래스를 사용하면 자동으로 Pretendard가 적용됩니다.
Font Size Scale
px 고정값으로 구성된 타입 스케일입니다.
font-size.11
11px
text-[11px]The quick brown fox jumps over the lazy dog
초소형 텍스트 (지양 권장)
font-size.12
12px
text-[12px]The quick brown fox jumps over the lazy dog
캡션, 뱃지, 각주
font-size.14
14px
text-[14px]The quick brown fox jumps over the lazy dog
보조 텍스트, 메뉴
font-size.16
16px
text-[16px]The quick brown fox jumps over the lazy dog
기본 본문 (브라우저 기본값)
font-size.18
18px
text-[18px]The quick brown fox jumps over the lazy dog
강조 본문
font-size.20
20px
text-[20px]The quick brown fox jumps over the lazy dog
소제목
font-size.24
24px
text-[24px]The quick brown fox jumps over the lazy dog
섹션 제목
font-size.32
32px
text-[32px]The quick brown fox jumps over the lazy dog
대제목
font-size.40
40px
text-[40px]The quick brown fox jumps over the lazy dog
섹션 타이틀 (매우 강조)
font-size.48
48px
text-[48px]The quick brown fox jumps over the lazy dog
프로모션, 랜딩 최상단
Font Weight & Line Height & Letter Spacing
Font Weight
| 토큰 | 값 | Tailwind | 용도 |
|---|---|---|---|
font-weight.regular | 400 | font-normal | 본문 기본 |
font-weight.medium | 500 | font-medium | 레이블, 캡션 강조 |
font-weight.bold | 700 | font-bold | 제목, 버튼 텍스트 |
Line Height
| 토큰 | 값 | 용도 |
|---|---|---|
line-height.14 | 14px | Caption SM |
line-height.16 | 16px | Caption, Mono XS |
line-height.20 | 20px | Body SM, Mono SM |
line-height.24 | 24px | Body MD, Mono MD |
line-height.28 | 28px | Body LG, Heading SM |
line-height.32 | 32px | Heading MD |
line-height.44 | 44px | Heading LG |
line-height.52 | 52px | Display MD |
line-height.64 | 64px | Display LG |
Letter Spacing
| 토큰 | 값 | 용도 |
|---|---|---|
letter-spacing.tight-2 | -0.02em | Heading LG |
letter-spacing.tight-1_5 | -0.015em | Heading MD |
letter-spacing.tight-1 | -0.01em | Heading SM |
letter-spacing.tight-0_5 | -0.005em | Body LG, MD |
letter-spacing.normal | 0em | Body SM, Caption |
Semantic Typography (합성 프리셋)
Font Size + Weight + Line Height + Letter Spacing + Family를 합성한 일체형 토큰입니다. 디자이너가 "heading-lg" 하나만 지정하면 개발자가 모든 속성을 한번에 적용할 수 있습니다.
display-lg
48px, weight 700, lh 64px
typo-display-lgThe quick brown fox jumps over the lazy dog
프로모션, 랜딩 최상단
display-md
40px, weight 700, lh 52px
typo-display-mdThe quick brown fox jumps over the lazy dog
섹션 타이틀 (매우 강조)
heading-lg
32px, weight 700, lh 44px, ls -2%
typo-heading-lgThe quick brown fox jumps over the lazy dog
페이지 대제목
heading-md
24px, weight 700, lh 32px, ls -1.5%
typo-heading-mdThe quick brown fox jumps over the lazy dog
페이지 중제목
heading-sm
20px, weight 700, lh 28px, ls -1%
typo-heading-smThe quick brown fox jumps over the lazy dog
섹션/카드 제목
body-lg
18px, weight 400, lh 28px, ls -0.5%
typo-body-lgThe quick brown fox jumps over the lazy dog
강조 본문, 큰 버튼
body-md
16px, weight 400, lh 24px, ls -0.5%
typo-body-mdThe quick brown fox jumps over the lazy dog
기본 본문 (Default)
body-sm
14px, weight 400, lh 20px
typo-body-smThe quick brown fox jumps over the lazy dog
리스트, 설명글, 인풋창
caption
12px, weight 400, lh 16px
typo-captionThe quick brown fox jumps over the lazy dog
부연 설명, 뱃지, 태그
caption-sm
11px, weight 400, lh 14px
typo-caption-smThe quick brown fox jumps over the lazy dog
초소형 텍스트 (지양 권장)
mono-md
16px, weight 400, lh 24px
typo-mono-mdThe quick brown fox jumps over the lazy dog
대시보드 수치, 로그 데이터
mono-sm
14px, weight 400, lh 20px
typo-mono-smThe quick brown fox jumps over the lazy dog
테이블 숫자, 타임스탬프
mono-xs
12px, weight 400, lh 16px
typo-mono-xsThe quick brown fox jumps over the lazy dog
그래프 축 레이블, 시스템 로그
사용법
Tailwind 유틸리티 클래스 (권장)
@seoulpi/tokens를 임포트하면 다음 유틸리티가 자동으로 등록됩니다:
<h1 class="typo-display-lg">히어로 제목</h1>
<h2 class="typo-heading-lg">페이지 대제목</h2>
<p class="typo-body-md">기본 본문 텍스트입니다.</p>
<span class="typo-caption">캡션 레이블</span>
<code class="typo-mono-sm">1,234,567</code>CSS Variable 직접 사용
.my-heading {
font-family: var(--typography-primitive-font-family-base);
font-size: var(--typography-primitive-font-size-32);
font-weight: var(--typography-primitive-font-weight-bold);
line-height: var(--typography-primitive-line-height-44);
letter-spacing: var(--typography-primitive-letter-spacing-tight-2);
}