Skip to Content
FoundationsIcignalTypography (타이포그래피)

Typography (타이포그래피)

iCignal의 타이포그래피는 Foundation과 동일한 토큰을 사용하며, “iCignal Sans” 폰트 패밀리를 기본으로 사용합니다.

Foundation 상속

iCignal은 Foundation의 타이포그래피 토큰을 모두 상속합니다:

@import "@vortex/ui-foundation/theme";

Font Size

Foundation과 동일한 7단계 폰트 크기를 사용합니다.

토큰크기사용 사례Tailwind Class
xs12pxCaption, Helper Texttext-xs
sm14pxSmall Text, Labeltext-sm
base16pxBody Text (기본)text-base
lg18pxLead Paragraphtext-lg
xl20pxHeading 3text-xl
2xl24pxHeading 2text-2xl
3xl32pxHeading 1, Hero Titletext-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