Sivir UI
Studio 64

Typography

Semantic text roles that keep visual hierarchy separate from document structure.

Release 0.2.9 / September 3, 2026

A quieter default for interface text

Title, description, and metadata share a deliberate hierarchy while the document keeps its native heading structure.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add typography

Usage

Choose a role for meaning, then use class for a local exception.

import * as Typography from '@sivir-ui/svelte/components/typography';

<Typography.H2>Account settings</Typography.H2>
<Typography.Text variant="supporting">Manage your profile and preferences.</Typography.Text>
<Typography.Text variant="body">
  Changes are saved to <Typography.InlineCode>profile.json</Typography.InlineCode>.
</Typography.Text>
<Typography.Metadata>Updated 4 minutes ago</Typography.Metadata>

Role reference

Each primitive owns typography and color, but never margins or surrounding layout.

H1-H6 h1-h6 --font-header / document heading scale / --font-weight-header
Text · lead p 1rem / --font-weight-description / foreground-muted
Text · body p 1rem / --font-weight-body / foreground
Text · supporting p --font-size-body / --font-weight-body / foreground-muted
InlineCode code --font-mono / --radius-sm / secondary
Title h1-h6 --font-header / --font-size-header / --font-weight-header
Description p --font-size-body / --font-weight-description / --tracking-body
Metadata span --text-xs / --font-weight-body / --tracking-body

Examples

Keep semantic levels explicit and add numeric treatment only where values are compared.

Heading levels

Use the heading that matches the document outline. Compact component titles remain available through Typography.Title.

Heading one

Heading two

Heading three

Heading four

Heading five
Heading six

Text roles

Choose a paragraph role from its relationship to the surrounding content, not from a standalone size or color.

Lead text introduces a page or a significant section.

Body text carries longer explanations at a comfortable reading size and rhythm.

Supporting text adds quieter instructions, context, or qualifications.

Use InlineCode for commands, paths, and short identifiers within prose.

Numeric metadata

Add tabular-nums when readers compare values in a column.

Build started 09:41:07 Tests completed 09:43:18 Deployment ready 09:44:02

Anatomy

Typography.Title - Renders an explicit heading level.

Typography.H1 - Renders the primary document heading.

Typography.H2 - Renders a document section heading.

Typography.H3 - Renders a document subsection heading.

Typography.H4 - Renders a fourth-level document heading.

Typography.H5 - Renders a subdued fifth-level heading.

Typography.H6 - Renders a subdued sixth-level heading.

Typography.Text - Renders lead, body, or supporting prose.

Typography.InlineCode - Renders code within prose.

Typography.Description - Renders supporting text.

Typography.Metadata - Renders compact secondary information.