Typography

Use GdsTypography for all UI text. Choose a variant for the look you need — it applies the GDS type styles and the matching HTML element (for example, h1 renders as a heading, body1 as a paragraph).

Usage

All variants

Every variant rendered at its actual type style. The h1–h6 variants automatically render the matching HTML tag; the rest render <p> / <span> (see the Decoupling semantics from styling section to change the element without changing the look).

Variant reference

Variant	Default element	Use for
`h1`–`h6`	`<h1>`–`<h6>`	Page and section headings
`subtitle1`	`<h6>`	Larger secondary headers
`subtitle2`	`<h6>`	Smaller secondary headers
`b0`	`<p>`	Large body text (20px)
`b0Bold`	`<p>`	Large body text, bold (20px)
`body1`	`<p>`	Default paragraph text
`body2`	`<p>`	Smaller paragraph text
`button`	`<span>`	Button labels (matches `GdsButton`)
`caption`	`<span>`	Image captions, helper text
`overline`	`<span>`	Short labels above content
`inherit`	`<p>`	Inherit type styles from the parent

Large body (`b0` / `b0Bold`)

Use these when you need body copy larger than body1 (20px). Same API as other variants:

<GdsTypography variant="b0">
  Lead paragraph or hero support copy.
</GdsTypography>
<GdsTypography variant="b0Bold">
  Emphasized large body text.
</GdsTypography>

The matching tokens also live on theme.gds.core.typography for component styling — see Foundations → Typography.

Decoupling semantics from styling

By default variant controls both the visual style and the element rendered. To keep the visual style but change the element (for example, render h3-styled text as an h1 for accessibility), pass component:

This is the recommended way to keep your heading hierarchy correct without compromising on the visual design.