Typography
Set the shared reading voice, then decide whether headings need their own face. Type roles keep headings, labels, captions, and body text related across components.
Map your decisions
| Recipe key | CSS property | What changes |
|---|---|---|
body-font | --ui-font-sans | Body text and the shared interface typeface used by controls. |
display-font | --ui-font-display | Heading and display text. |
text-size | --ui-font-size | The document's px text base. Type, geometry, and spacing derive their rem relationships from it once. |
label-size | --ui-field-label-font-size | Field labels. inherit follows the body size; a separate length makes labels independent. Help text stays supporting text. |
text-weight | --ui-font-medium | Shared emphasis such as control labels, while body and headings retain their roles. |
Try a body and heading pair
{
"schemaVersion": 1,
"values": {
"body-font": "system-ui, sans-serif",
"display-font": "Georgia, serif",
"text-size": "16px",
"label-size": "inherit"
}
}This pair uses an operating-system interface face and a serif heading stack. A font stack selects fonts already available to the application. Load custom or self-hosted faces in the application itself.
In Customize, a Google Fonts selection previews the real face and includes its import in the saved CSS. The recipe's optional fonts mapping keeps the selected Google family names; values keeps the matching CSS stacks. Export and import preserve both.
Separate meaning from appearance
<ui-text variant="display" as="h1">The field guide</ui-text>
<ui-text variant="heading" as="h2">Before you begin</ui-text>
<ui-text variant="body">A practical introduction for your team.</ui-text>
<ui-text variant="caption" tone="muted">Updated this week</ui-text>variant chooses a visual role. as chooses the document element. You can use a heading's appearance at the appropriate heading level without changing its place in the document outline.
Check the result
Compare a full heading, a paragraph, a field label, and supporting text together. Then check a medium button beside a medium field. A larger text base also changes the size relationships explained in Size & spacing.