Typography (타이포그래피)
iCignal의 타이포그래피는 Foundation과 동일한 토큰을 사용하며, “iCignal Sans” 폰트 패밀리를 기본으로 사용합니다.
Foundation 상속
iCignal은 Foundation의 타이포그래피 토큰을 모두 상속합니다:
@import "@vortex/ui-foundation/theme";Font Size
Foundation과 동일한 7단계 폰트 크기를 사용합니다.
| 토큰 | 크기 | 사용 사례 | Tailwind Class |
|---|---|---|---|
| xs | 12px | Caption, Helper Text | text-xs |
| sm | 14px | Small Text, Label | text-sm |
| base | 16px | Body Text (기본) | text-base |
| lg | 18px | Lead Paragraph | text-lg |
| xl | 20px | Heading 3 | text-xl |
| 2xl | 24px | Heading 2 | text-2xl |
| 3xl | 32px | Heading 1, Hero Title | text-3xl |
Font Family
iCignal은 “iCignal Sans” 폰트 패밀리를 사용합니다.
font-family: "iCignal Sans", system-ui, sans-serif;⚠️ 변경 금지
iCignal 브랜드 가이드를 준수해야 하므로 폰트 패밀리 변경은 금지됩니다.
실전 예제
import { Button } from "@vortex/ui-icignal";
export default function Example() {
return (
<div className="max-w-2xl mx-auto p-lg">
<h1 className="text-3xl font-bold text-text-primary mb-md">
iCignal Article Title
</h1>
<p className="text-lg text-text-secondary mb-xl">
Lead paragraph with iCignal Sans font family
</p>
<p className="text-base text-text-primary mb-md">
Body text using Foundation typography tokens with iCignal branding
</p>
<Button variant="primary">Read More</Button>
</div>
);
}다음 단계
Last updated on