Typography

One font family everywhere: Inter, a variable font that ships with both libraries — the web package bundles the woff2 files behind its @font-face, the Compose library loads the same family through its theme. On top of it sits the Material 3 type scale: five roles (display, headline, title, body, label) in three sizes each, with size, line height, weight and letter spacing defined per tier in the shared Figma Typescale.

Display

The largest text on screen — hero numbers, splash headings, empty-state statements. Use sparingly; one display element per view is usually enough.

  • The quick brown fox jumps over the lazy dog

    Tier
    display-lg
    Size / line height
    57 / 64 px
    Weight
    Regular 400
    Letter spacing
    -0.25px
    Web
    .dh-display-lg · --font-size-display-lg
    Compose
    MaterialTheme.typography.displayLarge

  • The quick brown fox jumps over the lazy dog

    Tier
    display-md
    Size / line height
    45 / 52 px
    Weight
    Regular 400
    Letter spacing
    0
    Web
    .dh-display-md · --font-size-display-md
    Compose
    MaterialTheme.typography.displayMedium

  • The quick brown fox jumps over the lazy dog

    Tier
    display-sm
    Size / line height
    36 / 44 px
    Weight
    Regular 400
    Letter spacing
    0
    Web
    .dh-display-sm · --font-size-display-sm
    Compose
    MaterialTheme.typography.displaySmall

Headline

High-emphasis headings for short, important text — section openers and prominent titles on larger viewports.

  • The quick brown fox jumps over the lazy dog

    Tier
    headline-lg
    Size / line height
    32 / 40 px
    Weight
    Regular 400
    Letter spacing
    0
    Web
    .dh-headline-lg · --font-size-headline-lg
    Compose
    MaterialTheme.typography.headlineLarge

  • The quick brown fox jumps over the lazy dog

    Tier
    headline-md
    Size / line height
    28 / 36 px
    Weight
    Regular 400
    Letter spacing
    0
    Web
    .dh-headline-md · --font-size-headline-md
    Compose
    MaterialTheme.typography.headlineMedium

  • The quick brown fox jumps over the lazy dog

    Tier
    headline-sm
    Size / line height
    24 / 32 px
    Weight
    Regular 400
    Letter spacing
    0
    Web
    .dh-headline-sm · --font-size-headline-sm
    Compose
    MaterialTheme.typography.headlineSmall

Title

Medium-emphasis headings that divide content — card titles, dialog headers, list section labels.

  • The quick brown fox jumps over the lazy dog

    Tier
    title-lg
    Size / line height
    22 / 28 px
    Weight
    Semibold 600
    Letter spacing
    0
    Web
    .dh-title-lg · --font-size-title-lg
    Compose
    MaterialTheme.typography.titleLarge

  • The quick brown fox jumps over the lazy dog

    Tier
    title-md
    Size / line height
    16 / 24 px
    Weight
    Medium 500
    Letter spacing
    0.15px
    Web
    .dh-title-md · --font-size-title-md
    Compose
    MaterialTheme.typography.titleMedium

  • The quick brown fox jumps over the lazy dog

    Tier
    title-sm
    Size / line height
    14 / 20 px
    Weight
    Medium 500
    Letter spacing
    0.1px
    Web
    .dh-title-sm · --font-size-title-sm
    Compose
    MaterialTheme.typography.titleSmall

Body

Running text. body-md is the default reading size across both platforms; body-lg suits ledes and long-form reading, body-sm captions and fine print.

  • The quick brown fox jumps over the lazy dog

    Tier
    body-lg
    Size / line height
    16 / 24 px
    Weight
    Regular 400
    Letter spacing
    0.5px
    Web
    .dh-body-lg · --font-size-body-lg
    Compose
    MaterialTheme.typography.bodyLarge

  • The quick brown fox jumps over the lazy dog

    Tier
    body-md
    Size / line height
    14 / 20 px
    Weight
    Regular 400
    Letter spacing
    0.25px
    Web
    .dh-body-md · --font-size-body-md
    Compose
    MaterialTheme.typography.bodyMedium

  • The quick brown fox jumps over the lazy dog

    Tier
    body-sm
    Size / line height
    12 / 16 px
    Weight
    Regular 400
    Letter spacing
    0.4px
    Web
    .dh-body-sm · --font-size-body-sm
    Compose
    MaterialTheme.typography.bodySmall

Label

Utility text on components — button captions, input labels, badges, overlines. Medium weight keeps it legible at small sizes.

  • The quick brown fox jumps over the lazy dog

    Tier
    label-lg
    Size / line height
    14 / 20 px
    Weight
    Medium 500
    Letter spacing
    0.1px
    Web
    .dh-label-lg · --font-size-label-lg
    Compose
    MaterialTheme.typography.labelLarge

  • The quick brown fox jumps over the lazy dog

    Tier
    label-md
    Size / line height
    12 / 16 px
    Weight
    Medium 500
    Letter spacing
    0.5px
    Web
    .dh-label-md · --font-size-label-md
    Compose
    MaterialTheme.typography.labelMedium

  • The quick brown fox jumps over the lazy dog

    Tier
    label-sm
    Size / line height
    11 / 16 px
    Weight
    Medium 500
    Letter spacing
    0.5px
    Web
    .dh-label-sm · --font-size-label-sm
    Compose
    MaterialTheme.typography.labelSmall

Custom text scale

A compact utility scale from the original Davidhorn apps, kept alongside the M3 roles for dense product surfaces. Compose exposes it as AppTextStyles, matching the Figma "Primary Font" originals shown here. The web tokens deliberately re-tune xs / normal / large to the M3 rhythm — normal doubles as body-md — so those rows flag the web value.

  • Name
    xs
    Size / line height
    9 / 11 px· Web: 10 / 14
    Web
    --font-size-xs
    Compose
    AppTextStyles.textXs()
  • Name
    small
    Size / line height
    12 / 16 px
    Web
    --font-size-small
    Compose
    AppTextStyles.textSmall()
  • Name
    normal
    Size / line height
    14 / 16 px· Web: 14 / 20
    Web
    --font-size-normal
    Compose
    AppTextStyles.textNormal()
  • Name
    medium
    Size / line height
    16 / 24 px
    Web
    --font-size-medium
    Compose
    AppTextStyles.textMedium()
  • Name
    large
    Size / line height
    20 / 24 px· Web: 18 / 28
    Web
    --font-size-large
    Compose
    AppTextStyles.textLarge()

Using it

Web: the elements layer styles h1–h6, p, small, strong and friends automatically, and every tier is available as a dh-<tier> class that re-tiers any element. The full element-to-variable mapping lives in the Svelte typography reference.

Compose: AppTheme installs the scale on MaterialTheme.typography, so components pick their role up from the theme — the same values shown above, including the semibold titleLarge and the Figma tracking on the three tiers Compose's own tokens retune. See the KMP text reference.