mielui
Status and content

Typography

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

Installation

pnpm dlx @mielui/svelte add typography

Usage

Pick each component for what the text is, not how it looks, and use class for a local exception. The text goes in children, so links, emphasis, and inline code can sit inside any of them. Text defaults to the supporting variant.

<script lang="ts">
    import * as Typography from '@mielui/svelte/components/typography';
</script>

<Typography.H2>Account settings</Typography.H2>
<Typography.Text>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>

Roles

Each component sets typography and color only. Set margins and layout on its parent.

H1-H6 h1-h6 --font-header / document heading scale / --font-weight-header
Text · lead p --font-size-header / --font-weight-description / foreground-muted
Text · body p --font-size-body / --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

Article header

Metadata, Title, and Description stack into the top of an article.

Heading levels

Use the heading that matches the document outline. Title has one size for compact component titles and takes the heading level it renders.

Text roles

Choose a paragraph role from how it relates to the content around it.

Numeric metadata

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

API reference

Typography.Description

Renders supporting text.

  • children Required
    Snippet<[]>

    Content rendered inside.

Typography.H1

Renders the primary document heading.

  • children Required
    Snippet<[]>

    Content rendered inside.

Typography.H2

Renders a document section heading.

  • children Required
    Snippet<[]>

    Content rendered inside.

Typography.H3

Renders a document subsection heading.

  • children Required
    Snippet<[]>

    Content rendered inside.

Typography.H4

Renders a fourth-level document heading.

  • children Required
    Snippet<[]>

    Content rendered inside.

Typography.H5

Renders a subdued fifth-level heading.

  • children Required
    Snippet<[]>

    Content rendered inside.

Typography.H6

Renders a subdued sixth-level heading.

  • children Required
    Snippet<[]>

    Content rendered inside.

Typography.InlineCode

Renders code within prose.

  • children Required
    Snippet<[]>

    Content rendered inside.

Typography.Metadata

Renders compact secondary information.

  • children Required
    Snippet<[]>

    Content rendered inside.

Typography.Text

Renders lead, body, or supporting prose.

  • children Required
    Snippet<[]>

    Content rendered inside.

  • variant
    TypographyTextVariant

    Text role, which sets size and color.

    Default 'supporting'

Typography.Title

Renders an explicit heading level.

  • children Required
    Snippet<[]>

    Content rendered inside.

  • level Required
    1 | 2 | 3 | 4 | 5 | 6

    Heading level to render.