Typography
GDS uses Roboto across light and dark themes. Two related layers show up
below: the type scale (variants on GdsTypography for content, including
b0 / b0Bold) and body tokens (the same sizes on
theme.gds.core.typography for component styling).
Roboto
Primary type family · sans-serif · loaded via @fontsource/roboto
For content
Type scale
Use these with <GdsTypography variant="…"> - headings, paragraphs, captions. This is the day-to-day API for page copy. See the Typography component for examples. b0 / b0Bold are first-class variants (20px). body1 / body2 match the b1 / b2 tokens below.
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
Larger secondary header
Smaller secondary header
Large body — lead paragraphs and hero support.
Large body bold — emphasis at 20px.
Default paragraph size for body content.
Smaller paragraph size for dense UI.
Helper text and image captions.
Short labels above content
For components
Body tokens
Building-block sizes on theme.gds.core.typography. For page copy, prefer GdsTypography variants — including b0 / b0Bold. Use these tokens when a component needs the raw style object. b1 matches body1; b2 matches body2.
b020px · Regular · 125%
Large body for lead paragraphs and hero support copy.
b0Bold20px · Bold · 125%
Same size, bold — emphasis without jumping to a heading.
Full body set
Large body — lead paragraphs and hero support.
20px · Regular (400) · 125%
Large body bold — emphasis at 20px.
20px · Bold (700) · 125%
Default body — matches body1.
16px · Regular (400) · 125%
Default body bold.
16px · Bold (700) · 125%
Compact body — matches body2.
14px · Regular (400) · 135%
Compact body bold.
14px · Bold (700) · 135%
Small labels and dense UI.
12px · Regular (400) · 135%
Small labels, bold.
12px · Bold (700) · 135%
Loading Roboto
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";If you skip this, the browser falls back to system fonts and glyph shapes will be wrong - see the Button page.