Typography
Font families, the type scale, weights, and the semantic role rule.
Typography tokens control font families, sizes, weights, and line heights. Each theme can override font families — switching themes refreshes the live previews on this page.
Font family must match the element's semantic role. Heading/title elements → --font-family-heading. Label/badge/tag/button/caption → --font-family-label. Body copy → --font-family-body. BDS defaults all three to the same family during development, so misuse only surfaces when a client theme assigns distinct typefaces — by which point the violation has shipped.
Heading casing (title case) is a Build Standard, not a type-token rule. The full title-case grammar — major/minor words, hyphenated compounds, and the CMS-content and microcopy carve-outs — lives in Headings → Casing.
Font families
--font-family-display--font-family-heading--font-family-body--font-family-labelSemantic typography
These are the tokens components actually use. Each row renders the sample at its actual size — comparing a heading-md to a body-md is a hover-and-look operation, not a math operation.
Heading sizes
The heading scale starts at 18px (--heading-tiny). 16px territory is body and label.
Headings
--heading-tiny...--heading-sm...--heading-md...--heading-lg...--heading-xl...--heading-xxl...--heading-huge...Heading scale variants
The heading scale is the one mode axis on --heading-* (see Cascade → Modes). Default needs no attribute; set data-mode-typography on :root (or any subtree) to select a variant. compact/comfortable/spacious are uniform density steps; expressive is a steeper modular curve (smaller small end, larger large end) for editorial / marketing surfaces. Values are --font-size-* references (px shown):
| token | default | compact | comfortable | spacious | expressive |
|---|---|---|---|---|---|
--bds-heading-tiny | 20 | 18 | 22.5 | 25.3 | 16 |
--bds-heading-sm | 22.5 | 20 | 25.3 | 28.5 | 20 |
--bds-heading-md | 25.3 | 22.5 | 28.5 | 32 | 25.3 |
--bds-heading-lg | 28.5 | 25.3 | 32 | 36 | 32 |
--bds-heading-xl | 32 | 28.5 | 36 | 40.5 | 40.5 |
--bds-heading-xxl | 36 | 32 | 40.5 | 45.5 | 45.5 |
--bds-heading-huge | 40.5 | 36 | 45.5 | 51 | 57.5 |
<html data-mode-typography="expressive"> <!-- whole document -->
<section data-mode-typography="compact">…</section> <!-- one subtree -->display-* is mode-invariant — variants move --heading-* only.
Body sizes
Body
--body-tiny...--body-xs...--body-sm...--body-md...--body-lg...--body-xl...--body-huge...Label sizes
Labels
--label-tiny...--label-xs...--label-sm...--label-md...--label-lg...--label-xl...Display sizes
Display
--display-sm...--display-md...--display-lg...--display-xl...Icon sizes
Icon sizing tokens used by IconButton and inline icons.
Icons
--icon-tiny...--icon-xs...--icon-sm...--icon-md...--icon-lg...--icon-xl...--icon-huge...Font size scale
Primitive scale from 10px to 515px. Components reference these only through the semantic tokens above.
--font-size-2510.26px--font-size-5011.54px--font-size-7514px--font-size-10016px--font-size-20018px--font-size-30020px--font-size-40022.5px--font-size-50025.3px--font-size-60028.5px--font-size-70032px--font-size-80036px--font-size-90040.5px--font-size-100045.5px--font-size-110051px--font-size-120057.5px--font-size-130064.7px--font-size-140072.8px--font-size-150081.9px--font-size-160092.2px--font-size-1700103.9px--font-size-1800116.9px--font-size-1900143px--font-size-2000171px--font-size-2100205px--font-size-2200247px--font-size-2300296px--font-size-2400355px--font-size-2500426px--font-size-2600515pxFont weights
--font-weight-lightThe quick brown fox (300)--font-weight-thinThe quick brown fox (300)--font-weight-regularThe quick brown fox (400)--font-weight-mediumThe quick brown fox (500)--font-weight-semi-boldThe quick brown fox (600)--font-weight-boldThe quick brown fox (700)--font-weight-extra-boldThe quick brown fox (800)--font-weight-blackThe quick brown fox (900)Line heights
| Token | Value |
|---|---|
--bds-font-line-height-none | 0 |
--bds-font-line-height-tight | 110% |
--bds-font-line-height-snug | 125% |
--bds-font-line-height-moderate | 138% |
--bds-font-line-height-normal | 150% |
--bds-font-line-height-relaxed | 175% |
--bds-font-line-height-loose | 200% |
Related
- Color tokens — pair text-* tokens with semantic backgrounds
- Spacing tokens — the rhythm typography sits on