# Typography

Document headings, role-based text, inline code, and compact interface typography primitives.

- Package: `@mielui/svelte`
- Component version: `1.1.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add typography
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Description

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| children | Snippet<[]> | - | Yes | No | Content rendered inside. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### H1

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| children | Snippet<[]> | - | Yes | No | Content rendered inside. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### H2

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| children | Snippet<[]> | - | Yes | No | Content rendered inside. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### H3

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| children | Snippet<[]> | - | Yes | No | Content rendered inside. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### H4

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| children | Snippet<[]> | - | Yes | No | Content rendered inside. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### H5

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| children | Snippet<[]> | - | Yes | No | Content rendered inside. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### H6

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| children | Snippet<[]> | - | Yes | No | Content rendered inside. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### InlineCode

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| children | Snippet<[]> | - | Yes | No | Content rendered inside. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Metadata

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| children | Snippet<[]> | - | Yes | No | Content rendered inside. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Text

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| children | Snippet<[]> | - | Yes | No | Content rendered inside. |
| variant | TypographyTextVariant \| undefined | 'supporting' | No | No | Text role, which sets size and color. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Title

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| children | Snippet<[]> | - | Yes | No | Content rendered inside. |
| level | 1 \| 2 \| 3 \| 4 \| 5 \| 6 | - | Yes | No | Heading level to render. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import Description from './typography-description.svelte';
import H1 from './typography-h1.svelte';
import H2 from './typography-h2.svelte';
import H3 from './typography-h3.svelte';
import H4 from './typography-h4.svelte';
import H5 from './typography-h5.svelte';
import H6 from './typography-h6.svelte';
import InlineCode from './typography-inline-code.svelte';
import Metadata from './typography-metadata.svelte';
import Text from './typography-text.svelte';
import Title from './typography-title.svelte';

export type {
    TypographyHeadingProps,
    TypographyInlineCodeProps,
    TypographyTextProps,
    TypographyTextVariant
} from './types';

export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
export type HeadingTag = `h${HeadingLevel}`;

export type TypographyTitleProps = HTMLAttributes<HTMLHeadingElement> & {
    /** Heading level to render. */
    level: HeadingLevel;
    /** Content rendered inside. */
    children: Snippet;
};

export type TypographyDescriptionProps = HTMLAttributes<HTMLParagraphElement> & {
    /** Content rendered inside. */
    children: Snippet;
};

export type TypographyMetadataProps = HTMLAttributes<HTMLSpanElement> & {
    /** Content rendered inside. */
    children: Snippet;
};

export { Description, H1, H2, H3, H4, H5, H6, InlineCode, Metadata, Text, Title };
~~~~

## Examples

### Heading Levels

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

<div class="flex w-full max-w-xl flex-col gap-5">
    <Typography.H1>Heading one</Typography.H1>
    <Typography.H2>Heading two</Typography.H2>
    <Typography.H3>Heading three</Typography.H3>
    <Typography.H4>Heading four</Typography.H4>
    <Typography.H5>Heading five</Typography.H5>
    <Typography.H6>Heading six</Typography.H6>
</div>
~~~~

### Hero

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

<article class="flex w-full max-w-xl flex-col gap-2">
    <Typography.Metadata>Project notes / September 3, 2026</Typography.Metadata>
    <Typography.Title level={2}>Preparing the September release</Typography.Title>
    <Typography.Description class="max-w-[62ch]">
        Review the updated components and documentation before publishing the next release.
    </Typography.Description>
</article>
~~~~

### Metadata

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

<div class="grid w-full max-w-sm grid-cols-[1fr_auto] items-baseline gap-x-8 gap-y-3">
    <Typography.Metadata>Build started</Typography.Metadata>
    <Typography.Metadata class="tabular-nums">09:41:07</Typography.Metadata>
    <Typography.Metadata>Tests completed</Typography.Metadata>
    <Typography.Metadata class="tabular-nums">09:43:18</Typography.Metadata>
    <Typography.Metadata>Deployment ready</Typography.Metadata>
    <Typography.Metadata class="tabular-nums">09:44:02</Typography.Metadata>
</div>
~~~~

### Text Roles

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

<div class="flex w-full max-w-xl flex-col gap-5">
    <Typography.Text variant="lead">
        Lead text introduces a page or a significant section.
    </Typography.Text>
    <Typography.Text variant="body">
        Body text carries longer explanations at a comfortable reading size and rhythm.
    </Typography.Text>
    <Typography.Text variant="supporting">
        Supporting text adds quieter instructions, context, or qualifications.
    </Typography.Text>
    <Typography.Text variant="body">
        Use{' '}
        <Typography.InlineCode>InlineCode</Typography.InlineCode>
        for commands, paths, and short identifiers within prose.
    </Typography.Text>
</div>
~~~~

For the rendered reference, visit [/docs/components/typography](/docs/components/typography).