Components

Typography

Native text elements styled by the elements layer. The full Material 3 type scale ships as settings-layer font tokens and as dh-<tier> classes that re-tier any element.

Open in Figma

Headings

Native `<h1>`–`<h6>` are styled by the elements layer — no component needed. h1 renders display-sm (page hero), h2 title-lg (section), h3 title-md (subsection), h4–h6 title-sm. For a different tier, re-tier the element with a type-scale class.

Page hero

Section heading

Subsection heading

Minor heading

<h1>Page hero (display-sm)</h1>
<h2>Section (title-lg)</h2>
<h3>Subsection (title-md)</h3>
<h4>Minor heading (title-sm)</h4>

Element defaults

The exact custom properties each text element gets from the elements layer, and the type-scale class that renders the same style on any other element.

ElementClassVariables
<h1>
dh-display-sm
--font-size-display-sm 2.25rem · 36px
--line-height-display-sm 2.75rem · 44px
--font-weight-regular 400
--font-letter-spacing-display-sm 0
<h2>
dh-title-lg
--font-size-title-lg 1.375rem · 22px
--line-height-title-lg 1.75rem · 28px
--font-weight-semibold 600
--font-letter-spacing-title-lg 0
<h3>
dh-title-md
--font-size-title-md 1rem · 16px
--line-height-title-md 1.5rem · 24px
--font-weight-medium 500
--font-letter-spacing-title-md 0.00938rem · 0.15px
<h4><h5><h6>
dh-title-sm
--font-size-title-sm 0.875rem · 14px
--line-height-title-sm 1.25rem · 20px
--font-weight-medium 500
--font-letter-spacing-title-sm 0.00625rem · 0.1px
<p>
dh-body-md
--font-size-body-md 0.875rem · 14px
--line-height-body-md 1.25rem · 20px
--font-letter-spacing-body-md 0.015625rem · 0.25px
<small>
dh-body-sm
--font-size-body-sm 0.75rem · 12px
--line-height-body-sm 1rem · 16px
--font-letter-spacing-body-sm 0.025rem · 0.4px
<strong><b>
—
--font-weight-semibold 600
<em><i>
—
Browser default italic — no library styles.
<sup><sub>
—
font-size: 0.75em with offsets — relative so it scales with the surrounding tier.
<code><kbd><samp>
—
--font-family-mono ui-monospace stack
font-size: 0.875em — relative so it scales with the surrounding tier. Letter spacing resets to normal; monospace carries its own rhythm.

Type scale

All fifteen shipped classes. Each sets the tier's complete text style — the four variables listed per row — and the preview is rendered by the class it documents.

ClassPreviewVariables
dh-display-lgAa
--font-size-display-lg 3.5625rem · 57px
--line-height-display-lg 4rem · 64px
--font-weight-regular 400
--font-letter-spacing-display-lg -0.015625rem · -0.25px
dh-display-mdAa
--font-size-display-md 2.8125rem · 45px
--line-height-display-md 3.25rem · 52px
--font-weight-regular 400
--font-letter-spacing-display-md 0
dh-display-smAa
--font-size-display-sm 2.25rem · 36px
--line-height-display-sm 2.75rem · 44px
--font-weight-regular 400
--font-letter-spacing-display-sm 0
dh-headline-lgAa
--font-size-headline-lg 2rem · 32px
--line-height-headline-lg 2.5rem · 40px
--font-weight-regular 400
--font-letter-spacing-headline-lg 0
dh-headline-mdAa
--font-size-headline-md 1.75rem · 28px
--line-height-headline-md 2.25rem · 36px
--font-weight-regular 400
--font-letter-spacing-headline-md 0
dh-headline-smAa
--font-size-headline-sm 1.5rem · 24px
--line-height-headline-sm 2rem · 32px
--font-weight-regular 400
--font-letter-spacing-headline-sm 0
dh-title-lgAa
--font-size-title-lg 1.375rem · 22px
--line-height-title-lg 1.75rem · 28px
--font-weight-semibold 600
--font-letter-spacing-title-lg 0
dh-title-mdAa
--font-size-title-md 1rem · 16px
--line-height-title-md 1.5rem · 24px
--font-weight-medium 500
--font-letter-spacing-title-md 0.00938rem · 0.15px
dh-title-smAa
--font-size-title-sm 0.875rem · 14px
--line-height-title-sm 1.25rem · 20px
--font-weight-medium 500
--font-letter-spacing-title-sm 0.00625rem · 0.1px
dh-body-lgAa
--font-size-body-lg 1rem · 16px
--line-height-body-lg 1.5rem · 24px
--font-weight-regular 400
--font-letter-spacing-body-lg 0.03125rem · 0.5px
dh-body-mdAa
--font-size-body-md 0.875rem · 14px
--line-height-body-md 1.25rem · 20px
--font-weight-regular 400
--font-letter-spacing-body-md 0.015625rem · 0.25px
dh-body-smAa
--font-size-body-sm 0.75rem · 12px
--line-height-body-sm 1rem · 16px
--font-weight-regular 400
--font-letter-spacing-body-sm 0.025rem · 0.4px
dh-label-lgAa
--font-size-label-lg 0.875rem · 14px
--line-height-label-lg 1.25rem · 20px
--font-weight-medium 500
--font-letter-spacing-label-lg 0.00625rem · 0.1px
dh-label-mdAa
--font-size-label-md 0.75rem · 12px
--line-height-label-md 1rem · 16px
--font-weight-medium 500
--font-letter-spacing-label-md 0.03125rem · 0.5px
dh-label-smAa
--font-size-label-sm 0.6875rem · 11px
--line-height-label-sm 1rem · 16px
--font-weight-medium 500
--font-letter-spacing-label-sm 0.03125rem · 0.5px
<!-- Every tier ships as a class… -->
<p class="dh-headline-lg">The quick brown fox…</p>

<!-- …and as a token triplet in the settings layer -->
<style>
  .my-heading {
    font-size: var(--font-size-headline-lg);
    line-height: var(--line-height-headline-lg);
    letter-spacing: var(--font-letter-spacing-headline-lg);
  }
</style>

Override classes

The type-scale classes live in the utilities layer, declared after elements — so they re-tier any element without `!important`. The element keeps its semantics; only the rendering changes. Two caveats: your own CSS written outside `@layer` still wins over these classes, and if you cherry-pick per-layer bundles instead of styles.css, import utilities.css last.

Section promoted to hero size

Hero demoted for a dense page

Styled like a subsection heading
<!-- Semantics stay, rendering re-tiers -->
<h2 class="dh-display-sm">Section promoted to hero size</h2>
<h1 class="dh-headline-sm">Hero demoted for a dense page</h1>
<span class="dh-title-md">Styled like a subsection heading</span>

Body

Native `<p>` is styled by the elements layer as body-md. Re-tier with `dh-body-lg` / `dh-body-sm`.

dh-body-lg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.

dh-body-md

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.

dh-body-sm

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.

<p>Default paragraph — body-md straight from the elements layer.</p>
<p class="dh-body-lg">Lede paragraph re-tiered with a class.</p>
<p class="dh-body-sm">Fine print.</p>

Inline text

Inline text elements are styled by the elements layer too: `<strong>` renders semibold, `<small>` body-sm, while `<sup>`/`<sub>` and `<code>` size relatively so they work inside any tier.

Body copy with semibold emphasis, italics, fine print, a footnote1, H2O and inline code.

<p>
  Body copy with <strong>semibold emphasis</strong>, <em>italics</em>,
  <small>fine print</small>, a footnote<sup>1</sup>, H<sub>2</sub>O and
  <code>inline code</code>.
</p>