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.
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...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 (primitives)
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 |
|---|---|
--font-line-height-tight | 100% |
--font-line-height-snug | 125% |
--font-line-height-normal | 150% |
--font-line-height-175 | 175% |
--font-line-height-200 | 200% |
Related
- Color tokens — pair text-* tokens with semantic backgrounds
- Spacing tokens — the rhythm typography sits on