타이포그래피
Foundation heading, title, body, caption 스타일 위의 시맨틱 텍스트 역할.
Text에 시맨틱 역할(headingMd, bodyMd, labelSm)을 사용하세요. 각 역할은 typographys의 Foundation 프리셋을 별칭합니다. 제품 UI에서 원시 fontSize나 body2 같은 Foundation 키를 넘기지 마세요.
| 역할 패밀리 | 예시 | 일반적인 용도 |
|---|---|---|
| Display | displayLg, displayMd, displaySm | 마케팅 / 히어로 |
| Heading | headingLg, headingMd, headingSm | 페이지·섹션 제목 |
| Title | titleLg, titleMd, titleSm | 카드 / 다이얼로그 제목 |
| Subtitle | subtitleLg, subtitleMd | 강조된 보조 라인 |
| Body | bodyLg … bodyXs | 본문 텍스트 |
| Label | labelLg, labelMd, labelSm | 폼·메뉴 라벨 |
| Caption | captionLg … captionSm | 메타데이터·헬퍼 |
Family'Inter', sans-serif
Weights400 · 500 · 600 · 700 · 800
Display
RefineUI
displayLgheading1 · 64px / 86px
RefineUI
displayMdheading2 · 40px / 60px
RefineUI
displaySmheading3 · 32px / 40px
Heading
RefineUI
headingLgheading2 · 40px / 60px
RefineUI
headingMdheading3 · 32px / 40px
RefineUI
headingSmheading4 · 28px / 36px
Title
RefineUI
titleLgtitle1 · 32px / 40px
RefineUI
titleMdtitle2 · 28px / 36px
RefineUI
titleSmtitle3 · 24px / 32px
Subtitle
RefineUI
subtitleLgsubTitle1 · 20px / 28px
RefineUI
subtitleMdsubTitle2 · 16px / 24px
Body
RefineUI
bodyLgbody1 · 16px / 24px
RefineUI
bodyMdbody2 · 14px / 20px
RefineUI
bodySmbody3 · 14px / 20px
RefineUI
bodyXsbody4 · 12px / 16px
Label
RefineUI
labelLgbody1 · 16px / 24px
RefineUI
labelMdbody2 · 14px / 20px
RefineUI
labelSmcaption1 · 12px / 16px
Caption
RefineUI
captionLgcaption1 · 12px / 16px
RefineUI
captionMdcaption2 · 12px / 16px
RefineUI
captionSmcaption3 · 10px / 14px
사용법
섹션 제목: “사용법”import { Text } from "@refineui/react";
<Text variant="headingMd" as="h2"> Section title</Text><Text variant="bodyMd" as="p"> Body copy.</Text>