Typography
Semantic text roles on top of Foundation heading, title, body, and caption styles.
Use Text with a semantic role (headingMd, bodyMd, labelSm). Each role aliases a Foundation preset in typographys. Do not pass raw fontSize or Foundation keys like body2 in product UI.
| Role family | Examples | Typical use |
|---|---|---|
| Display | displayLg, displayMd, displaySm | Marketing / hero |
| Heading | headingLg, headingMd, headingSm | Page and section titles |
| Title | titleLg, titleMd, titleSm | Card / dialog titles |
| Subtitle | subtitleLg, subtitleMd | Emphasized secondary lines |
| Body | bodyLg … bodyXs | Reading text |
| Label | labelLg, labelMd, labelSm | Form and menu labels |
| Caption | captionLg … captionSm | Metadata and helpers |
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>